HighCharts：仅在系列重叠时使用共享工具提示

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/

Answer 1

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

Answer 2

Unless an elaborate work-around is concocted, highcharts does not support this yet. See this post (which has a comment 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.

Answer 3

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 compare with this.y and if values are similar add more points to the returned tooltip.