Make the tooltip in StockCharts behave the same as in HighCharts

Question

How do I get the StockChart tooltip to behave the same as in HighCharts?

If you look at the fiddle, in the Stock Chart, the cursor move to the mouse location where as in the “Chart” instance, the tooltip snaps to the nearest point.

Here is the fiddle:

http://jsfiddle.net/gn393/

$(function () {
    var chart = new Highcharts.StockChart({
        chart: {
            renderTo: 'container1'
        },

        tooltip: {
            positioner: function (w,h,p) {
                return { x: p.plotX + chart.plotLeft, y: p.plotY + chart.plotTop };
            }
        },

        series: [{type:"area",
            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]        
        }, {
            data: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4]        
        }]
    });
});

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container2'
        },

        tooltip: {
            positioner: function (w,h,p) {
                return { x: p.plotX + chart.plotLeft, y: p.plotY + chart.plotTop };
            }
        },

        series: [{type:"area",
            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]        
        }, {
            data: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4]        
        }]
    });
});

I need the tooltip to snap to the nearest point on the StockChart.

Answer 1

This is how shared tooltip works in Highcharts. You need to disable it ( shared: false ), to get desired result, take a look: http://jsfiddle.net/gn393/1/