Recharts

What's Changed

• fix(Pie): pass computed innerRadius/outerRadius to Label children via PolarLabelContextProvider by @0007aadil in https://github.com/recharts/recharts/pull/7458
• chore(deps): bump immer from 11.1.9 to 11.1.15 by @dependabot[bot] in https://github.com/recharts/recharts/pull/7575
• fix(tooltip): fall back to index-based search when label-based search returns undefined for allowDuplicatedCategory=false by @hxy-asdw in https://github.com/recharts/recharts/pull/7573
• fix(bar): keep barGap correct when maxBarSize clamps the bar width (#2774) by @sobol-sudo in https://github.com/recharts/recharts/pull/7582

New Contributors

• @0007aadil made their first contribution in https://github.com/recharts/recharts/pull/7458
• @hxy-asdw made their first contribution in https://github.com/recharts/recharts/pull/7573
• @sobol-sudo made their first contribution in https://github.com/recharts/recharts/pull/7582

Full Changelog: https://github.com/recharts/recharts/compare/v3.10.0...v3.10.1

Recharts

storybook

Build Status

codecov

npm version

npm downloads

MIT License

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 with minimal dependencies.
3. Declarative components.

Documentation at recharts.github.io and our storybook

Also see the wiki.

All development is done on the main branch. The current latest release and storybook documentation reflects what is on the release branch.

Examples

<LineChart width={400} height={400} data={data}>
  <XAxis dataKey="name" />
  <Tooltip />
  <CartesianGrid stroke="#f5f5f5" />
  <Line type="monotone" dataKey="uv" stroke="#ff7300" />
  <Line type="monotone" dataKey="pv" stroke="#387908" />
</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 react-is

react-is needs to match the version of your installed react package.

Deno

Deno is a drop-in replacement for npm, so Recharts installs the same way:

$ deno add recharts react-is

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/react-is/umd/react-is.production.min.js"></script>
<script src="https://unpkg.com/recharts/umd/Recharts.min.js"></script>

Then you can find the library on window.Recharts.

Contributing

Recharts is open source. If you want to contribute to the project, please read the CONTRIBUTING.md

to understand how to contribute to the project and DEVELOPING.md to set up your development

environment.

Thanks

<a href="https://www.chromatic.com/"><img src="https://user-images.githubusercontent.com/321738/84662277-e3db4f80-af1b-11ea-88f5-91d67a5e59f6.png" width="153" height="30" alt="Chromatic" /></a>

Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.

JetBrains logo.

Thanks to JetBrains for providing OSS development license for their IDEs.

Browser testing via

TestMu AI

License

MIT

Copyright (c) 2015-2026 Recharts Group.