Recharts
A React charting library built on D3 for drawing charts from declarative components.
- Stars
- 27.7k
- Forks
- 2k
- Licence
- MIT
- Language
- TypeScript
- Last update
- 4 days ago
- Type
- Library
What it is
Recharts is a charting library for React applications, built on top of D3. You draw charts by composing React components such as a line chart, axes, a grid and a tooltip, each of which is a separate part you can combine. It renders charts as native SVG and is aimed at making charts in React apps straightforward.
- Add a line chart with tooltip and grid to a React dashboard
- Compose axes, grids and multiple line series in one chart
- Install via npm and render a chart from a data array
Great for
- React developers who need standard charts such as line, bar or similar graphs in a web app
- Teams that prefer declarative, component-based chart code
- Single-page applications installed through npm
- Developers who want SVG-based charts with minimal dependencies
Not ideal for
- Non-programmers who want to make charts without code, since it requires writing React components
- Projects not using React, because the library is built around React components
- Very large datasets needing canvas or GPU rendering, since the README only describes SVG support
How to get it
- 1
Install with a package manager
You'll need: Node.js and npm · React
Install with npm
npm install recharts react-is - 2
Run it
- Install recharts and react-is with npm, making sure react-is matches your React version.
- Import chart components such as LineChart, XAxis, Tooltip, CartesianGrid and Line from recharts.
- Pass an array of data to a LineChart with width and height set.
- Add dataKey props to Line and XAxis to map your data fields to the chart.
- 3
Get the most out of it
- Use the storybook at recharts.github.io for live examples of chart types
- Read the documentation site at recharts.github.io for full API details
- Check the project wiki on GitHub for further guides
- Use the UMD build via unpkg if you are not using a bundler
Downloads
Strengths
- Declarative API where each chart part is an independent React component
- Native SVG output with a stated focus on being lightweight with minimal dependencies
- MIT licensed with active development and a documentation site and storybook
Trade-offs
- Only suited to React projects, so it does not fit other frameworks by default
- Installation asks you to also install react-is matching your React version, an extra step for beginners
- The README excerpt provides limited detail on specific chart types and advanced options; see the docs site
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| recharts (this) | 27.7k | Library | beginner | 4 days ago | React developers who need standard charts such as line, bar or similar graphs in a web app |
| Chart.js | 67.8k | Library | intermediate | 14 days ago | Web developers adding standard charts such as line or bar charts to a site |
| nivo | 14.1k | Library | intermediate | 4 months ago | React developers who need charts in a web app |
| visx | 21.1k | Library | intermediate | 5 months ago | React developers who want full control over how a chart looks and behaves |
| plotly.js | 18.4k | Library | beginner | 7 days ago | Web developers who want interactive charts in their own site or app |
| ui | 127k | Library | intermediate | 4 days ago | Developers building React or Next.js interfaces who want full control over component code |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.