recharts

What is recharts?

Recharts is a composable charting library built on React components. It allows users to create various types of charts such as line, bar, area, pie, and more, using a declarative approach. It is easy to customize and extend, and it integrates well with the React ecosystem.

What are recharts's main functionalities?

LineChart

This code sample demonstrates how to create a simple LineChart with two lines, using the Recharts library. The chart includes a grid, axes, tooltips, and a legend.

{"import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';\nconst data = [{name: 'Page A', uv: 400, pv: 2400, amt: 2400}];\n<LineChart width={600} height={300} data={data}><CartesianGrid strokeDasharray=\"3 3\"/><XAxis dataKey=\"name\"/><YAxis/><Tooltip/><Legend /><Line type=\"monotone\" dataKey=\"pv\" stroke=\"#8884d8\" /><Line type=\"monotone\" dataKey=\"uv\" stroke=\"#82ca9d\" /></LineChart>"}

BarChart

This code sample shows how to create a BarChart with two bars per data point. It includes similar features to the LineChart, such as a grid, axes, tooltips, and a legend.

{"import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';\nconst data = [{name: 'Page A', uv: 400, pv: 2400, amt: 2400}];\n<BarChart width={600} height={300} data={data}><CartesianGrid strokeDasharray=\"3 3\"/><XAxis dataKey=\"name\"/><YAxis/><Tooltip/><Legend /><Bar dataKey=\"pv\" fill=\"#8884d8\" /><Bar dataKey=\"uv\" fill=\"#82ca9d\" /></BarChart>"}

PieChart

This code sample illustrates how to create a PieChart. It includes a Pie component with labels, a Tooltip for additional information on hover, and a Legend.

{"import { PieChart, Pie, Tooltip, Legend } from 'recharts';\nconst data = [{name: 'Group A', value: 400}, {name: 'Group B', value: 300}];\n<PieChart width={800} height={400}><Pie dataKey=\"value\" isAnimationActive={false} data={data} cx={200} cy={200} outerRadius={80} fill=\"#8884d8\" label /><Tooltip/><Legend /></PieChart>"}

Other packages similar to recharts

chart.js

Chart.js is a popular canvas-based charting library that provides a wide range of chart types and is highly customizable. It is not React-specific and requires wrappers like 'react-chartjs-2' to integrate with React applications. Compared to Recharts, Chart.js may have better performance for complex animations and large datasets due to its canvas rendering.

victory

Victory is another React chart library that offers a set of composable components for building interactive data visualizations. It is similar to Recharts in its React-centric approach but differs in its API design and customization options. Victory is known for its flexibility and extensive customization capabilities.

highcharts-react-official

Highcharts is a comprehensive charting library that has been around for a long time. The 'highcharts-react-official' package is the official React wrapper for Highcharts. Highcharts offers a vast array of chart types and features, and it is known for its robustness and interactivity. However, it is not as tightly integrated with React as Recharts and may require a commercial license for certain uses.

README

Recharts

Introduction

Recharts is a Redefined chart library built with React and D3.

The main purpose of this library is to help you to write charts in React applications without any pain. Main principles of Recharts are:

1. Simply deploy with React components.
2. Native SVG support, lightweight depending only on some D3 submodules.
3. Declarative components, components of charts are purely presentational.

Examples

<LineChart
  width={400}
  height={400}
  data={data}
  margin={{ top: 5, right: 20, left: 10, bottom: 5 }}
>
  <XAxis dataKey="name" />
  <Tooltip />
  <CartesianGrid stroke="#f5f5f5" />
  <Line type="monotone" dataKey="uv" stroke="#ff7300" yAxisId={0} />
  <Line type="monotone" dataKey="pv" stroke="#387908" yAxisId={1} />
</LineChart>

All the components of Recharts are clearly separated. The lineChart is composed of x axis, tooltip, grid, and line items, and each of them is an independent React Component. The clear separation and composition of components is one of the principle Recharts follows.

Installation

npm

NPM is the easiest and fastest way to get started using Recharts. It is also the recommended installation method when building single-page applications (SPAs). It pairs nicely with a CommonJS module bundler such as Webpack.

# latest stable
$ npm install recharts

umd

The UMD build is also available on unpkg.com:

 <script src="https://unpkg.com/react/umd/react.production.min.js"></script>
 <script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
 <script src="https://unpkg.com/recharts/umd/Recharts.min.js"></script>

Then you can find the library on window.Recharts.

dev build

$ git clone https://github.com/recharts/recharts.git
$ cd recharts
$ npm install
$ npm run build

Demo

To examine the demos in your local build, execute:

$ npm run[-script] demo

and then browse to http://localhost:3000.

Module Formats

• babel-plugin-recharts A simple transform to cherry-pick Recharts modules so you don’t have to.

Contribution

We'd love :heart: to hear what you think we should build. Please create an issue to write your usage or ideas.

We are looking for like-minded people who share the same idea about Recharts. The goal of this project is to create a more flexible charting library for the React community.

Backers

Become a backer and get your image on our README on Github with a link to your site.

Sponsoring

Most of the core team members do this open source work in their free time. If you use recharts for a important work, and you'd like us to invest more time on it, please donate. Thanks!

License

MIT

Copyright (c) 2015-2020 Recharts Group.

Changelog

2.0.5 (Feb 08, 2021)

feat

• defer when syncing to other charts

fix

• Fix Customized component types
• fix child event not dispatched, fix #2414