react-chartjs-2 error (Showing white screen)

Question

I am getting this error while trying to add chart using react-chartjs-2.

Error Log

This is my code:

import { Doughnut } from 'react-chartjs-2';

const data = {
  labels: ['Red', 'Blue', 'Yellow'],
  datasets: [
    {
      data: [12, 15, 5],
    },
  ],
};
function App() {
  return (
    <>
      <Doughnut data={data} />
    </>
  );
}

export default App;

This is the version of chart.js and react-chartjs-2

"chart.js": "^3.8.0",

"react": "^18.1.0",

"react-chartjs-2": "^4.1.0"

Answer 1

try to import this and register them

import {
  ArcElement,
  Chart as ChartJS,
  Legend as ChartjsLegend,
  Tooltip,
  TooltipItem,
  TooltipModel,
} from 'chart.js';

ChartJS.register(ArcElement, Tooltip,ChartjsLegend);