0

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"

  • Please do not share screen shots of errors. Instead copy and paste them here – Ethan Jun 04 '22 at 03:21
  • 3
    Does this answer your question? [react-chartjs-2 with chartJs 3: Error "arc" is not a registered element](https://stackoverflow.com/questions/70098392/react-chartjs-2-with-chartjs-3-error-arc-is-not-a-registered-element) – LeeLenalee Jun 04 '22 at 06:35

1 Answers1

0

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);