Setting up Zoom with react-chartjs-2

What is the proper way to setup zoom plugin with react-chartjs-2? Is it compatible?

I just ran npm install chartjs-plugin-zoom which installed the plugin and its hammerjs dependency and started configuring my chart options:

pan: {
  enabled: true,
  mode: 'x'
},
zoom: {
  enabled: true,
  mode: 'xy'
},

However this is not working. Am I skipping any step? I searched for react-chartjs-2 specific issues but found nothing. Thanks!

[miguelperes]

Solved: I don’t know if this is the proper way to do this, but I just imported the plugin in my chart component file:

import * as zoom from 'chartjs-plugin-zoom'

and the pan and zoom options started working. If there is no better approach, I think the issue can be closed! 😃

[jcrombez]

it has been a few years but if someone else want to do a reset button when using react (like @junbinku was asking) :

in your render you need to get the component reference, for example with a <Line> :

<button onClick={() => this.lineReference.chartInstance.handleZoomReset() }>Reset zoom</button>
<Line (here your data, options and so on)  ref={(reference) => this.lineReference = reference} />