Skip to content
Get packs

Guide · Open source

How to use Recharts: install and build React charts

Updated · written with AI from the project's own documentation and checked against our catalogue data

Recharts is a chart library for React applications, built on top of D3. You draw charts by combining React components such as a line chart, axes, a grid and a tooltip. This guide shows how to install it, build a basic line chart and understand how its parts fit together, so you can start adding charts to a React app.

Rechartsrecharts/recharts · ★ 27.7k · MIT

Quick start

  1. 1Confirm prerequisites. Make sure Node.js and npm are installed, and that your project uses React.
  2. 2Install the packages. Run npm install recharts react-is in your project folder. Keep react-is on the same version as react.
  3. 3Import the components. Import the chart and parts you need, such as LineChart, XAxis, Tooltip, CartesianGrid and Line, from recharts.
  4. 4Prepare your data. Create an array of objects where each object has the fields you want to plot, such as name, uv and pv.
  5. 5Compose the chart. Nest the child components inside LineChart and set dataKey on each one to point at your data fields.
  6. 6Check the documentation. Use the storybook and documentation site to find examples for other chart types and options.

What Recharts is and who it suits

Recharts is a charting library for React. Its README describes three main principles: simple deployment with React components, native SVG support with a lightweight footprint and minimal dependencies, and declarative components.

It suits React developers who need standard charts such as line or bar graphs, and teams that prefer component-based chart code. It is not a no-code tool, and it is not meant for projects that do not use React.

  • Good fit: React apps and single-page applications installed through npm
  • Good fit: teams that want declarative, component-based chart code
  • Not a fit: non-programmers who want charts without writing code
  • Not a fit: projects not using React
  • Not a fit (per the README's scope): very large datasets that need canvas or GPU rendering

Install Recharts with npm

According to the README, npm is the easiest way to get started and the recommended method for single-page applications. Recharts needs Node.js and npm, along with React. Install the library and react-is together.

The README notes that react-is must match the version of the react package in your project.

npm install recharts react-is

Build your first line chart

A chart is built by nesting components inside a chart container. The LineChart takes a width, a height and a data array. Child components such as XAxis, Tooltip, CartesianGrid and Line each add one part of the chart. The dataKey prop tells a component which field of each data item to read.

The README stresses that each part is an independent React component, so you can add, remove or reorder them to change the chart.

  • LineChart sets the overall size and receives the data
  • XAxis with dataKey="name" labels the horizontal axis from each item's name field
  • CartesianGrid adds grid lines
  • Tooltip shows values on hover
  • Line draws a series using the dataKey you specify
<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>

Use the storybook and documentation to go further

The README points to the documentation site at recharts.github.io and to a storybook with live examples. The project wiki is also linked from the README. Use these to find examples for other chart types and options beyond the basic line chart shown here.

The README also states that development happens on the main branch, while the latest release and storybook docs reflect the release branch.

  • Documentation: https://recharts.github.io
  • Storybook: https://recharts.github.io/en-US/storybook
  • Wiki: https://github.com/recharts/recharts/wiki

Other ways to load Recharts

For projects without a bundler, the README documents a UMD build on unpkg.com. It requires React, ReactDOM and react-is loaded first, then Recharts. The library is then available on window.Recharts.

Deno users can install with the command deno add recharts react-is, according to the README.

  • npm: recommended for single-page applications, pairs well with bundlers such as Webpack
  • Deno: deno add recharts react-is
  • UMD: loads from unpkg.com and exposes window.Recharts
<script src="https://unpkg.com/recharts/umd/Recharts.js"></script>

What people use it for

  • A dashboard in a React app showing line charts of metrics over time
  • A web app displaying bar or other standard graphs built from component parts
  • A single-page application adding hover tooltips and grid lines to existing charts
  • A team wanting chart code that is declarative and organised as React components

Frequently asked questions

Is Recharts free to use?

Yes. Recharts is released under the MIT licence, as stated in its README and LICENSE link. The README's copyright line reads Copyright (c) 2015-2026 Recharts Group.

What do I need to install Recharts?

The README lists Node.js and npm, plus React as prerequisites. Install with npm install recharts react-is, and keep react-is matched to your React version.

How do I install Recharts without npm?

The README describes a UMD build served from unpkg.com. Load React, ReactDOM and react-is first, then the Recharts UMD script, and access the library on window.Recharts. Deno users can run deno add recharts react-is.

Can I use Recharts without React?

No, according to the README's scope. The library is built around React components, so projects that do not use React are not a good match.

Does Recharts support large datasets?

The README only describes SVG support. It does not describe canvas or GPU rendering, so for very large datasets that need those, check whether SVG rendering meets your needs before choosing it.

How does Recharts compare to Chart.js, Victory, Nivo or Visx?

These are comparable charting projects. This guide does not compare them on performance or features, since the source does not cover that. Try a small chart in each to see which API and output suits your project.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Recharts suits React developers who want standard line, bar or similar charts built from declarative components, installed via npm in a single-page app. Skip it if you do not use React, need no-code charting, or must render very large datasets on canvas or GPU, since the README only documents SVG.

Install options & downloads