Showing multiple Tooltips in highcharts simultaneously

Question

I want to show multiple tool tips at the same time in a Highchart. The basic requirement is like whenever the mouse is hovered over a point in the series I need to show the tool tip for all the points within a radius X of the hovered point. I have tried something like this so far : http://jsfiddle.net/vmso2dbf/

$(function () {
    $('#container').highcharts({

        title: {
            text: 'Multiple tooltips'
        },
        plotOptions: {
            series: {
                point: {
                    events: {
                        mouseOver: function (event) {
                            var r = 50;
                            var arr = [];
                            var chart = this.series.chart;
                            var currX = this.plotX;
                            var currY = this.plotY;
                            var points = this.series.points;
                            for(var i=0;i<points.length;i++){
                                var xdiff = currX - points[i].plotX;
                                var ydiff = currY - points[i].plotY;
                                var distance = Math.abs(xdiff*xdiff - ydiff*ydiff);
                                if(distance < r*r)
                                    arr.push(points[i]);
                            }
                            chart.tooltip.refresh(arr);
                        }
                    }
                },
            }
        },

        tooltip: {
            enabled: true,
            shared : true
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });
});

But I need multiple tool tips at the same time and not just one big tool tip for all the points concerned. If that is possible , is there a way to get these tool tips self aligned as per the space available ? Is there any existing plugin/feature in Highcharts that can help me solve this problem ?

Answer 1

A way to achieve this is to clone tooltips. In addition you will have to keep track of the clones as you keep hovering over new points, to correctly remove old tooltips and add new ones.

An example which adds to your code would be (new code is commented):

// Array for keeping track of open tooltips
var openTooltips = [];

$('#container').highcharts({
     // Skipping irrelevant options

    plotOptions: {
        series: {
            point: {
                events: {
                    mouseOver: function (event) {
                        var chart = this.series.chart;

                        // Remove any currently open tooltips
                        for(var i = 0; i < openTooltips.length; i++) {      
                            chart.container.firstChild.removeChild(openTooltips[i]);
                        }
                        // Reset array
                        openTooltips = [];

                        var r = 50;
                        var currX = this.plotX;
                        var currY = this.plotY;
                        var points = this.series.points;
                        for(var i=0;i<points.length;i++){
                            var xdiff = currX - points[i].plotX;
                            var ydiff = currY - points[i].plotY;
                            // Changed distance formula to use plus instead of minus
                            var distance = Math.abs(xdiff*xdiff + ydiff*ydiff);
                            if(distance < r*r) {
                                // Open the tooltip for the point
                                chart.tooltip.refresh([points[i]]);
                                // Clone tooltip and add it to array
                                openTooltips.push(this.series.chart.tooltip.label.element.cloneNode(true));
                                // Append tooltip to show it in chart
                                chart.container.firstChild.appendChild(openTooltips[openTooltips.length-1]);
                            }
                        }
                    }
                }
            },
        }
    },

    tooltip: {
        enabled: true,
        shared : true,
        animation: false // Disable animation to get correct tooltip positions
    }
});

As you can see most of the changes are in cloning the tooltip and keeping track of them. Note that tooltip animation has been disabled to avoid misplaced tooltips. I also changed your distance formula from a difference to a sum, as is normal in finding Euclidean distance.

See this JSFiddle example of how it looks and works. The tooltip code in this answer is strongly inspired by Marks answer for "Keep tooltip showing on click".

Answer 2

Write following in your tooltip block if you dont want a one common tooltip.

tooltip: {
        enabled: true,
        shared : false
    }