Chartjs-How use charts-js-zoom plugin in PHP

by

0👍

This is because you putted the configuration for the zoom plugin in the wrong space.
The options need to be configured in the options.plugins.zoom namespace while you placed them in the options.scales.plugins.zoom namespace.

Changing your options object to this will resolve the issue:

options: {
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: true
      }
    }]
  },
  plugins: {
    zoom: {
      pan: {
        enabled: true,
        mode: 'xy'
      },
      zoom: {
        enabled: true,
        mode: 'xy'
      }
    },
  }
}

The zoom plugin also uses hammer.js for reconizing gestures. So for mobile use you might need to also import the hammer.js library

<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>

And as a last part, your scale config is wrong, you are using V3 syntax while using V2, I have updated that for you too

Leave a comment