Setting up Zoom with react-chartjs-2

[miguelperes]

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! :)

[CaioMM]

Hi, i'm a newbie with js and i'm trying to use the zoom and pan functions in one graph, but only zoom works, can you show me your code or tell me how do i import it like you did ?

ps: i don't speak very well English

[junbinku]

Does anyone know do I implement an onClick button to reset the zoom back to default?

[absrivastava]

@junbinku I think you are looking for this.
https://stackoverflow.com/questions/44551904/add-zoom-event-handler-to-charts-for-chartjs-with-chartjs-plugin-zoom

[kashifsulaiman]

@miguelperes can you tell me how did you configured hammerjs?

[junbinku]

@kashifsulaiman import Hammer from 'hammerjs';

[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} />

[dopry]

or if you're using hooks

function Chart() {
    const chartRef = useRef(null)
    const resetZoom = () => {
       chartRef.current.chartInstance.resetZoom()
    }
    return (
       <Button onClick={resetZoom} />
       <Line ref={chartRef} data={{ ... }} options={{ ... }} />
    )
}

[Tom687]

@dopry I had to use chartRef.current.resetZoom() for it to work. Do you know why I don't have chartInstance in chartRef.current ? Is it a new version thing ? Thanks