# react-chartjs-2

React components for Chart.js, the most popular charting library. Supports Chart.js v4 and v3. [![NPM version][npm]][npm-url] [![Downloads][downloads]][downloads-url] [![Build status][build]][build-url] [![Coverage status][coverage]][coverage-url] [![Bundle size][size]][size-url] [npm]: https://img.shields.io/npm/v/react-chartjs-2.svg [npm-url]: https://www.npmjs.com/package/react-chartjs-2 [downloads]: https://img.shields.io/npm/dm/react-chartjs-2.svg [downloads-url]: https://www.npmjs.com/package/react-chartjs-2 [build]: https://img.shields.io/github/actions/workflow/status/reactchartjs/react-chartjs-2/ci.yml?branch=master [build-url]: https://github.com/reactchartjs/react-chartjs-2/actions [coverage]: https://img.shields.io/codecov/c/github/reactchartjs/react-chartjs-2.svg [coverage-url]: https://app.codecov.io/gh/reactchartjs/react-chartjs-2 [size]: https://img.shields.io/bundlephobia/minzip/react-chartjs-2 [size-url]: https://bundlephobia.com/package/react-chartjs-2
Quickstart • Docs • Slack • Stack Overflow

## Quickstart Install this library with peer dependencies: ```bash pnpm add react-chartjs-2 chart.js # or yarn add react-chartjs-2 chart.js # or npm i react-chartjs-2 chart.js ``` We recommend using `chart.js@^4.0.0`. Then, import and use individual components: ```jsx import { Doughnut } from 'react-chartjs-2'; ``` Need an API to fetch data? Consider [Cube](https://cube.dev/?ref=eco-react-chartjs), an open-source API for data apps.
[![supported by Cube](https://user-images.githubusercontent.com/986756/154330861-d79ab8ec-aacb-4af8-9e17-1b28f1eccb01.svg)](https://cube.dev/?ref=eco-react-chartjs) ## Docs - [Migration to v4](https://react-chartjs-2.js.org/docs/migration-to-v4) - [Working with datasets](https://react-chartjs-2.js.org/docs/working-with-datasets) - [Working with events](https://react-chartjs-2.js.org/docs/working-with-events) - [FAQ](https://react-chartjs-2.js.org/faq) - [Components](https://react-chartjs-2.js.org/components) - [Examples](https://react-chartjs-2.js.org/examples) ## License [MIT Licensed](LICENSE) Copyright (c) 2020 Jeremy Ayerst

	Stars	Issues	Version	Updated	Created
d3	107,800	15	7.9.0	2 months ago	13 years ago
highcharts	207	4	11.4.1	2 months ago	10 years ago
react-chartjs-2	6,420	98	5.2.0	a year ago	8 years ago
vega			5.29.0	10 days ago	11 years ago
vega-lite	4,519	719	5.18.1	13 days ago	9 years ago

d3 vs highcharts vs react-chartjs-2 vs vega vs vega-lite

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past