> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/recharts/recharts/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

<CodeGroup>
  ```bash npm theme={null}
  npm install recharts react-is
  ```

  ```bash yarn theme={null}
  yarn add recharts react-is
  ```

  ```bash pnpm theme={null}
  pnpm add recharts react-is
  ```
</CodeGroup>

<Note>
  The `react-is` package version should match your installed `react` version.
</Note>

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

<CodeGroup>
  ```bash npm theme={null}
  npm install react react-dom react-is recharts
  ```

  ```bash yarn theme={null}
  yarn add react react-dom react-is recharts
  ```

  ```bash pnpm theme={null}
  pnpm add react react-dom react-is recharts
  ```
</CodeGroup>

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

```html theme={null}
<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>
```

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

### Access the library

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

```html theme={null}
<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>
```

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

## TypeScript support

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

```typescript theme={null}
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:

```jsx theme={null}
'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>
  );
}
```

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

## Verify installation

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

```jsx theme={null}
import { LineChart } from 'recharts';

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

If this runs without errors, Recharts is successfully installed!

## Next steps

<Card title="Quick start" icon="rocket" href="/quickstart">
  Learn how to create your first chart with a step-by-step tutorial
</Card>