MCPcopy Index your code
hub / github.com/recharts/recharts

github.com/recharts/recharts @v3.9.1 sqlite

repository ↗ · DeepWiki ↗ · release v3.9.1 ↗
2,580 symbols 8,981 edges 1,205 files 108 documented · 4% 151 cross-repo links
README

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

Chromatic

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.

Extension points exported contracts — how you extend this code

MockAnimationManager (Interface)
(no doc) [4 implementers]
test/animation/MockProgressAnimationManager.ts
TimeoutController (Interface)
(no doc) [4 implementers]
src/animation/timeoutController.ts
DocReader (Interface)
(no doc) [4 implementers]
omnidoc/DocReader.ts
SunburstNode (Interface)
* We require tooltipIndex on each node internally to track which node is active in the tooltip. * This is not required
src/chart/SunburstChart.tsx
InternalLineProps (Interface)
* Internal props, combination of external props + defaultProps + private Recharts state
src/cartesian/Line.tsx
BaseChartProps (Interface)
* Props shared with all Cartesian and Polar charts. * There are three charts that do not use these base props, and defi
src/util/types.ts
InternalPieProps (Interface)
* Internal props, combination of external props + defaultProps + private Recharts state
src/polar/Pie.tsx
Array (Interface)
(no doc)
types.d.ts

Core symbols most depended-on inside this repo

render
called by 1198
www/src/entry-server.tsx
expectLastCalledWith
called by 961
test/helper/expectLastCalledWith.ts
assertNotNull
called by 494
test/helper/assertNotNull.ts
map
called by 490
src/util/scale/RechartsScale.ts
createSelectorTestCase
called by 403
test/helper/createSelectorTestCase.tsx
getRelativeCoordinate
called by 315
src/util/getRelativeCoordinate.ts
rechartsTestRender
called by 313
test/helper/createSelectorTestCase.tsx
useAppSelector
called by 256
src/state/hooks.ts

Shape

Function 2,201
Method 167
Interface 165
Class 47

Languages

TypeScript100%

Modules by API surface

src/state/selectors/axisSelectors.ts65 symbols
src/chart/Sankey.tsx41 symbols
omnidoc/readProject.ts38 symbols
src/chart/Treemap.tsx34 symbols
src/util/types.ts32 symbols
src/cartesian/Brush.tsx31 symbols
test/animation/legacyAnimationLengthChange.spec.tsx25 symbols
src/animation/AnimationHandle.ts24 symbols
omnidoc/generateApiDoc.ts23 symbols
src/polar/Pie.tsx22 symbols
test/cartesian/Area.animation.spec.tsx21 symbols
src/util/ChartUtils.ts21 symbols

Dependencies from manifests, versioned

@babel/cli7.24.8 · 1×
@babel/core7.24.9 · 1×
@babel/preset-env7.29.0 · 1×
@babel/preset-react7.28.5 · 1×
@babel/preset-typescript7.28.5 · 1×
@babel/runtime7.26.10 · 1×
@codecov/bundle-analyzer2.0.1 · 1×
@codemirror/commands6.10.0 · 1×
@codemirror/lang-javascript6.2.4 · 1×
@codemirror/state6.5.2 · 1×

For agents

$ claude mcp add recharts \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact