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:

List of react-chartjs-2 usage examples.

Also, please consider upgrading your app to Chart.js v4. Upgrading to Chart.js v4 First, upgrade packages. You'll need to install Chart.js v3 and the latest version of this library:

Tree-shaking v4 of this library, just like Chart.js v3, is tree-shakable. It means that you need to import and register the controllers, elements, scales, and plugins you want to use. For a list of all the …

Chart Usage import { Chart } from 'react-chartjs-2'; <Chart type={...} options={...} data={...} {...props} />

List of react-chartjs-2 components.

import { Line } from 'react-chartjs-2'; <Line datasetIdKey='id' data={{ labels: ['Jun', 'Jul', 'Aug'], datasets: [ { id: 1, label: '', data: [5, 6, 7], }, { id: 2, label: '', data: [3, 2, 1], }, ], }} />

Example of line chart in react-chartjs-2.

How to use react-chartjs-2 with TypeScript? TypeScript has extremely robust type inference capabilities and most of the time we can enjoy type safety and autocompletion without having to do any extra work.

Example of stacked bar chart in react-chartjs-2.