onZoom not triggered when zooming

Question

I have made a line chart using react-chartjs-2 with a plugin called chartjs-plugin-zoom. I want to display the zoom level in console when zooming the chart. However, the onZoom seems not being triggered or called when zooming as I can't see any updates in the console panel. Would like to ask whether my syntax for onZoom is wrong and how can I fix that?

online example

https://codesandbox.io/s/musing-frost-m6fuz?file=/src/App.js

Answer 1

This is because you putted the onZoom callback in the wrong place in the options object. You putted it at the root of the zoom plugin config while it has to be configured in the zoom part so in this namespace: options.plugins.zoom.zoom.onZoom

https://codesandbox.io/s/happy-forest-9mtii?file=/src/App.js

Answer 2

You have placed the onZoom in the wrong nested object. If u place the onZoom function inside the plugins-zoom-zoom object it will work.

https://codesandbox.io/s/lively-river-zry93?file=/src/App.js:3038-3538

plugins: {
              zoom: {
                zoom: {
                  wheel: {
                    enabled: true
                  },
                  mode: "x",
                  onZoom: function ({ chart }) {
                    console.log(`I'm zooming!!!`);
                  },
                  // Function called once zooming is completed
                  onZoomComplete: function ({ chart }) {
                    console.log(`I was zoomed!!!`);
                  }
                },
}