react-chartjs-2

To use a component, you must first import the necessary elements from chart.js and register them using ChartJS.register(). Then, import the specific chart component from react-chartjs-2 and pass the required data prop.

import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
import { Doughnut } from "react-chartjs-2";

ChartJS.register(ArcElement, Tooltip, Legend);

<Doughnut data={...} />

The Chart component is the primary interface for rendering charts in react-chartjs-2. It requires type, options, and data props to function. It also accepts all standard HTML <canvas> attributes.

import { Chart } from 'react-chartjs-2';

<Chart
  type={...}
  options={...}
  data={...}
  {...props}
/>

To render a doughnut chart, import the Doughnut component from react-chartjs-2. You must provide a data object and can optionally provide an options object to customize the chart's behavior and appearance. The component also accepts all standard HTML <canvas> props.

import { Doughnut } from 'react-chartjs-2';

<Doughnut
  options={...}
  data={...}
  {...props}
/>

After installation, import specific chart components (e.g., Doughnut, Bar, Line) from react-chartjs-2 and pass your chart data to the data prop.

import { Doughnut } from 'react-chartjs-2';

<Doughnut data={...} />

The Bar component is used to render bar charts. It requires a data object and an options object to define the chart's content and behavior. It also accepts all standard HTML <canvas> props.

import { Bar } from 'react-chartjs-2';

<Bar
  options={...}
  data={...}
  {...props}
/>

To build and push the website to the gh-pages branch on GitHub, use the pnpm deploy command. You must provide your GitHub username via the GIT_USER environment variable. If using SSH, set USE_SSH=true.

$ GIT_USER=<Your GitHub username> USE_SSH=true pnpm deploy

The PolarArea component is used to render a Polar Area chart. It requires data and options props, and accepts all standard React props for a <canvas> element.

import { PolarArea } from 'react-chartjs-2';

<PolarArea
  options={...}
  data={...}
  {...props}
/>

In v4, all re-exports from chart.js were removed from react-chartjs-2. Additionally, the default export was renamed to Chart. You must now import chart.js utilities directly from the chart.js package.

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

To upgrade your application to Chart.js v4, you must install Chart.js v4 along with the latest version of react-chartjs-2 (version ^5.0.0). After upgrading the packages, follow the migration guide for react-chartjs-2 v5.

npm install --save chart.js@^4.0.0 react-chartjs-2@^5.0.0

While react-chartjs-2 provides robust type inference, you may occasionally need to explicitly define types for the data and options props. To do this, import the necessary types directly from chart.js and pass the specific chart type as a generic argument to ensure type safety and autocompletion.

Supported ChartType values for generics include:

• 'bar'
• 'line'
• 'scatter'
• 'bubble'
• 'pie'
• 'doughnut'
• 'polarArea'
• 'radar'

import type { ChartData, ChartOptions } from 'chart.js';

interface LineProps {
  options: ChartOptions<'line'>;
  data: ChartData<'line'>;
}

Use pnpm install to install the necessary dependencies for the website project.

$ pnpm install

The props getDatasetAtEvent, getElementAtEvent, and getElementsAtEvent were removed in v4. To access event data, use the onClick prop and call the tree-shakable methods from chart.js using the chart instance obtained via a ref.

const chartRef = useRef(null);

<Chart
  ref={chartRef}
  type='bar'
  data={chartData}
  onClick={(event) => {
    const dataset = getDatasetAtEvent(chartRef.current, event);
    const element = getElementAtEvent(chartRef.current, event);
    const elements = getElementsAtEvent(chartRef.current, event);
  }}
/>