j0nes j0nes - 2 months ago 15
Javascript Question

Display tooltip for invisible series in Highcharts

I am trying to display a custom tooltip using Highcharts. You can find an example of the code here:
http://jsfiddle.net/fDNh9/1/

When you hover over the chart, you can see that the tooltip only contains values from Series 2, but not from Series 1 (which is invisible). When you click on "Series 1" in the legend, you can see the values from Series 1 in the tooltip.

Is there any way to display the values from an invisible series in a tooltip?

Answer
tooltip: {
    formatter: function() {
        var s = '<b>'+ this.x +'</b>';
        var chart = this.points[0].series.chart; //get the chart object
        var categories = chart.xAxis[0].categories; //get the categories array
        var index = 0;
        while(this.x !== categories[index]){index++;} //compute the index of corr y value in each data arrays           
        $.each(chart.series, function(i, series) { //loop through series array
            s += '<br/>'+ series.name +': ' +
                series.data[index].y +'m';     //use index to get the y value
        });           
        return s;
    },
    shared: true
}
Comments