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 () {
    var categories = ['one', 'two', 'three', 'four', 'five', 'six'];
    var span = 3;
    
    $("#container").highcharts({
        chart: {
            type: 'column'
        },
        xAxis: {
            categories: categories,
            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(Math.max(0, chart.xAxis[0].min-1), Math.max(0+span-1, chart.xAxis[0].max-1));
            break;
    
            case 39: // right
                chart.xAxis[0].setExtremes(Math.min(categories.length - 1 - span + 1, chart.xAxis[0].min+1), Math.min(categories.length - 1, chart.xAxis[0].max+1));
            break;
    
            default: return; // exit this handler for other keys
        }
        e.preventDefault(); // prevent the default action (scroll / move caret)
    });
});