chartjs-plugin-zoom/docs/guide/usage-example.js at 97285c8199acc7cd8a270327999a15acb830a7c4 · chartjs/chartjs-plugin-zoom · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/* playground-hide */
import Chart from './register.js';
/* playground-hide-end */
const ctx = document.querySelector('canvas');

const chart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'My First Dataset',
      data: [65, 59, 80, 81, 56, 55, 40],
      fill: false,
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1
    }]
  },
  options: {
    plugins: {
      zoom: {
        zoom: {
          wheel: {
            enabled: true,
          },
          pinch: {
            enabled: true,
          },
          mode: 'xy',
        }
      }
    }
  }
});

const btnResetZoom = document.createElement('button');
btnResetZoom.textContent = 'Reset zoom';
document.body.append(btnResetZoom);
btnResetZoom.addEventListener('click', () => {
  chart.resetZoom();
})