Highcharts - show only a hint when moving the cursor directly to a point

Question

By default, for high-performance charts, by default it seems that the closest point to your cursor (horizontally) is in a hang state. This means that a tooltip is triggered when you get more than half the way to the next point on the line. I want to have a tooltip when I’m directly above a point, and then I remain active until I’m directly above another point.

Here is the problem scenario with the corresponding code below:

http://jsfiddle.net/qNLu2/

$(function () { $('#container').highcharts({ chart: { }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, 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] }, { data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2] }] }); 

});

Answer 1

This is due to pointTracker, which is used by the line chart, but you can use the scatter series and set the lineWidth:

http://jsfiddle.net/qNLu2/1/

  chart: { type: 'scatter' }, series: [{ lineWidth:2, 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] }] 

Answer 2

Using HighCharts options, you can set the following to achieve the desired effect:

 plotOptions: { series: { stickyTracking: false } }, tooltip: { snap: 0 } 

This will cause the tooltip to fire only when the mouse is directly above the point and off when the mouse leaves the point. The only problem is that the fade animation (i.e. Binding: 0) takes some time, but you should be able to change the animation time. I haven't found it yet.