Highcharts tooltip with Keyboard

In Highcharts make tooltip of a specific point always visible and dynamically when it will change its point ?

change the position of tooltip to next point/previous point using keyboard arrow key left and right how can in do it using jquery Answer:- This is possible by using the document.onkeydown method. You have to get the key press code for the arrow keys: 37 = left 39 = right Then you have to know what data point you are already on. I did this with a scoped variable that contains the point index we are trying to get with a starter value (p). I then changed the naming of the point’s options to ttPoint and passed that to the this.tooltip.refresh(); method. The code to capture the key press uses onkeydown. This is document wide. I get the current chart options and the maximum index of the data point such that we do not try to change the tooltip location to a point that does not exist. document.onkeydown = function (e) { var theChart = $('#container').highcharts(); var maxP = theChart.series[0].points.length; console.log(p); switch (e.keyCode) { case 37: console.log('left'); if (p == 0) { p = p; } else { p = p - 1; } theChart.tooltip.refresh(theChart.series[0].points[p]); break; case 38: console.log('up'); break; case 39: console.log('right'); if (p == maxP) { p = p; } else { p = p + 1; } theChart.tooltip.refresh(theChart.series[0].points[p]); break; case 40: console.log('down'); break; } }; I left the up/down codes in there as well if you need them to change the series you are looking at. Sample jsFiddle.

One thought on “In Highcharts make tooltip of a specific point always visible and dynamically when it will change its point ?

Leave a Reply

Your email address will not be published.Required fields are marked *