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?

/

$(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]
        }]
    });
});

/

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/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/adamtsiopani/XbYZz/

• javascript
• highcharts

• Suggested this as a feature to highcharts. Give your votes there: highcharts.uservoice./forums/55896-highcharts-javascript-api/… – Manuel Commented May 11, 2020 at 13:22

3 Answers 3

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/Malinga/2jbdqe6x/7/

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

Unless an elaborate work-around is concocted, highcharts does not support this yet. See this post (which has a ment from a user who claims to be a highcharts engineer):

is a way to see all data in tooltip when the points are overlap with each other(or very close), but see only one data when a point is far from others

I guess you will just have to rely on users using the legend for deselecting a series that is blocking another one.

As user, I would be confused to see 50 series on a chart - is that readable? Good idea would be to use separate yAxis, or separate panes, but still 50 series..

However, you can do some workaround. Don't use shared tooltip, but in tooltip formatter, get actual x-index (for example var xIndex = series.xData.indexOf(this.x);) then loop through all series, get values from series data (for example var yValue = series.yData[xIndex];). Now pare with this.y and if values are similar add more points to the returned tooltip.