Show multiple Tooltips in highcharts on overlapping points

Question

Need to show multiple tooltips in the highchart only when multiple series points are overlapping.

same functionality I can achieve through the below link. https://stackguides.com/questions/28918567/showing-multiple-tooltips-in-highcharts-simultaneously

But the only problem I am facing here is always showing duplicate tooltip on hover over the single series (Unlike the above example here I am using time-series chart so that the line points will be continuous).

please help me to solve this problem.

Hi @ppotaczek, This is the issue I am facing in this fiddle - brfLdv7o

Showing a blue tooltip, Even though I hovered the yellow series line. please check the attached screenshot.

ppotaczek ppotaczek · Accepted Answer · 2019-08-06T14:25:24

You can use tooltip.split property to render multiple tooltips and hide unnecessary ones in tooltip refresh method wrap:

(function(H) {
    H.wrap(H.Tooltip.prototype, 'refresh', function(proceed, points) {
        var split = false,
            labels;

        proceed.apply(this, Array.prototype.slice.call(arguments, 1));

        labels = this.label.element.children;

        for (var i = 1; i < points.length; i++) {
            if (
                points[i - 1].x === points[i].x &&
                points[i - 1].y === points[i].y
            ) {
                split = true;
                break;
            }
        }

        if (!split) {
            points.forEach(function(p) {
                if (p.hoveredPoint) {
                    labels[p.series.index].setAttribute('opacity', 1);
                    p.hoveredPoint = false;
                } else {
                    labels[p.series.index].setAttribute('opacity', 0);
                    p.setState('');
                }
            }, this)
        } else {
            points.forEach(function(p) {
                labels[p.series.index].setAttribute('opacity', 1);
            })
        }
    });
}(Highcharts));

Highcharts.chart('container', {
    plotOptions: {
        series: {
            point: {
                events: {
                    mouseOver: function(event) {
                        this.hoveredPoint = true;
                    }
                }
            },
        }
    },

    ...
});

Live demo: http://jsfiddle.net/BlackLabel/ymr1xbnh/

Docs: https://www.highcharts.com/docs/extending-highcharts

API Reference:

https://api.highcharts.com/highcharts/tooltip.split

https://api.highcharts.com/highcharts/series.line.point.events.mouseOver

Show multiple Tooltips in highcharts on overlapping points

1 Answers