Highcharts Tooltip formatting for shared Tooltips

Question

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

Answer 1

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.

Answer 2

Thanks for the direction on this. I am posting the full code here to implement this. Hopefully it will help others.

// Header for tooltip.
// This row consists of bold text, with the text being the xAxis Label 
// that the Series falls in followed by the Chart Title.
var toolTip = '<b>' + this.x + ' ' + chartTitle + '</b><br/>';

// Get the current index in the Series you are hovering over.
var xIndex = this.series.xData.indexOf(this.point.x);

// Get all the Series represented in the Chart.
var allSeries = this.series.chart.series;

// Loop over each Series.
for (var index = 0; index < allSeries.length; index++) {
    // Get the value from each Series.
    var yDataValue = allSeries[index].yData[xIndex];

    // Check if this is the same as index and if it is then you are 
    // hovering over the point that needs the text in the formatted tooltip in bold for that Series.
    if (this.series.index === index || this.series.options.index === index) {
        //
        // Generate Bold Text here.
        //

        toolTip = toolTip + '<b>' + allSeries[index].name + ': ' + yDataValue + '</b>';
    }
    else {
        toolTip = toolTip + allSeries[index].name + ': ' + yDataValue;
    }
}