panzoom

by Fairlight

HTML

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<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://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/0.6.6/chartjs-plugin-zoom.js"></script>


    <div class="grapharea">
        <!-- <div class="chart"> -->
            <canvas id="myChartA" class="myChart"></canvas>
        <!-- </div> -->
    </div>

CSS

.grapharea {

            width: auto;
            height: auto;
            display: inline-block;
            vertical-align: top;
            margin-bottom: 3px;
            padding: 2px;
            box-sizing: border-box;
        }

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

        .myChart {
            width: 100%;
        }

JavaScript

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: "15.0"
    },
    {
        x: "2019-01-01 06:01:39",
        y: "13.0"
    },
    {
        x: "2019-01-01 07:01:40",
        y: "18.0"
    },
    {
        x: "2019-01-01 08:01:41",
        y: "19.0"
    },
    {
        x: "2019-01-01 09:01:42",
        y: "14.0"
    }
];


var myChartA = new Chart(ctxA, {
    type: 'line',
    data: {
        datasets: [
            {
                label: '1st Data',
                data: data_A1,
                borderColor: '#0f0',
                showLine: true
            }
        ]
    },
    options: {
        scales: {
            xAxes: [{
                type: 'time',
                time: {
                    displayFormat: 'h:mm',
                }
            }]
        },
        responsive: true,
        maintainAspectRatio: false,
        legend: {
            display: false
        },
        plugins: {
          zoom: {
            pan: {
              enabled: true,
              mode: 'xy',
            },
            zoom: {
              enabled: true,
              drag: true,
              mode: 'xy',
            }
          }
        } 
     }
});