PanZoom2

by Fairlight

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

    <div class="chart" style="width:100%">
        <canvas id="myChartA" class="myChart"></canvas>
    </div>

CSS

.chart {
            display: float;
            width: 100%;
        }

JavaScript

var leftEnd;
        var rightEnd;



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

        let data_A1 = [
            {
                x: "2019-01-01 00:01:38",
                y: "13.0"
            },
            {
                x: "2019-01-01 01:01:39",
                y: "11.0"
            },
            {
                x: "2019-01-01 02:01:40",
                y: "16.0"
            },
            {
                x: "2019-01-01 03:01:41",
                y: "15.0"
            },
            {
                x: "2019-01-01 04:01:42",
                y: "14.0"
            },
            {
                x: "2019-01-01 05:01:38",
                y: "12.0"
            },
            {
                x: "2019-01-01 06:01:39",
                y: "11.0"
            },
            {
                x: "2019-01-01 07:01:40",
                y: "13.0"
            },
            {
                x: "2019-01-01 08:01:41",
                y: "14.0"
            },
            {
                x: "2019-01-01 09:01:42",
                y: "16.0"
            }
        ];

        var myChartA = new Chart(ctxA, {
            type: 'line',
            data: {
                datasets: [
                    {
                        label: '1st Data',
                        data: data_A1,
                        borderColor: '#0f0',
                        showLine: true
                    }

                ]
            },
            options: {
                animation: false,
                scales: {
                    xAxes: [{
                        type: 'time',
                        time: {
                            displayFormat: 'h:mm',
                        },
                        min: leftEnd,
                        max: rightEnd

                    }]
                },
                plugins: {
                    zoom: {
                        pan: {
                            enabled: true,
            ...