Creating a solid gauge
Solid gauges were introduced in Highcharts 4 and they are similar to angular gauges, except that they use solid colors to display the value. This color responds to the value on the y axis, and we can define the colors that correspond to different value ranges in yAxis.stops
in an array.
Consider the following example in which we will configure a solid gauge:
$( '#chart_container' ).highcharts({ chart: { type: 'solidgauge' }, title: { text: 'Speedometer' }, pane: { startAngle: -90, endAngle: 90, background: { backgroundColor: 'none', borderColor: '#aaa', innerRadius: '100%', outerRadius: '60%', shape: 'arc' } }, plotOptions: { solidgauge: { dataLabels: { y: -40, borderWidth: 0, useHTML: true } } }, tooltip: { enabled: false }, yAxis: { title: { text: 'km/h', align: 'low', x: -15 }, stops...