Chartjs-plugin-zoom Not Working With My React Project

I have a react component using the 'react-chartjs-2' library to show some data. The chart with the data works fine. What I cannot do is make the chart work with the 'chartjs-plugin

Solution 1:

2 things, you will have to register the zoomplugin as stated in the documentation by registering it either globally or inline (https://www.chartjs.org/chartjs-plugin-zoom/guide/integration.html#bundlers-webpack-rollup-etc), also your config was incorrect, the zoom option does not have an enabled option, you will have to enable all the different zoom types appart, then it will work (https://www.chartjs.org/chartjs-plugin-zoom/guide/options.html#zoom-options)

import { Line, Chart } from"react-chartjs-2";
importReactfrom"react";
import zoomPlugin from"chartjs-plugin-zoom";

Chart.register(zoomPlugin); // REGISTER PLUGINconstChart2 = (props) => {
  const data = {
    title: props.title,
    labels: props.labels,
    datasets: props.datasets
  };

  const options = {
    maintainAspectRatio: false,
    responsive: true,
    elements: {
      point: {
        radius: 0
      },
      line: {
        borderWidth: 1.5
      }
    },
    scales: {
      x: {
        ticks: {
          color: "rgba( 0, 0, 1)"
        },
        grid: {
          color: "rgba(0, 0, 0, 1)"
        }
      },
      y: {
        min: 1,
        max: 200000,
        type: "logarithmic",
        ticks: {
          color: "rgba(0, 0, 0, 1)"
        },
        grid: {
          color: "rgba(0, 0, 0, 1)"
        }
      }
    },
    plugins: {
      zoom: {
        zoom: {
          wheel: {
            enabled: true// SET SCROOL ZOOM TO TRUE
          },
          mode: "xy",
          speed: 100
        },
        pan: {
          enabled: true,
          mode: "xy",
          speed: 100
        }
      }
    }
  };

  return (
    <div><Linetype="line"data={data}options={options}width={900}height={450}
      /></div>
  );
};

exportdefaultChart2;

Codesandbox link: https://codesandbox.io/s/react-chart-js-forked-cn6wh?file=/src/components/Chart.js