React-chartjs-2 cannot register plugin

Question

im trying to implement zoom plugin in my react app chart

red in the docs to register the chart tp the plugin but i am getting this error and no matter what i tried, even copied line by line other peopples git files.

PLEASE help =]

i am getting the chartData as a prop to the componant after fetching and formating data from an api.

// trying to register plugin:

import React from "react";
import { Line} from "react-chartjs-2";
import { Chart as chartjs } from "chart.js/auto";
import zoomPlugin from "chartjs-plugin-zoom";

chartjs.register(zoomPlugin)

// rendering:

render() {
   const { chartData, options, legend } = this.state;
   return (
     <section>
        <Line data={chartData}  options={options} />
      </section>
    );
  }

//on upload the data comes from dummy data than updates when async data is ready so app wont crash:

      componentDidMount() {
    this.setState({ chartData: this.props.chartData });
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevProps.chartData !== this.props.chartData) {
      this.setState({ chartData: this.props.chartData });
    }
  }

// options as stated from docs for zoom plugin

    options: {
      responsive: true,
      elements: {
        point: {
          radius: 0,
        },
      },
      plugins: {
        legend:{
          display:false
        },
        zoom: {
          zoom: {
            wheel: {
              enabled: true,
            },
            pinch: {
              enabled: true,
            },
            mode: "xy",
          },
        },
      },
    },

ERROR:

Compiled with problems:X

ERROR in ./src/cmps/LineChart.jsx 9:0-16

export 'Chart' (imported as 'chartjs') was not found in 'chart.js/auto' (possible exports: default)

I HAVE TRIED INSTALLING DIFFERENT VERSIONS OF CHART.JS PRE AND AFTER INSTALLING REACT-JS

I HAVE TRIED TO IMPORT Chart NOT AS chartjs (it crashes even before trying to register)

so i left with nothing but beg the gods of code for help

Answer 1

You are trying to import chartjs as treeshaking while importing from the auto package, this does not work. Changing your import and register to this will solve the issue:

import React from "react";
import { Line } from "react-chartjs-2";
import Chart from "chart.js/auto";
import zoomPlugin from "chartjs-plugin-zoom";

Chart.register(zoomPlugin)