Chartjs-How to zoom Y axis on time series or X-Y chartjs graph

by

1👍

✅

Answered my own question eventually. Basically, the example at https://codepen.io/anon/pen/PGabEK (linked from https://npmjs.com/package/chartjs-plugin-zoom) can be re-done as a time series.

Example HTML below.

var ctx = document.getElementById("myChart");

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [
            {
                data: [
                    { t: '2018-03-29 08:48', y: 20.2 }, 
                    { t: '2018-03-29 16:24', y: 23.1 }, 
                    { t: '2018-04-09 18:24', y: 20.7 }, 
                    { t: '2018-04-10 02:10', y: 24.2 }, 
                    { t: '2018-04-10 09:16', y: 24.2 }
                ],
                type: 'line', 
                radius: 1, 
                hitRadius: 3, 
                fill: false, 
                backgroundColor: 'black', 
                borderWidth: 2, 
                label: 'Some label'
            },
            {
                data: [
                    { t: '2018-03-29 08:48', y: 22.5 }, 
                    { t: '2018-03-29 16:24', y: 22.3 }, 
                    { t: '2018-03-30 00:00', y: 21.5 }, 
                    { t: '2018-03-30 07:36', y: 21.5 }, 
                    { t: '2018-03-30 15:12', y: 21.5 }
                ],
                type: 'line', 
                radius: 1,
                hitRadius: 3, 
                fill: false, 
                backgroundColor: 'black', 
                borderWidth: 2, 
                label: 'Another label'
            }
        ]
    },
    options: {
        pan: {
            enabled: true,
            mode: 'xy'
        },
        zoom: {
            enabled: true,
            mode: 'xy'
        }
    }
});
<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.7.3/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/0.6.6/chartjs-plugin-zoom.min.js"></script>

<div id="chartDiv">
  <canvas class="my-4 chartjs-render-monitor" id="myChart" style="display:block;"></canvas>
</div>

Leave a comment