That’s not too hard. Highcharts has a very rich object that you can manipulate. I upgraded 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 tags div
usually do not receive them. For this I added the attribute tabindex="-1"
. Then it was just to monitor the event keydown
and change the ends of the x-axis to each right or left 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();
.