Angular gauge charts are also known as speedometers and dials. They are great to use on dashboards, especially when the plotted data is being fetched in real time. These charts don't contain the x axis, but instead, they contain only one value axis, that is, the y axis. Anything provided for the x axis will not be drawn on the chart.
In the following example, we will plot a simple angular gauge chart to take a look at the configuration options it offers:
$( '#chart_container' ).highcharts({ chart: { type: 'gauge' }, title: { text: 'Speedometer' }, pane: { startAngle: -150, endAngle: 150 }, yAxis: { title: { text: 'km/h' }, min: 0, max: 200 }, series: [{ name: 'Speed', data: [120] }] });
Nothing much is going on here as we declared the chart type to be gauge. Then, for the pane component, we defined its start and end angles at -150
and 150
, respectively. This will create a simple gauge chart as...