[Chartjs]-React-chartjs-2 with chartJs 3: Error "arc" is not a registered element

I ran into the same issue earlier, found the solution on react-chartjs-2 documentation page: https://react-chartjs-2.netlify.app/docs/migration-to-v4#tree-shaking

import 'chart.js/auto';
import { Chart } from 'react-chartjs-2';

<Chart type='line' data={chartData} />

All you have to do is to add this line import 'chart.js/auto';

In my case this worked:

import React from "react";
import { ArcElement } from "chart.js";
import Chart from "chart.js/auto";

import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
import { Pie } from 'react-chartjs-2';

ChartJS.register(ArcElement, Tooltip, Legend);

You can simply use this. worked for me,

    {import { Doughnut, Pie } from "react-chartjs-2";
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";

ChartJS.register(ArcElement, Tooltip, Legend);}

and for changing the height and width values

{<Pie
   data={data}
   width={300}
   height={300}
   options={{ maintainAspectRatio: false }}
/>}

In react, I also faced the same issue with doughnut charts.npm i react-chartjs-2 chart.js Documentation says to install this in frontend frameworks; I was using React.

import {Chart,ArcElement} from 'chart.js';
import {Doughnut} from 'react-chartjs-2'


    Chart.register(ArcElement)
    
    const data = {
    };
    
    function Graph() {
      return (
       <div></div>
      )
    }
    
    export default Graph

after importing ArcElement from chart.js and Chart.register(ArcElement) fixed my issue

In my case this is what worked for me : I imported chart & registrables & ArcElement in one import

import { Chart, registerables, ArcElement } from "chart.js";
Chart.register(...registerables);
Chart.register(ArcElement);

from the react-chartjs-2 docs :
As you can see in migration to v4 guide:

v4 of this library, just like Chart.js v3, is tree-shakable. It means that you need to import and register the controllers, elements, scales, and plugins you want to use.

For a list of all the available items to import, see Chart.js docs.

So you should register missed components. For example, if you have Uncaught Error: "arc" is not a registered element. error, you should register ArcElement:

import { ArcElement } from "chart.js";

ChartJS.register(ArcElement);

[my app displayed on browser][1]


  [1]: https://i.stack.imgur.com/i4Owk.jpg
My app compiled without errors but my chart(Doghnut) is not been displayed on the browser.

here is my details component where i imported and used it 

import React from 'react';
import { Card, CardHeader, CardContent, Typography } from '@material-ui/core';
import {Chart, ArcElement} from 'chart.js';
import { Doughnut } from 'react-chartjs-2';

import useStyles from './styles';
import useTransactions from '../../useTransactions';
Chart.register(ArcElement)
const Details = ({ title, subheader }) => {
  const { total, chartData } = useTransactions(title);
  const classes = useStyles();

  return (
    <Card className={title === 'Income' ? classes.income : classes.expense}>
      <CardHeader title={title} subheader={subheader} />
      <CardContent>
        <Typography variant="h5">${total}</Typography>
        <Doughnut data={chartData} />
      </CardContent>
    </Card>
  );
};

export default Details;




here also is my package.json file
{
  "name": "tracker",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.12.4",
    "@material-ui/icons": "^4.11.3",
    "@material-ui/lab": "^4.0.0-alpha.61",
    "@speechly/react-client": "^2.2.3",
    "@speechly/react-ui": "^2.7.5",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "chart.js": "^4.3.0",
    "react": "^16.12.0",
    "react-chartjs-2": "^5.2.0",
    "react-dom": "^16.12.0",
    "react-scripts": "5.0.1",
    "uuid": "^9.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}


my app.js file where i imported my details component above
import React, { useEffect, useRef } from 'react';
import { Grid } from '@material-ui/core';

import { SpeechState, useSpeechContext } from "@speechly/react-client";
import { PushToTalkButton, PushToTalkButtonContainer } from '@speechly/react-ui';

import  Details from './components/Details/Details';
import  Main from './components/Main/Main';

import useStyles from './styles';

const App = () => {
  const classes = useStyles();
  const { speechState } = useSpeechContext();
  const main = useRef(null);

  const executeScroll = () => main.current.scrollIntoView() ;   

  useEffect(() => {
    if (speechState === SpeechState.Recording) {
      executeScroll();
    }
  }, [speechState]);

  return (
    <div>
      <Grid className={classes.grid} container spacing={0} alignItems="center" justifyContent ="center" style={{ height: '100vh'}}>
        <Grid item xs={12} sm={4} className={classes.mobile}>
          <Details title="Income" />
        </Grid>
        <Grid ref={main} item xs={12} sm={3} className={classes.main}>
          <Main />
        </Grid>
        <Grid item xs={12} sm={4} className={classes.desktop}>
          <Details title="Income" />
        </Grid>
        <Grid item xs={12} sm={4} className={classes.last}>
          <Details title="Expense" />
        </Grid>
        <PushToTalkButtonContainer>
          <PushToTalkButton />   
        </PushToTalkButtonContainer>
      </Grid>
    </div>
  );
};

export default App;




 I do not know where the problem is coming from

here is my index.js file
import React from 'react';
import  ReactDOM  from 'react-dom';
import {SpeechProvider} from '@speechly/react-client';

import { Provider } from "./context/context";

import App from './App';
import './index.css';

    ReactDOM.render(
        <SpeechProvider appid='60b621bc-87ac-41e5-b500-0b7a66f96317' language='en-US'>
            <Provider>
              <App/>
            </Provider>
        </SpeechProvider>,
        
 

document.getElementById (‘root’)
);