HighCharts: Use shared tooltip only when series overlap

Question

In the below HighCharts example, the series A and B have identical data. Only the line for B is visible in the chart plot area, as it is plotted directly over A.

It is impossible for the end user to know that the A is behind B.

We can set tooltip.shared = true in the configuration object to show all the data values for a given x-axis point when hovered over any series. However, in my real-life example I have up to 50 series plotted on the chart and this is not appropriate.

Is it possible to keep the behaviour of tooltip.shared = false, but when the user hovers over a series that overlaps at that point with one or more series, to show all (and only) of the overlapping series values in the tooltip? Or is there any other user-friendly way to indicate that there are 2+ identical y-values at a given x-value?

http://jsfiddle.net/adamtsiopani/XbYZz/

$(function () {
    $('#container').highcharts({
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        tooltip: {
            valueSuffix: '°C'
        },
        series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: 'New York',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    });
});

http://jsfiddle.net/adamtsiopani/XbYZz/

Suggested this as a feature to highcharts. Give your votes there: highcharts.uservoice.com/forums/55896-highcharts-javascript-api/… — Manuel

Malinga Malinga · Accepted Answer · 2015-01-16T17:46:25

Highcharts doesn't have a solution for this yet. They have a feature to hide one series so other is visible, this is a good alternative. But if you need to get a shared tool-tip when the 2 series overlap it can be done as shown in the below fiddle.

$(function () {
    var series1 = [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4];

    var series2 = [24.9, 50.5, 106.4, 90.2, 80.0, 150.0, 160.6, 170.5, 160.4, 180.1, 95.6, 54.4];

    $('#container').highcharts({
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        tooltip: {
            formatter: function () {
                var s1 = this.series.chart.series[0].processedYData[this.point.index];
                var s2 = this.series.chart.series[1].processedYData[this.point.index];
                if (s1 == s2) {
                    return '<b>' + this.series.chart.series[0].name + ' :' + s1 + '</b><br/><b>' + this.series.chart.series[1].name + ' :' + s2 + '</b><br/>in month : ' + this.x;
                }
                return '<b>' + this.series.name + ' :' + this.y + '</b><br/>in month : ' + this.x;
            }
        },
        series: [{
            data: series1
        }, {
            data: series2
        }]
    });
});

http://jsfiddle.net/Malinga/2jbdqe6x/7/

reference:http://www.malinga.me/highcharts-shared-tooltips-only-in-overlapping-points/#more-109

HighCharts: Use shared tooltip only when series overlap

3 Answers