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

# Quickstart

> Get started with Recharts in minutes by creating your first interactive chart

Get up and running with Recharts by building your first chart in just a few steps.

## Prerequisites

Before you begin, make sure you have:

* Node.js 18 or higher installed
* A React application set up (React 16.8+)
* Basic understanding of React components

## Create your first chart

<Steps>
  <Step title="Install Recharts">
    Install Recharts and its peer dependency `react-is`:

    <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` version should match your installed React version.
    </Note>
  </Step>

  <Step title="Prepare your data">
    Create a data array with objects. Each object represents a data point:

    ```jsx theme={null}
    const data = [
      { name: 'Page A', uv: 4000, pv: 2400, amt: 2400 },
      { name: 'Page B', uv: 3000, pv: 1398, amt: 2210 },
      { name: 'Page C', uv: 2000, pv: 9800, amt: 2290 },
      { name: 'Page D', uv: 2780, pv: 3908, amt: 2000 },
      { name: 'Page E', uv: 1890, pv: 4800, amt: 2181 },
      { name: 'Page F', uv: 2390, pv: 3800, amt: 2500 },
      { name: 'Page G', uv: 3490, pv: 4300, amt: 2100 },
    ];
    ```
  </Step>

  <Step title="Import chart components">
    Import the chart components you need:

    ```jsx theme={null}
    import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
    ```
  </Step>

  <Step title="Render your chart">
    Compose your chart using declarative components:

    ```jsx theme={null}
    function MyChart() {
      return (
        <LineChart
          width={600}
          height={300}
          data={data}
          margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="name" />
          <YAxis />
          <Tooltip />
          <Legend />
          <Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{ r: 8 }} />
          <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
        </LineChart>
      );
    }
    ```
  </Step>
</Steps>

## Understanding the components

Your first chart uses several key Recharts components:

* **`LineChart`** - The container component that sets up the coordinate system
* **`Line`** - Renders the line series using the `dataKey` prop to specify which data field to visualize
* **`XAxis`** and **`YAxis`** - Display the horizontal and vertical axes
* **`CartesianGrid`** - Adds the background grid lines
* **`Tooltip`** - Shows data details on hover
* **`Legend`** - Displays the legend for your data series

## Customization examples

### Multiple data series

The example above already shows two lines (`pv` and `uv`). Each `Line` component creates a separate series:

```jsx theme={null}
<Line type="monotone" dataKey="pv" stroke="#8884d8" />
<Line type="monotone" dataKey="uv" stroke="#82ca9d" />
```

### Change line style

Customize the line appearance with different interpolation types:

```jsx theme={null}
<Line type="monotone" dataKey="uv" stroke="#82ca9d" />
<Line type="linear" dataKey="pv" stroke="#8884d8" />
<Line type="step" dataKey="amt" stroke="#ffc658" />
```

Available types: `basis`, `basisClosed`, `basisOpen`, `linear`, `linearClosed`, `natural`, `monotoneX`, `monotoneY`, `monotone`, `step`, `stepBefore`, `stepAfter`.

### Add dots to data points

Show dots at each data point:

```jsx theme={null}
<Line 
  type="monotone" 
  dataKey="uv" 
  stroke="#82ca9d" 
  strokeWidth={2}
  dot={{ fill: '#82ca9d', r: 4 }}
  activeDot={{ r: 6 }}
/>
```

### Connect null values

Handle missing data by connecting around null values:

```jsx theme={null}
const dataWithNulls = [
  { name: 'Page A', uv: 4000 },
  { name: 'Page B', uv: 3000 },
  { name: 'Page C', uv: null },  // Missing data
  { name: 'Page D', uv: 2780 },
];

<Line type="monotone" dataKey="uv" stroke="#82ca9d" connectNulls />
```

## Understanding dataKey

The `dataKey` prop tells components which field in your data objects to visualize. It can be:

* **A string**: Direct property access (`dataKey="uv"`)
* **A nested path**: Dot notation for nested objects (`dataKey="user.name"`)
* **A function**: Custom data accessor (`dataKey={(data) => data.value * 2}`)

```jsx theme={null}
// String - most common
<Line dataKey="uv" stroke="#82ca9d" />

// Nested property
const nestedData = [
  { name: 'Page A', sales: { total: 4000 } }
];
<Line dataKey="sales.total" stroke="#82ca9d" />

// Function - for computed values
<Line dataKey={(entry) => entry.uv + entry.pv} stroke="#82ca9d" />
```

## Make it responsive

Wrap your chart in `ResponsiveContainer` to make it adapt to its parent size:

```jsx theme={null}
import { ResponsiveContainer, LineChart, Line, XAxis, YAxis } from 'recharts';

function ResponsiveChart() {
  return (
    <ResponsiveContainer width="100%" height={400}>
      <LineChart data={data}>
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
      </LineChart>
    </ResponsiveContainer>
  );
}
```

<Tip>
  Always use `ResponsiveContainer` in production to ensure your charts work on all screen sizes.
</Tip>

## Next steps

<CardGroup cols={2}>
  <Card title="Explore examples" icon="chart-line" href="/examples/line-chart">
    See more chart examples and variations
  </Card>

  <Card title="Core concepts" icon="book" href="/concepts/charts">
    Learn about chart types and architecture
  </Card>

  <Card title="API reference" icon="code" href="/api/charts/line-chart">
    Explore all props and options
  </Card>

  <Card title="Customization" icon="palette" href="/concepts/customization">
    Learn how to style and customize charts
  </Card>
</CardGroup>