Installation

Install Recharts using npm, yarn, or pnpm

Installation

Recharts is available as an npm package and can be installed using your preferred package manager.

Package manager installation

npm

npm install recharts react-is

The react-is package version should match your installed react version.

Peer dependencies

Recharts requires the following peer dependencies to be installed in your project:

Package	Supported Versions
react	^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
react-dom	^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
react-is	^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0

If you don’t already have React installed, you can install all dependencies together:

npm

npm install react react-dom react-is recharts

UMD build

For non-module environments, Recharts is also available as a UMD build via unpkg CDN. This is useful for quick prototyping or adding charts to existing HTML pages.

Include via script tags

Add the following script tags to your HTML file:

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

Make sure to include the scripts in the order shown above. Recharts depends on React, ReactDOM, and react-is being loaded first.

Access the library

Once the scripts are loaded, Recharts will be available on the global window object:

<div id="chart"></div>

<script>
  const { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } = window.Recharts;
  const { createElement: e } = React;
  
  const data = [
    { name: 'Page A', uv: 590, pv: 800, amt: 1400 },
    { name: 'Page B', uv: 868, pv: 967, amt: 1506 },
    { name: 'Page C', uv: 1397, pv: 1098, amt: 989 },
    { name: 'Page D', uv: 1480, pv: 1200, amt: 1228 },
  ];
  
  const chart = e(LineChart, { width: 600, height: 300, data },
    e(CartesianGrid, { strokeDasharray: '3 3' }),
    e(XAxis, { dataKey: 'name' }),
    e(YAxis),
    e(Tooltip),
    e(Legend),
    e(Line, { type: 'monotone', dataKey: 'pv', stroke: '#8884d8' }),
    e(Line, { type: 'monotone', dataKey: 'uv', stroke: '#82ca9d' })
  );
  
  ReactDOM.render(chart, document.getElementById('chart'));
</script>

For production use, we recommend using a module bundler (webpack, Vite, etc.) with the npm package instead of the UMD build.

TypeScript support

Recharts includes comprehensive TypeScript type definitions out of the box. No additional @types package is needed.

import { LineChart, Line, XAxis, YAxis } from 'recharts';
import type { LineProps, XAxisProps } from 'recharts';

type DataPoint = {
  name: string;
  value: number;
};

const data: DataPoint[] = [
  { name: 'A', value: 100 },
  { name: 'B', value: 200 },
];

Bundler configuration

Recharts is marked as side-effect-free in its package.json, which enables tree-shaking in modern bundlers. This means you only bundle the components you actually use.

Webpack

No special configuration needed. Tree-shaking works automatically in production mode.

Vite

No special configuration needed. Vite handles tree-shaking by default.

Next.js

Recharts works out of the box with Next.js App Router and Pages Router:

'use client'; // Only needed in App Router

import { LineChart, Line, XAxis, YAxis } from 'recharts';

export default function Chart() {
  const data = [/* your data */];
  
  return (
    <LineChart width={600} height={300} data={data}>
      <XAxis dataKey="name" />
      <YAxis />
      <Line dataKey="value" stroke="#8884d8" />
    </LineChart>
  );
}

When using Next.js App Router, remember to add 'use client' directive since Recharts is a client-side library.

Verify installation

To verify that Recharts is installed correctly, create a simple test file:

import { LineChart } from 'recharts';

console.log(LineChart); // Should output the component function

If this runs without errors, Recharts is successfully installed!

Next steps

Quick start

Learn how to create your first chart with a step-by-step tutorial