Gauge Chart

Overview

A gauge chart is a type of pie chart with some unique features. The main components of a gauge chart are:

• Series
• Legend

The Series defines the data to add to the chart. Each series can define its own color, push out and various other options.

The Legend displays a small graphic indicating the color of the series data in the chart along with a label describing the data.

Complete documentation on Gauge Charts can be found at LiveCharts2.

Examples

270° Gauge Chart

Component Definition

{
    "type": "GaugeChart",
    "title": "270° Gauge Chart",
    "chartStyle": {
        "gaugeTotal": 100,
        "initialRotation": -225,
        "maxAngle": 270,
        "isClockWise": true,
        "titleStyle": {
            "textOptions": {
                "fontSize": 16,
                "weight": "bold"
            }
        }
    },
    "style": {
        "layoutOptions": {
            "height": 200
        }
    },
    "defaultSeriesStyle": {
        "showDataLabels": true,
        "dataLabelsStyle": {
            "polarPosition": "ChartCenter",
            "textOptions": {
                "format": {
                    "formatString": "{0}%"
                },
                "fontSize": 30
            }
        },
        "backgroundFill": { 
            "color": "LightGray"
        },
        "backgroundInnerRadius": 50,
        "backgroundMaxRadialColumnWidth": 60,
        "backgroundOffsetRadius": 0,
        "innerRadius": 50,
        "maxColumnWidth": 60,
        "radialAlign": "Inner"
    },
    "series": [
        {
            "dataQuery": "gaugeChart.values",
            "style": {
                "fill": { "color": "#9FBF5F"}
            }
        }
    ]
}

Data

{
  "gaugeChart": [
    {
        "values": [60]
    }
  ]
}

180° Gauge Chart

Component Definition

{
    "type": "GaugeChart",
    "title": "180° Gauge Chart",
    "chartStyle": {
        "gaugeTotal": 100,
        "initialRotation": 180,
        "maxAngle": 180,
        "isClockWise": true,
        "titleStyle": {
            "textOptions": {
                "fontSize": 16,
                "weight": "bold"
            }
        }
    },
    "style": {
        "layoutOptions": {
            "height": 200
        }
    },
    "defaultSeriesStyle": {
        "showDataLabels": true,
        "dataLabelsStyle": {
            "polarPosition": "ChartCenter",
            "textOptions": {
                "format": {
                    "formatString": "{0}%"
                },
                "fontSize": 25
            }
        },
        "backgroundFill": { 
            "color": "LightGray"
        },
        "backgroundInnerRadius": 50,
        "backgroundMaxRadialColumnWidth": 60,
        "backgroundOffsetRadius": 0,
        "innerRadius": 50,
        "maxColumnWidth": 60,
        "radialAlign": "Inner"
    },
    "series": [
        {
            "dataQuery": "gaugeChart.values",
            "style": {
                "fill": { "color": "#9FBF5F"}
            }
        }
    ]
}

Data

{
  "gaugeChart": [
    {
        "values": [60]
    }
  ]
}

Radial Gauge Chart

Component Definition

{
    "type": "GaugeChart",
    "title": "Radial Gauge Chart",
    "chartStyle": {
        "gaugeTotal": 100,
        "initialRotation": 45,
        "maxAngle": 270,
        "isClockWise": true,
        "titleStyle": {
            "textOptions": {
                "fontSize": 16,
                "weight": "bold"
            }
        }
    },
    "style": {
        "layoutOptions": {
            "height": 300
        }
    },
    "defaultSeriesStyle": {
        "legendSize": 10,
        "showDataLabels": true,
        "dataLabelsStyle": {
            "polarPosition": "Start",
            "textOptions": {
                "fontColor": "Black",
                "fontSize": 14
            }
        },
        "backgroundFill": { 
            "color": "LightGray"
        },
        "backgroundInnerRadius": 20,
        "backgroundMaxRadialColumnWidth": 30,
        "backgroundOffsetRadius": 0,
        "innerRadius": 20,
        "maxColumnWidth": 30,
        "maxOuterRadius": 1,
        "offsetRadius": 0,
        "radialAlign": "Inner"
    },
    "series": [
        {
            "dataQuery": "radialGaugeChart[0].values", 
            "labelQuery": "radialGaugeChart[0].labels",
            "style": { "fill": { "color": "#9FBF5F"} } 
        },
        { 
            "dataQuery": "radialGaugeChart[1].values",
            "labelQuery": "radialGaugeChart[1].labels", 
            "style": { "fill": { "color": "#C95F41"} } 
        },
        { 
            "dataQuery": "radialGaugeChart[2].values",
            "labelQuery": "radialGaugeChart[2].labels", 
            "style": { "fill": { "color": "#6C93EB"} } 
        }
    ]
}

Data

