There are several examples with the Speedometer in Highcharts.
Is there a way, to show an additional dataLabel only, without dial in the gauge? It could show a trip recorder, mileage counter or day counter.
I tried additional series and dataLabels, but could not get it running.
series: [{
name: 'mileage counter',
data: [],
dataLabels: {
x: 0, y: 20,
format: '{y:.0f} km',
}
}]
If you want to have an additional data label by adding another series and hiding the dial you can do so by setting the color of the dial to "transparent"
(JSFiddle):
series: [
// Our "hidden" series
{
name: 'mileage counter',
data: [0],
dataLabels: {
x: 0, y: 50,
format: '{y:.0f} km',
},
dial: {
backgroundColor: 'transparent'
}
},
// ... Other series
]
Also note how the y
value has to be big enough to not overlap with the other data labels. If it overlaps it will be hidden, since gauge has allowOverlap: false
by default. Alternatively you could set that to true
, but overlapping might not be pretty.
It should be noted that this can also be solved by creating your own div
and placing it in the correct spot or perhaps copying the data label from the first series and moving it slightly.