large data zoom pan with ChartJS

by Fairlight

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/jquery-ui-css/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
large dataset test
<div class="chart" style="width:100%">
        <canvas id="myChartA" class="myChart"></canvas>
        </div>

JavaScript

var urlParam = location.search.substring(1);

        /*  var paramItem = urlParam.split('=');
                 
         console.log(paramItem[1]);
         
                
                 var size= paramItem[1];
          */
           var leftEnd;
                 var rightEnd;
        function updateChart() {
            myChartA.options.scales.xAxes[0].time.min = leftEnd;
            myChartA.options.scales.xAxes[0].time.max = rightEnd;
        }

        var ctxA = document.getElementById("myChartA").getContext("2d");

        let labels = [];
        let data1 = [];
        for (let i = 0; i < 10000; i++) {
            labels.push(moment(1369543600 + i * 1000000).toDate());
            //data1.push(Math.floor(Math.random() * 100));
            data1.push(10*Math.sin(0.1*i));
        }

        var myChartA = new Chart(ctxA, {
            type: 'line',
            data: {
                labels: labels,
                
                datasets: [{
                    label: 'My First dataset',
                    borderColor: 'rgb(255, 99, 132)',
                    data: data1,
                    pointRadius:1,
                    lineTension: 0,
                    borderWidth:1,
                    fill: false
                }]
            },
            options: {
                // animation: false,
                 animation: {
                    duration: 0 // general animation time
                },
                hover: {
                    animationDuration: 0 // duration of animations when hovering an item
                },
                downsample: {
                    enabled: true,
                    threshold: 50 // max number of points to display per dataset
                },
                responsiveAnimationDuration: 0, // animation duration after a resize
                autoSkipPadding:100,
                scales: {
                    xAxes: [{
                        type: 'time',
                        time: {
      ...