score:25

Accepted answer

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

score:0

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

score:0 

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

ChartJS.register(ArcElement, Tooltip, Legend);

score:2

In my case this worked:

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

score:6

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


Related Query

More Query from same tag