JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    $("#container").highcharts({
        chart: {
            type: 'column'
        },
        xAxis: {
            categories: ['one', 'two', 'three', 'four', 'five', 'six'],
            min: 1,
            max: 3
        },
        series: [{
            name: 'red',
            data: [1,1,22,4,2,5]
        }]
    });
    
    var chart = $("#container").highcharts();
    
    $(document).keydown(function(e) {
        switch(e.which) {
            case 37: // left
                chart.xAxis[0].setExtremes(chart.xAxis[0].min-1, chart.xAxis[0].max-1);
            break;
    
            case 39: // right
                chart.xAxis[0].setExtremes(chart.xAxis[0].min+1, chart.xAxis[0].max+1);
            break;
    
            default: return; // exit this handler for other keys
        }
        e.preventDefault(); // prevent the default action (scroll / move caret)
    });
});