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

# Area chart

> Examples and usage of AreaChart component

The `AreaChart` component displays quantitative data as filled areas. It's useful for showing trends and cumulative totals over time.

## Basic area chart

```jsx theme={null}
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

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 },
];

function Example() {
  return (
    <AreaChart width={600} height={300} data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Legend />
      <Area type="monotone" dataKey="uv" stroke="#8884d8" fill="#8884d8" />
    </AreaChart>
  );
}
```

## Stacked area chart

```jsx theme={null}
<AreaChart width={600} height={300} data={data}>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="name" />
  <YAxis />
  <Tooltip />
  <Legend />
  <Area type="monotone" dataKey="pv" stackId="1" stroke="#8884d8" fill="#8884d8" />
  <Area type="monotone" dataKey="uv" stackId="1" stroke="#82ca9d" fill="#82ca9d" />
  <Area type="monotone" dataKey="amt" stackId="1" stroke="#ffc658" fill="#ffc658" />
</AreaChart>
```

<Note>
  Areas with the same `stackId` will be stacked on top of each other.
</Note>

## Area types

Different interpolation types for the area curve.

<CodeGroup>
  ```jsx Monotone theme={null}
  <Area type="monotone" dataKey="uv" stroke="#8884d8" fill="#8884d8" />
  ```

  ```jsx Linear theme={null}
  <Area type="linear" dataKey="uv" stroke="#8884d8" fill="#8884d8" />
  ```

  ```jsx Step theme={null}
  <Area type="step" dataKey="uv" stroke="#8884d8" fill="#8884d8" />
  ```

  ```jsx Natural theme={null}
  <Area type="natural" dataKey="uv" stroke="#8884d8" fill="#8884d8" />
  ```
</CodeGroup>

## Fill opacity and gradients

<CodeGroup>
  ```jsx Opacity theme={null}
  <Area 
    type="monotone" 
    dataKey="uv" 
    stroke="#8884d8" 
    fill="#8884d8"
    fillOpacity={0.3}
  />
  ```

  ```jsx Gradient fill theme={null}
  <defs>
    <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
      <stop offset="5%" stopColor="#8884d8" stopOpacity={0.8}/>
      <stop offset="95%" stopColor="#8884d8" stopOpacity={0}/>
    </linearGradient>
  </defs>
  <Area 
    type="monotone" 
    dataKey="uv" 
    stroke="#8884d8" 
    fill="url(#colorUv)"
  />
  ```
</CodeGroup>

## With dots

```jsx theme={null}
<Area 
  type="monotone" 
  dataKey="uv" 
  stroke="#8884d8" 
  fill="#8884d8"
  dot={{ stroke: 'green', strokeWidth: 2, r: 4 }}
  activeDot={{ r: 8 }}
/>
```

## Area with labels

```jsx theme={null}
<Area 
  type="monotone" 
  dataKey="uv" 
  stroke="#8884d8" 
  fill="#8884d8"
  label={{ fill: 'red', fontSize: 12 }}
/>
```

## Connect nulls

Handle null or undefined values in the data.

```jsx theme={null}
const dataWithNull = [
  { name: 'Page A', uv: 4000 },
  { name: 'Page B', uv: null },
  { name: 'Page C', uv: 2000 },
  { name: 'Page D', uv: 2780 },
];

<Area 
  type="monotone" 
  dataKey="uv" 
  stroke="#8884d8" 
  fill="#8884d8"
  connectNulls={true}
/>
```

<Note>
  Set `connectNulls={true}` to draw the area across null values. By default, gaps will appear.
</Note>

## Multiple areas (non-stacked)

```jsx theme={null}
<AreaChart width={600} height={300} data={data}>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="name" />
  <YAxis />
  <Tooltip />
  <Legend />
  <Area type="monotone" dataKey="uv" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} />
  <Area type="monotone" dataKey="pv" stroke="#82ca9d" fill="#82ca9d" fillOpacity={0.6} />
</AreaChart>
```

## Percent stacked area

```jsx theme={null}
<AreaChart 
  width={600} 
  height={300} 
  data={data}
  stackOffset="expand"
>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="name" />
  <YAxis tickFormatter={(value) => `${(value * 100).toFixed(0)}%`} />
  <Tooltip formatter={(value) => `${(value * 100).toFixed(2)}%`} />
  <Legend />
  <Area type="monotone" dataKey="pv" stackId="1" stroke="#8884d8" fill="#8884d8" />
  <Area type="monotone" dataKey="uv" stackId="1" stroke="#82ca9d" fill="#82ca9d" />
</AreaChart>
```

## Common pitfalls

* **Overlapping areas**: When using multiple non-stacked areas, set `fillOpacity` to see all areas clearly.
* **Missing fill**: Both `stroke` and `fill` props should be set for proper area rendering.
* **Stacking**: Use the same `stackId` on all areas that should be stacked together.
* **Tooltip event type**: AreaChart only supports `'axis'` tooltip event type.