explaingit

reactchartjs/react-chartjs-2

★ 6,926TypeScriptAudience · developerComplexity · 2/5LicenseSetup · easy

TLDR

A React library that lets you add bar charts, line charts, doughnuts, scatter plots, and more to your app by importing a chart component and passing your data as a prop, no custom drawing code needed.

Mindmap

mindmap
  root((react-chartjs-2))
    What it does
      Charts in React
      Wraps Chart.js
      Component model
    Chart Types
      Bar and line
      Doughnut
      Scatter plot
    Tech Stack
      TypeScript
      React
      Chart.js
    Setup
      npm install
      Peer dependency
      MIT license
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add a bar chart or line chart to a React app by importing one component and passing a data object as a prop

USE CASE 2

Display a doughnut or pie chart in a React dashboard with just two lines of import and JSX

USE CASE 3

Handle user click events on chart segments to trigger actions or show details inside a React component

Tech stack

TypeScriptReactChart.jsnpm

Getting it running

Difficulty · easy Time to first run · 5min

Install via npm alongside Chart.js as a peer dependency, no backend or external services required.

Use freely for any purpose, including commercial projects, as long as you keep the copyright notice.

In plain English

react-chartjs-2 is a library that makes it straightforward to add charts to React web applications. It wraps Chart.js, a widely used JavaScript charting library, so that React developers can use charts the same way they use any other React component: by importing the chart type they need and passing data to it as a property. The library supports Chart.js versions 3 and 4 and is installed alongside Chart.js as a peer dependency. A two-line example in the README shows importing a Doughnut chart component and placing it in a page by passing in a data object. The same pattern applies to the other chart types that Chart.js supports, such as bar charts, line charts, and scatter plots, though the README itself is brief and points to the documentation site for the full list of components and examples. Installation uses a standard package manager command (npm, yarn, or pnpm). The library is MIT licensed. The documentation site covers working with datasets, handling user interaction events, a FAQ, a component reference, and a set of live examples. There is also a Stack Overflow tag for community questions. This repository is the glue layer between two existing tools rather than a standalone charting system. If you are already comfortable with React and want interactive charts without leaving the React component model, this library handles the integration details. The README is concise and the project itself is mature, reflecting that most questions are better answered by the Chart.js documentation or the project's own documentation site.

Copy-paste prompts

Prompt 1
I am building a React dashboard and want to show a bar chart of monthly sales. Use react-chartjs-2 to write the complete code including the Chart.js data object and the BarChart component.
Prompt 2
How do I install react-chartjs-2 alongside Chart.js in my React project using npm, and what is the minimum code to render a doughnut chart on the page?
Prompt 3
I have a react-chartjs-2 line chart and want clicking a data point to open a modal with details. How do I add an onClick handler to the chart component?
Prompt 4
I am migrating my app from react-chartjs-2 v3 to v4. What breaking changes do I need to handle?
Prompt 5
How do I make a react-chartjs-2 chart resize automatically when the browser window changes size?
Open on GitHub → Explain another repo

← reactchartjs on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.