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

yarn add chart.js react-chartjs-2

pnpm

pnpm add chart.js react-chartjs-2

npm

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.

Need an API to fetch data?

Please consider Cube, an open-source API for data apps.

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.