Highcharts Demo

author(s): Torstein Hønsi

by Muhammad Mushtaq Sheikh

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div

JavaScript

$(function () {
    // Array for keeping track of open tooltips
    var openTooltips = ;
    
    $('#container').highcharts({
        
        title: {
            text: 'Multiple tooltips'
        },
        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]);
                       ...