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

NPM version Downloads Build status Coverage status Bundle size

Quickstart​

Install this library with peer dependencies:

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{ChartasChartJS,ArcElement,Tooltip,Legend}from"chart.js";
import{Doughnut}from"react-chartjs-2";

ChartJS.register(ArcElement,Tooltip,Legend);

<Doughnutdata={...}/>

To learn more about importing and registering elements see tree-shaking.

Examples​

Please see live examples.

Getting Help​

Need help? Ask your question on Stack Overflow.

If you've encountered an issue, please file it on GitHub.