Highchart tooltip show nearest point

Question

I have been trying to make highchart tooltip to show the nearest point incase the x-axis value aren't align in different series.

This is what I got so far

http://jsfiddle.net/Yw8hb/5/

Highcharts.wrap(Highcharts.Tooltip.prototype, 'refresh', function (proceed) {
    var args = arguments,
        points = args[1],
        point = points[0],
        chart = point.series.chart;

    // Loop over all the series of the chart
    Highcharts.each(chart.series, function(series) {
        // This one already exist
        if (series == point.series) return;

        var current,
            dist,
            distance = Number.MAX_VALUE;
        // Loop over all the points
        Highcharts.each(series.points, function(p) {
            // use the distance in X to determine the closest point
            dist = Math.abs(p.x - point.x);
            if (dist < distance) {
                distance = dist;
                current = p;
            }
        });

        // Add the closest point to the array
        points.push(current);        
    });  

    proceed.apply(this, [].slice.call(args, 1));
});

It seems to be working half way there however when you hover in some spot it shows duplicated series. I have spent hours trying to figure this out any help would be very appreciated.

Answer 1

Don't forget tooltip option shared!

options    = {
            tooltip: {
                shared: true,
....

Answer 2

for constant order the tooltips

Highcharts.wrap(Highcharts.Tooltip.prototype, 'refresh', function (proceed) {
            var args = arguments,
                    points = args[1],
                    point = points[0],
                    chart = point.series.chart;

            // Loop over all the series of the chart
            Highcharts.each(chart.series, function (series) {
                // This one already exist
                if (series == point.series || series.visible == false)
                    return;

                var current,
                        dist,
                        distance = Number.MAX_VALUE;
                // Loop over all the points
                Highcharts.each(series.points, function (p) {
                    // use the distance in X to determine the closest point
                    dist = Math.abs(p.x - point.x);
                    if (dist < distance) {
                        distance = dist;
                        current = p;
                        return;
                    }
                });

                // Add the closest point to the array
                if (points.indexOf(current) == -1)
                    points.push(current);
            });
            // for not changing the tooltip series order
            var tt = [].slice.call(args, 1);
            tt[0].sort(function (a, b) {
                if (a.color < b.color)
                    return -1;
                if (a.color > b.color)
                    return 1;
                return 0;
            });

            proceed.apply(this, tt);

        });

Answer 3

Before insertion, check whether points array contains the current point in your refresh callback function.

// Add the closest point to the array
if(points.indexOf(current)==-1)
   points.push(current);    

Highcharts.wrap(Highcharts.Tooltip.prototype, 'refresh', function (proceed) {
    var args = arguments,
        points = args[1],
        point = points[0],
        chart = point.series.chart;
    
    // Loop over all the series of the chart
    Highcharts.each(chart.series, function(series) {
        // This one already exist
        if (series == point.series) return;
        
        var current,
            dist,
            distance = Number.MAX_VALUE;
        // Loop over all the points
        Highcharts.each(series.points, function(p) {
            // use the distance in X to determine the closest point
            dist = Math.abs(p.x - point.x);
            if (dist < distance) {
                distance = dist;
                current = p;
            }
        });
        
        // Add the closest point to the array
        if(points.indexOf(current)==-1)
           points.push(current);        
    });  
    
    proceed.apply(this, [].slice.call(args, 1));
});

$('#container').highcharts({
    tooltip: {
        shared: true
    },
    xAxis: {
        crosshair: {
            color: '#F70000'
        }
    },
    series: [{
        data: [{
            x: 0.0,
            y: 1
        }, {
            x: 1.0,
            y: 2
        }, {
            x: 2.0,
            y: 3
        }, {
            x: 3.0,
            y: 2
        }, {
            x: 4.0,
            y: 1
        }]
    }, {
        data: [{
            x: 0.2,
            y: 0
        }, {
            x: 1.2,
            y: 1
        }, {
            x: 2.2,
            y: 1
        }, {
            x: 3.2,
            y: 1
        }, {
            x: 4.2,
            y: 2
        }]
    }, {
        data: [{
            x: 0.2,
            y: 5
        }, {
            x: 1.2,
            y: 9
        }, {
            x: 2.2,
            y: 4
        }, {
            x: 3.2,
            y: 5
        }, {
            x: 4.2,
            y: 3
        }]
    }]
});

#container {
    min-width: 300px;
    max-width: 800px;
    height: 300px;
    margin: 1em auto;
}

<script src="http://code.jquery.com/jquery-git.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>

Answer 4

If you want to show visible series' in the tooltip only, change

    // This one already exist
    if (series == point.series) return;

to

    // This one already exist
    if (series == point.series || series.visible==false) return;

Thanks for you solution!!!