# react-chartjs-2: React Components for Chart.js

> react-chartjs-2 wraps Chart.js in React components, but it does not bundle the charting library. Here is what the wrapper actually does, how to install and use it, and where it stops being the right choice.

**reactchartjs/react-chartjs-2** — React components for Chart.js, the most popular charting library

- Repository: https://github.com/reactchartjs/react-chartjs-2
- Website: https://react-chartjs-2.js.org
- Stars: 6,940 · Forks: 2,432
- Language: TypeScript
- License: MIT
- Published: 2026-09-22 · Updated: 2026-09-22 · Language: en
- Canonical page: https://hysenlabs.com/projects/reactchartjs-react-chartjs-2

## What react-chartjs-2 solves for React applications

Chart.js draws into a canvas element and owns that element's lifecycle: it needs a target, it needs to be told when data changes, and it needs to be destroyed when the component unmounts. In React, that means a ref, an effect, and careful handling of updates. react-chartjs-2 packages that work as React components so the data arrives as a prop.

The README describes the project as "React components for Chart.js, the most popular charting library" and states that it supports Chart.js v4 and v3. The audience is React developers who have already decided on Chart.js and want a component-shaped interface rather than direct canvas control. If you have not chosen a charting library, this project does not make that decision for you; it assumes Chart.js.

## How the wrapper relates to Chart.js at runtime

The package is deliberately thin. Chart.js is declared as a peer dependency in package.json with the range ^4.1.1, alongside React at ^16.8.0 || ^17.0. The README's install command adds both packages, and it recommends chart.js@^4.0.0. Nothing in the repository layout suggests a vendored copy of Chart.js: the published files are the dist directory produced by the rollup build plus generated type declarations.

That split matters for upgrades. Chart.js minor releases land in your dependency tree directly, without waiting for a wrapper release. It also matters for failure: if chart.js is absent or outside the peer range, the components have nothing to render into. The package marks itself sideEffects: false, which lets bundlers drop unused exports, and the README's example imports a single component rather than a namespace, which is the pattern that keeps that tree-shaking effective.

## Installing react-chartjs-2 and rendering a first chart

The README gives the install command with chart.js as a second package, in three package-manager variants. Pick the one that matches your project:

```bash
pnpm add react-chartjs-2 chart.js
# or
yarn add react-chartjs-2 chart.js
# or
npm i react-chartjs-2 chart.js
```

The README recommends chart.js@^4.0.0, and package.json declares the peer range as ^4.1.1. After install, import an individual component and pass a data prop. The README's own example uses Doughnut:

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

