How do I move a chart using Highcharts?
Instead of moving with the mouse to the right and left, I would like to use the directional keys (right arrow, left, up, and down).
This example uses the mouse to move; I need to do with the keys. Could someone help me?
This is not very difficult. Highcharts has a very rich object that you can manipulate. I updated your fiddle with a solution to move sideways with the keyboard .
The key to the solution was to first ensure that the container receives keyboard events because div tags do not normally receive them. For this I added the tabindex="-1" attribute. Then just monitor the keydown event and change the ends of the X axis to each left or right arrow key:
$('#container')
.on('keydown', function(event){
var deltaX, hc, extr;
if(event.which === 37 || event.which === 39) {
deltaX = 1000000000; //ajuste esse tamanho a seu gosto
if (event.which === 37) deltaX = -deltaX; // p/ esquerda
hc = $('#container').highcharts();
extr = hc.xAxis[0].getExtremes();
hc.xAxis[0].setExtremes(extr.min + deltaX, extr.max + deltaX);
}
})
I also put the container in focus right at the beginning, with $('#container').focus(); .