React Chart.js 2

Common errors

• TypeError: Cannot read properties of undefined (reading 'register')

  cause Chart.js components (scales, elements, plugins) were not explicitly registered.
  fix Add `import { Chart as ChartJS, ... } from 'chart.js'; ChartJS.register(...);` at the top level of your application or component where charts are used.

• Error: "Line" is not a registered chart type.

  cause The specific chart type component (e.g., LineController) was not registered with Chart.js.
  fix Ensure you import and register the corresponding controller from `chart.js`, for example `LineController` for the `Line` chart component: `ChartJS.register(LineController, ...);`.

• Module not found: Error: Can't resolve 'react-chartjs-2' in '...'

  cause CommonJS imports were used in a project configured for pure ESM when using `react-chartjs-2@5.0.0`, or vice-versa, or the package isn't installed.
  fix For `react-chartjs-2@5.0.0`, convert `require()` to `import`. For any version, ensure `react-chartjs-2` and `chart.js` are correctly installed and that the import paths are correct. If using Webpack 4 with v5.x, ensure you're on at least v5.2.0 which restored compatibility.

• Unhandled Rejection (Error): Chart.js must be installed to use react-chartjs-2.

  cause The peer dependency `chart.js` is not installed or its version is incompatible.
  fix Run `npm install chart.js` or `yarn add chart.js` and ensure the installed version satisfies the peer dependency range of your `react-chartjs-2` version.

Warnings

• breaking Version 5.0.0 of `react-chartjs-2` dropped CommonJS support entirely and became an ESM-only package.
  Fix: Upgrade to v5.1.0 or later which restored CommonJS support, or migrate your project to use ESM imports if possible. For versions 5.0.0, ensure your bundler (e.g., Webpack, Rollup) is configured to handle ESM, and use `import` statements only.
• breaking Version 5.0.0 introduced support for Chart.js v4. This meant dropping support for Chart.js v3 as a direct peer dependency, though the README states it supports both.
  Fix: Ensure you are using `chart.js@^4.0.0` or higher with `react-chartjs-2@^5.0.0`. If you need Chart.js v3, you should use `react-chartjs-2` v4.x.
• gotcha Chart.js v3+ introduced a tree-shaking friendly architecture where scales, elements, and plugins must be explicitly imported and registered with Chart.js.
  Fix: Always import and call `ChartJS.register(...)` for all necessary components (e.g., `CategoryScale`, `LinearScale`, `PointElement`, `LineElement`, `Title`, `Tooltip`, `Legend`) from `chart.js` before rendering any chart components.
• gotcha `react-chartjs-2` relies heavily on its peer dependency `chart.js`. Mismatched versions between `react-chartjs-2` and `chart.js` are a frequent source of errors.
  Fix: Always install `chart.js` alongside `react-chartjs-2` and ensure their versions satisfy the peer dependency requirements specified in `react-chartjs-2`'s `package.json` (e.g., `chart.js: ^4.1.1` for `react-chartjs-2@5.x`).
• gotcha When dynamically updating chart options or data, it's crucial to ensure React's reconciliation process properly triggers Chart.js updates. Simply mutating objects passed as props might not work as expected.
  Fix: Ensure that `data` and `options` props are new objects (or deeply immutable updates) when changes occur, so React detects prop changes and `react-chartjs-2` can re-render or update the Chart.js instance. Using `useMemo` or `useState` to manage these objects effectively is common.

Install

• npm install react-chartjs-2 npm
• yarn add react-chartjs-2 yarn
• pnpm add react-chartjs-2 pnpm

Imports

• Line
  wrong:

  const Line = require('react-chartjs-2').Line;

  correct:

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

  Primary way to import individual chart components for ESM. While CommonJS was restored in v5.1.0, ESM is the recommended and modern approach.
• Chart as ChartJS

  import { Chart as ChartJS } from 'chart.js';

  When using `react-chartjs-2`, you often need to register elements from Chart.js itself. This is typically imported directly from 'chart.js', not 'react-chartjs-2'.
• CategoryScale

  import { CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from 'chart.js';

  Chart.js v3+ introduced tree-shakable components. You must explicitly import and register the scales, elements, and plugins you intend to use. This is a common point of confusion.

Quickstart

This quickstart demonstrates how to create a basic line chart using `react-chartjs-2`, including the necessary Chart.js component registrations for tree-shaking.

import React from 'react';
import { Line } from 'react-chartjs-2';
import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from 'chart.js';

ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);

export const MyLineChart = () => {
  const data = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [
      {
        label: 'My First dataset',
        fill: false,
        lineTension: 0.1,
        backgroundColor: 'rgba(75,192,192,0.4)',
        borderColor: 'rgba(75,192,192,1)',
        borderCapStyle: 'butt',
        borderDash: [],
        borderDashOffset: 0.0,
        borderJoinStyle: 'miter',
        pointBorderColor: 'rgba(75,192,192,1)',
        pointBackgroundColor: '#fff',
        pointBorderWidth: 1,
        pointHoverRadius: 5,
        pointHoverBackgroundColor: 'rgba(75,192,192,1)',
        pointHoverBorderColor: 'rgba(220,220,220,1)',
        pointHoverBorderWidth: 2,
        pointRadius: 1,
        pointHitRadius: 10,
        data: [65, 59, 80, 81, 56, 55, 40]
      }
    ]
  };

  const options = {
    responsive: true,
    plugins: {
      legend: {
        position: 'top'
      },
      title: {
        display: true,
        text: 'Chart.js Line Chart'
      }
    }
  };

  return <Line data={data} options={options} />;
};