react-chartjs-2
React components for Chart.js, the most popular charting library.
Supports Chart.js v4 (read below) and Chart.js v3 (see this guide).
Quickstart
Install this library with peer dependencies:
- yarn
- pnpm
- npm
yarn add chart.js react-chartjs-2
pnpm add chart.js react-chartjs-2
npm install --save chart.js react-chartjs-2
Then, import and use individual components:
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
import { Doughnut } from "react-chartjs-2";
ChartJS.register(ArcElement, Tooltip, Legend);
<Doughnut data={...} />
To learn more about importing and registering elements see tree-shaking.
Examples
Please see live examples.
Need a guide?
Please check "Chart.js Example with Dynamic Dataset".
Getting Help
Need help? Ask your question on Stack Overflow.
If you've encountered an issue, please file it on GitHub.