Isso não é muito difícil. O Highcharts tem um objeto muito rico que você pode manipular. Eu atualizei seu fiddle com uma solução para mover para os lados com o teclado.
A chave da solução foi primeiramente garantir que o container receba os eventos de teclado pois tags div
normalmente não os recebem. Para isso adicionei o atributo tabindex="-1"
. Depois foi só monitorar o evento keydown
e mudar os extremos do eixo X a cada tecla de seta para a direita ou para a esquerda:
$('#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);
}
})
Também coloquei o container em foco logo ao início, com $('#container').focus();
.