Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit

## Description

- add: react-hooks eslint plugin:
React hooks eslint plugin was installed but wasn't used. From now on,
it'll be extended from in the eslint config, so migrating components to
funtional components and usage of hook will be smoother as it can detect
misuse of hooks.
- refactor: `Text` to function component
- fix: missing hook dependency in `ResponsiveContainer`

## Related Issue

<!--- This project only accepts pull requests related to open issues -->
<!--- If suggesting a new feature or change, please discuss it in an
issue first -->
<!--- If fixing a bug, there should be an issue describing it with steps
to reproduce -->
<!--- Please link to the issue here: -->

## Motivation and Context

Refactoring library to be more maintainable - testing refactor-ability

## How Has This Been Tested?

<!--- Please describe in detail how you tested your changes. -->
<!--- Include details of your testing environment, and the tests you ran
to -->
<!--- see how your change affects other areas of the code, etc. -->

## Screenshots (if appropriate):

## Types of changes

<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to change)

## Checklist:

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

- [X] My code follows the code style of this project.
- [ ] My change requires a change to the documentation.
- [ ] I have updated the documentation accordingly.
- [ ] I have added tests to cover my changes.
- [x] All new and existing tests passed.

Git stats


Failed to load latest commit information.
Latest commit message
Commit time
March 17, 2020 21:48
February 8, 2016 11:00
March 3, 2023 16:03
March 15, 2023 14:14
March 15, 2023 14:14


storybook Build Status Coverage Status npm version npm downloads MIT License


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.

Documentation at

Please see the wiki for FAQ.


  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} />

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.



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


The UMD build is also available on

 <script src=""></script>
 <script src=""></script>
 <script src=""></script>

Then you can find the library on window.Recharts.

dev build

$ git clone
$ cd recharts
$ npm install
$ npm run build


To examine the demos in your local build, execute:

$ npm run[-script] demo

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


We are in the process of unifying documentation and examples in storybook. To run it locally, execute

$ npm run[-script] storybook

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

Module Formats



Copyright (c) 2015-2022 Recharts Group.