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 …

List of react-chartjs-2 usage examples.

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

pnpm add chart.js@^2.9.4 react-chartjs-2@^2.11.2 npm install --save chart.js@^2.9.4 react-chartjs-2@^2.11.2

List of react-chartjs-2 components.

import { Chart as ChartJS, defaults } from 'chart.js'; import { Chart } from 'react-chartjs-2';

How to access the Chart.js instance? How to access the canvas context? Why this library has "2" in its name? Why is a background fill not working? How to fix "... is not a registered element" …

Example of line chart in react-chartjs-2.

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], }, ], }} />

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