chartjs plugin zoom reset function not work in React js

[raselmahmud-coder]

I want to add a reset button with my Chart component when it will zoom out user can click on the button and then reset the Chart but

I couldn't find any example of how to do that.

Could you please help me with how to do zoom and pen reset?

Here is my code please check it. I got it in the vanilla JavaScript Link-here example but I need it in react.

thanks in advance import { Bar, Line } from "react-chartjs-2"; import { LineData } from "./LineData"; import { Chart, Legend, Title, Tooltip} from "chart.js"; import zoomPlugin from 'chartjs-plugin-zoom'; import { resetZoom } from "chartjs-plugin-zoom"; Chart.register(zoomPlugin);

Chart.register( Title, Tooltip, Legend ); export function MultiType() {

const data = LineData();//datasets exports from another component const scales = { x: { type: 'category', min: 50, max: 100, }, y: { type: 'linear' }, }; const options = { scales: scales, plugins: { zoom: { animation: { duration: 1000, easing: 'easeOutCubic' }, pan: { enabled: true, mode: 'xy', threshold: 155, }, zoom: { wheel: { enabled: true }, pinch: { enabled: true }, mode: 'xy', }, } }, }

const handleReset = () => { resetZoom(Chart.register( Title, Tooltip, Legend ),'reset') }

return ( <>

Reset

</>

); }

[stockiNail]

Maybe you can have a look to this sample: codesandbox.io/s/zealous-currying-0zgyzq?file=/App.tsx

[raselmahmud-coder]

thank you