Registry / web-framework / react-chartjs-2

react-chartjs-2

library5.3.1jsnpmunverified

react-chartjs-2 provides React components that wrap the popular Chart.js library, enabling declarative data visualization within React applications. It supports Chart.js v4 and v3 (though v4 is recommended) and React versions 16.8.0 through 19.0.0. The current stable version is 5.3.1. Releases appear to be driven by Chart.js and React compatibility updates, with minor versions released every few months, and patch fixes as needed. Its key differentiator is providing a native React component API for Chart.js, abstracting away direct Chart.js instance management, and offering a robust integration with the React component lifecycle for dynamic chart updates.

web-framework data

npm install react-chartjs-2

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-CHARTJS-2

react-chartjs-2

web-frameworkjavascriptv5.3.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Line

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

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

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.

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} />; };

Debug

Known issues

breakingVersion 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.

affects: 5.0.0

breakingVersion 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.

affects: >=5.0.0

gotchaChart.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.

affects: >=4.0.0

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`).

affects: all

gotchaWhen 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.

affects: all

Errors

Common errors & fixes

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

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.

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 '...'

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.

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.

Upgrade

Version history

5.3.1latest on npm

Audit

Dependencies

chart.jsrequiredCore charting library that react-chartjs-2 wraps. Required for all chart functionality.

reactrequiredFrontend library for building user interfaces. Required as react-chartjs-2 components are React components.

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/reactchartjs/react-chartjs-2 ↗

packagehttps://www.npmjs.com/package/react-chartjs-2 ↗