Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Highcharts Tooltip formatting for shared Tooltips

If for example I have a chart with three series in it and the tooltips are set to shared, I would like more control over formatting the tooltips. Currently I use the formatter: somefunction() and create my own html to use in the tooltip that is displayed. Now this works very nicely, but now I would like to be able to know when the formattor function fires which series I am over so that out of the three series in the tooltip I can format the text I show accordingly.

Shared Tooltip:

Header Label

  Series 1
  Series 2 (If I am hovering over this item I want to bold it in the formatter function)
  Series 3
like image 801
SRSonnenwald Avatar asked Dec 22 '25 13:12

SRSonnenwald


1 Answers

There isn't such info in shared tooltip - simply you can hover empty space on a chart (none of series) and it will be displayed, see: http://jsfiddle.net/LBsL5/

Solution which may work for you is to disable shared tooltip and get values from other series using:

var xIndex = this.series.xData.indexOf(this.x),
    allSeries = this.series.chart.series;

Now loop over all series and use allSeries[index].yData[xIndex] to get value from each series.

Of course, if this.series.index (or this.series.options.index ) is the same index above, then generate bold text.

like image 183
Paweł Fus Avatar answered Dec 24 '25 01:12

Paweł Fus



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!