Skip to main content

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

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?

Getting Help​

Need help? Ask your question on Slack or Stack Overflow.

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