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...