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: so

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

Solution 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;
    }
}