<Doughnut data={...} />
```

That is the whole shape of a first use: no canvas ref, no chart instance to construct. The data object follows Chart.js conventions, so the chart type you import determines which dataset fields apply. The project's documentation site lists further pages for datasets, events, components and examples, and the repository carries a stories directory and a sandboxes directory alongside the unit tests, which is where the component examples live in source form.

## Where react-chartjs-2 is the wrong tool

The wrapper adds no charting features of its own. Anything Chart.js cannot draw, react-chartjs-2 cannot draw either, because the rendering is Chart.js rendering. If your requirement is a chart type outside Chart.js's set, the wrapper is not a shortcut around that limit.

The peer dependency is the failure mode worth watching. A project that installs react-chartjs-2 alone, or pins an older Chart.js, gets components that cannot render, and the error surfaces at runtime rather than at install time in every setup. Version drift is the second constraint: the peer range in package.json is ^4.1.1 while the README says it supports v3 as well, so a v3 codebase needs to check compatibility rather than assume it.

Finally, this is a rendering library, not a data layer. It does not fetch, cache, aggregate or paginate series data, and the README documents none of that. Zoom and pan are not part of the package either; the documentation site's page list covers datasets, events, components and examples, and no zoom plugin appears in the README.

## Chart.js versus Recharts as the underlying choice

Recharts is the comparison people reach for, and the difference is architectural rather than cosmetic. Recharts composes charts from React elements, so the chart structure lives in JSX and inherits React's rendering model. react-chartjs-2 keeps Chart.js's imperative canvas renderer and only wraps the boundary, so the chart is configured through a data object and options rather than through nested components.

That makes react-chartjs-2 the smaller surface to learn if you already know Chart.js options, and the less React-native option if you expect to compose chart parts as components. It also means the wrapper's release cadence is largely decoupled from the drawing behaviour: the last push to the repository was on 2026-09-19, and the most recent release listed is v5.3.1 from 2025-10-27, with v5.3.0 before it on 2025-01-01. Chart.js itself is a separate project with its own maintenance, which is why one of the common search questions asks whether Chart.js is still maintained: that question is about Chart.js, not about this wrapper.

## Licence, maintenance and the cost of upgrading

react-chartjs-2 is MIT licensed, and the LICENSE file carries the copyright line "Copyright (c) 2020 Jeremy Ayerst". MIT imposes no copyleft obligation on your application, but it also gives no warranty, and the peer dependency on Chart.js means your effective licence surface includes whatever Chart.js uses. Check that separately; this article is not legal advice.

The upgrade cost is dominated by Chart.js major versions, not by the wrapper. The documentation site has a migration-to-v4 page, which tells you the project has already been through one breaking transition and documents it. On the wrapper side, the release history is sparse: three releases are listed, spanning 2023-01-09 to 2025-10-27. Sparse releases are not the same as abandonment, and the repository is not archived, but a team that needs a wrapper release for every Chart.js minor should plan around that cadence rather than expect it.

## Conclusion

Adopt react-chartjs-2 when you already want Chart.js in a React application and would rather pass data as props than manage a canvas element and its lifecycle yourself. Do not adopt it if you expect the package to include Chart.js: the README installs both, and a missing peer dependency stops the components from working. Before committing, check that your chart type is exported from the package entry point, confirm your React version against the peerDependencies range in package.json, and register only the Chart.js controllers your pages actually render so the bundle stays close to what the size-limit config measures.

## FAQ

### What is react-chartjs-2?

It is a set of React components for Chart.js, described in the README as React components for the charting library Chart.js. It supports Chart.js v4 and v3 and is published under the MIT licence.

### How do I install react-chartjs-2?

The README installs it together with its peer dependency, using pnpm add react-chartjs-2 chart.js, yarn add react-chartjs-2 chart.js, or npm i react-chartjs-2 chart.js. It recommends chart.js@^4.0.0.

### How do I use react-chartjs-2 in a component?

The README imports an individual component and passes a data prop, for example importing Doughnut from react-chartjs-2 and rendering it with data. The data object follows Chart.js conventions, and the documentation site has pages for datasets, events, components and examples.

### Can I use Chart.js with React?

Yes. react-chartjs-2 exists precisely to provide React components for Chart.js, and its README installs both packages together. Chart.js is declared as a peer dependency in package.json with the range ^4.1.1.

### How does react-chartjs-2 compare with Recharts?

Recharts composes charts from React elements, while react-chartjs-2 wraps Chart.js's canvas renderer and configures charts through a data object and options. If you already know Chart.js options, the wrapper is the smaller surface to learn.

### Does react-chartjs-2 support zoom and pan?

The README does not document zoom or pan, and the documentation site's listed pages cover datasets, events, components and examples. Those features are not part of the package as described.

## Sources

- [License: MIT](https://github.com/reactchartjs/react-chartjs-2/blob/master/LICENSE)
- [Project website](https://react-chartjs-2.js.org)
- [reactchartjs/react-chartjs-2 on GitHub](https://github.com/reactchartjs/react-chartjs-2)
- [README](https://github.com/reactchartjs/react-chartjs-2/blob/master/README.md)
- [Releases](https://github.com/reactchartjs/react-chartjs-2/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/reactchartjs-react-chartjs-2