Sourcemap Explorer
Stack · npm package

recharts

React charts

latest 3.10.1· MIT· 288 versions publishedView on npm

About

React charts

reactreactjschartreact-component

What detecting recharts tells you about a site

recharts reveals declarative, component-based charts built on D3 under the hood — the most popular charting library in the React ecosystem. Its presence signals a dashboard, analytics view or reporting UI where standard chart types composed as JSX were good enough and developer ergonomics mattered.

Why the exact recharts version matters

Recharts changed its responsive-container and component APIs across the 2.x line (and the v3 rework is larger); the exact version tells you which chart-component contract the code uses.

recharts in a real-world stack

When you find recharts in a bundle, it rarely travels alone. react and a slice of d3 (bundled internally); often a date library for time-axis formatting.

Quick facts

Latest version3.10.1
LicenseMIT
Authorrecharts group
Repositorygithub.com/recharts/recharts
Homepagegithub.com/recharts/recharts
Installnpm install recharts
Direct dependencies11
Peer dependenciesreact, react-is, react-dom

Common pairings

Packages this one expects to find in the same project. Each is also a Sourcemap Explorer detection target.

reactreact-isreact-dom

What recharts pulls in

recharts declares 11 direct dependencies — each one also rides into any bundle that ships recharts, so they are detection targets too. Reading them is a quick way to understand the package's real footprint .

clsximmerreselectes-toolkitreact-reduxeventemitter3tiny-invariantvictory-vendor@reduxjs/toolkitdecimal.js-lightuse-sync-external-store

How Sourcemap Explorer detects recharts

recharts ships as v3.10.1, published 2026-07-25 and carries 11 direct dependencies, 3 peer dependencies (react, react-is, react-dom), 288 versions on the registry. Those exact numbers are the footprint Sourcemap Explorer matches when recharts rides inside a deployed bundle — here is how the detection works.

We catch recharts from two complementary signals: bundled source paths and the embedded package.json. Modern bundlers (webpack, Vite, esbuild, Rollup, Turbopack) preserve the original node_modules/recharts/ paths inside the JavaScript sourcemap's sources[] array — that's the canonical signal. When the matching package.json is also captured in sourcesContent[], we read the exact version field — patch number included. No regex guessing, no version inference.

  1. 1

    Confirm the site exposes sourcemaps

    In DevTools Network, check the response headers of any application script for `SourceMap` or `X-SourceMap`. Failing that, fetch the script's last 4 KB and look for a `//# sourceMappingURL=` comment — that map is where the `recharts` paths live.

  2. 2

    Find the package in the bundle

    Open DevTools → Network → reload. Click any application script and look at its sourcemap. Inside, search `sources[]` for entries matching `node_modules/recharts/` — every match confirms the package is bundled. The matching `sourcesContent[i]` for `node_modules/recharts/package.json` gives you the exact installed version.

  3. 3

    Read the version directly from package.json

    Run `jq -r '. as $m | $m.sources | to_entries[] | select(.value | endswith("node_modules/recharts/package.json")) | $m.sourcesContent[.key] | fromjson | .version' bundle.js.map`. Sourcemap Explorer automates the same query in the popup.

Major releases of recharts

When each major version first landed. Major bumps are where breaking changes live, so this timeline is the fastest way to date the recharts version a site actually ships against the ecosystem.

Major
First release
Date
v3
3.0.0
2025-06-23
v2
2.0.0
2020-12-29
v1
1.0.0
2018-07-05
v0
0.1.0
2015-08-07

Recent versions

Version
Released
3.10.1
2026-07-25
3.10.0
2026-07-20
3.9.2
2026-07-04
3.9.1
2026-06-30
3.9.0
2026-06-23
3.8.1
2026-03-25
3.8.0
2026-03-06
3.7.0
2026-01-21

recharts README

Live mirror of the GitHub README, for reference. Updated whenever the repo's default branch changes.

Recharts

storybook Build Status Coverage Status 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 depending only on some D3 submodules.
  3. Declarative components, components of charts are purely presentational.

Documentation at recharts.org and our storybook (WIP)

Please see the wiki for FAQ.

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

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.

Storybook

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.

Releases

Releases are automated via GH Actions - when a new release is created in GH, CI will trigger that:

  1. Runs a build
  2. Runs tests
  3. Runs npm publish

Version increments and tagging are not automated at this time.

Release testing

Until we can automate more, it should be preferred to test as close to the results of npm publish as we possibly can. This ensures we don't publish unintended breaking changes. One way to do that is using yalc - npm i -g yalc.

  1. Make your changes in recharts
  2. yalc publish in recharts
  3. yalc add recharts in your test package (ex: in a vite or webpack reach app with recharts installed, imported, and your recent changes used)
  4. npm install
  5. Test a local run, a build, etc.

Module Formats

  • babel-plugin-recharts A simple transform to cherry-pick Recharts modules so you don’t have to. Note: this plugin is out of date and may not work with 2.x

Thanks

Chromatic

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

License

MIT

Copyright (c) 2015-2023 Recharts Group.

FAQ

What is recharts used for?

React charts

How can I tell if a website is using recharts?

Open the page in Chrome with the Sourcemap Explorer extension installed and read the Stack tab. We catch `recharts` from two complementary signals: `node_modules/recharts/` paths inside the JavaScript sourcemap, and the embedded `package.json` we read for exact-version detection. Without the extension you can do the same lookup manually in DevTools — the steps are listed in the "How Sourcemap Explorer detects" section above.

How do I find out which version of recharts a website is running?

Read it straight from the site's JavaScript sourcemap. When a build ships source maps, the bundled `recharts/package.json` carries the exact `version` string — Sourcemap Explorer extracts it in one click on the Stack tab, and you can do it by hand in DevTools by opening the `.map` file and searching for `node_modules/recharts/package.json`. That is far more reliable than inferring the version from an asset-hash or a `?ver=` query string, which is all surface-level detectors have to go on. The current npm release is 3.10.1, but real deployments frequently run an older pinned version — which is exactly why reading the bundled number matters.

What is the latest version of recharts?

3.10.1, as published on the npm registry. The "Recent versions" table on this page lists the most recent 8 releases with their release dates. Sourcemap Explorer reports the version actually bundled into a site, which can lag the latest release by months on real-world deployments.

Is recharts actively maintained?

Very actively maintained — the last release shipped within the past three months. The last published release was 2026-07-25. Source code: https://github.com/recharts/recharts.

Where can I read more?

Project homepage: https://github.com/recharts/recharts. Source code: https://github.com/recharts/recharts. Published on npm: https://www.npmjs.com/package/recharts. Licensed as MIT.

Keep reading on Sourcemap Explorer

Practical guides

Detection deep dives

Alternative tools

Detected by Sourcemap Explorer

When a bundle ships sourcemaps, we read the embedded package.json for recharts and report the precise version (the registry's latest is v3.10.1, published 2026-07-25; the bundled copy is often older). Without sourcemaps, an import / require in the page's scripts is enough to flag it.

Install free on Chrome