1

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.

http://jsfiddle.net/uqa0t3xw

series: [{
    name: 'mileage counter',
    data: [],
    dataLabels: {
        x: 0, y: 20,
        format: '{y:.0f} km',
    }
}]
Vinz
  • 25
  • 1
  • 6
  • are you looking for [this](http://jsfiddle.net/robschmuecker/edLHB/7/)? – TechnoCrat Mar 22 '15 at 16:45
  • @TechnoCrat Thank you for the test, that's the same I got with several series in one gauge. I think the hints **Ondkloss** wrote are helpful: "transparent" and "overlapping". – Vinz Mar 23 '15 at 09:44

1 Answers1

1

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.

Halvor Holsten Strand
  • 19,829
  • 17
  • 83
  • 99
  • @TechnoCrat **Fantastic**, transparent and overlapping seem to be the essential hints. But I hope, the dial-animation is disabled when being transparent. Otherwise it would invisibly rotate several thousand times. What do you think? http://jsfiddle.net/uqa0t3xw/5/ – Vinz Mar 23 '15 at 09:46
  • **Sorry @Ondkloss**, I wanted to address you with this post. http://jsfiddle.net/uqa0t3xw/6/ – Vinz Mar 23 '15 at 09:59
  • If you just remove the coloring it does seem to rotate quite a bit, but without noticable slowness or performance issues for me. Either way, you could do all your updating of that particular point without animation. The third parameter of the `update` function is `animation`. See [this JSFiddle example](http://jsfiddle.net/uqa0t3xw/7/). – Halvor Holsten Strand Mar 23 '15 at 10:10
  • @Vinz, not sure if you got notified of my comment. – Halvor Holsten Strand Mar 23 '15 at 10:34
  • You are absolutely right, thank you. This is from the api: http://api.highcharts.com/highcharts#Point.update There you can test the animation=false. This works as expected. Thank's for your help. – Vinz Mar 23 '15 at 22:56