{
  "radialGaugeChart": [
    {
      "name": "Taxes",
      "values": 40,
      "labels": ["Taxes 40%"]
    },
    {
      "name": "Expenses",
      "values": 60,
      "labels": ["Expenses 60%"]
    },
    {
      "name": "Income",
      "values": 70,
      "labels": ["Income 70%"]
    }
  ]    
}

Schemas

GaugeChart

key	type	required	description
type	string	required	A string defining the component type as a GaugeChart.
title	string	optional	An optional Title for the chart. Location, formatting and other settings for the title are set in the ChartStyle.
chartStyle	string or GaugeChartStyle	optional	Either a style identifier or a style object used to define various settings for the chart.
series	GaugeChartSeries[]	required	An array of GaugeChartSeries objects that define each data series to display in the chart.
seriesQuery	string	optional	A JSONata query selecting the series data to display in the chart. The return value of the query must be an array of ChartSeries objects. This value is not allowed if series is defined.
seriesQueryStyles	GaugeChartSeriesStyle[]	optional	An array of styles to use if using seriesQuery. Styles are applied in order and reused once exhausted. Required if seriesQuery is defined.
defaultSeriesStyle	string or GaugeChartSeriesStyle	optional	Either a style identifier or a style object used to define default settings for all Series in the chart. Series styles can be overridden at the Series level in the chart definition.
gridRow	integer	optional	The grid row to place the component. Only applicable when inside a GridV2 component.
gridColumn	integer	optional	The grid column to place the component. Only applicable when inside a GridV2 component.
gridRowSpan	integer	optional	The number of rows to span inside the grid. Only applicable when inside a GridV2 component. Default value is 1.
gridColumnSpan	integer	optional	The number of columns to span inside the grid. Only applicable when inside a GridV2 component. Default value is 1.
rowWidth	float	optional	A fixed width for the component inside the row. Only applicable when inside a RowV2 component.
rowRelativeWidth	float	optional	A proportional width for the component inside the row. Only applicable when inside a RowV2 component.

GaugeChartStyle

key	type	required	description
titleStyle	string or ChartLabelStyle	optional	Either a style identifier or a ChartLabelStyle object used to define the style for the title.
legendStyle	string or Style	optional	Either a style identifier or a style object used to define the text formatting options for the legend. Any layoutOptions in the style are ignored for the legend. For a more detailed explanation of the style system, see Styles.
legendPosition	string	optional	The location for the chart legend. Must be one of: Hidden, Top, Left, Right, or Bottom. Default value is Hidden.
legendBackgroundPaint	Paint	optional	An optional Paint object for drawing the background of the legend.
initialRotation	integer	optional	Sets the angle, in degrees, where the first slice of data is drawn. Negative or positive angles are allowed.
maxAngle	integer	optional	Determines the complete angle in degrees of the chart. Default value is 360, or a complete circle.
gaugeTotal	integer	optional	Sets the max value for the gauge chart.
isClockwise	bool	optional	Determines the rotation of the chart values. Default value is true, meaning clockwise.

GaugeChartSeries

key	type	required	description
name	string	required	A string defining the name of the series. As with any other string, string substitution is possible with a JSONata query by using @(QUERY) syntax.
seriesData	ChartSeriesData[]	optional	An array of ChartSeriesData objects that will define the data for the series. If defined, the dataQuery and labelQuery settings are ignored.
dataQuery	string	optional	A JSONata query string that will be used to extract values for this data series. The return value of the query must be an array of floats or integers.
labelQuery	string	optional	A JSONata query string that will be used to extract labels for this data series. The return value of the query must be an array of strings.
style	string or GaugeChartSeriesStyle	optional	Either a style identifier or a style object used to define options for the series. For a more detailed explanation of the style system, see Styles.

GaugeChartSeriesStyle

key	type	required	description
fill	Paint	optional	A Paint object that describes the fill color of the data series.
stroke	Paint	optional	A Paint object that describes the stroke color and width of the data series.
showDataLabels	bool	optional	If true, data labels will be drawn for each data point in the series.
dataLabelsStyle	string or ChartLabelStyle	optional	Either a style identifier or a ChartLabelStyle object used to define the style for the series labels.
legendSize	number	optional	The size of the legend for the series, in pixels.
innerRadius	number	optional	The inner radius of the slice in pixels. Default value is 0 which fills the circle.
maxOuterRadius	number	optional	Sets the maximum radius (in percentage) of the slice. Valid values are from 0 to 1, where 1 is the full radius and 0 is none. Default value is 1.
backgroundFill	Paint	optional	A Paint object used to draw the background of the series.
backgroundInnerRadius	number	optional
innerRadius	number	optional
maxOuterRadius	number	optional
offsetRadius	number	optional
backgroundMaxRadialColumnWidth	number	optional
maxColumnWidth	number	optional
radialAlign	string	optional	Valid values are Outer, Center, or Inner.
backgroundInnerRadius	number	optional