react-chartjs-2 with chartJs 3: Error "arc" is not a registered element

user_12065403 0
Viewed 14989

I am working on a React app where i want to display charts. I tried to use react-chartjs-2 but i can't find a way to make it work. when i try to use Pie component, I get the error: Error: "arc" is not a registered element.

I did a very simple react app:

  • npx create-react-app my-app
  • npm install --save react-chartjs-2 chart.js

Here is my package.json:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "chart.js": "^3.6.0",
    "cra-template": "1.1.2",
    "react": "^17.0.2",
    "react-chartjs-2": "^4.0.0",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

And here is my App.js file:

import React from 'react'
import { Pie } from 'react-chartjs-2'

const BarChart = () => {
  return (
    <Pie
      data={{
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [
          {
            label: '# of votes',
            data: [12, 19, 3, 5, 2, 3],
          },
        ],
      }}
      height={400}
      width={600}
    />
  )
}

const App = () => {
  return (
    <div>
      <BarChart />
    </div>
  )
}

export default App

I also tried to follow this toturial: https://www.youtube.com/watch?v=c_9c5zkfQ3Y&ab_channel=WornOffKeys

He uses an older version of charJs and react-chartjs-2. And when i replace my versions of react-chartjs-2 and chartjs it works on my app.

"chart.js": "^2.9.4",
"react-chartjs-2": "^2.10.0",

Do anyone one know how to solve the error i have (without having to keep old versions of chartJs and react-chartjs-2) ?

react-chartjs-2 chart.js reactjs
8 Answers

Chart.js is treeshakable since chart.js V3 so you will need to import and register all elements you are using.

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

For all available imports and ways of registering the components you can read the normal chart.js documentation

user_86829830
user_113873120

In my case this worked:

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

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

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 }}
/>}
user_154380600

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

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

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

user_152066620
Related