CODEWITHSUNDEEP
javascripthighcharts
anber
anber

Reputation: 874

Make the tooltip in StockCharts behave the same as in HighCharts

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.

Upvotes: 1

Views: 654

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

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/

Upvotes: 2

Related Questions