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

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

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

Areas with the same stackId will be stacked on top of each other.

Area types

Different interpolation types for the area curve.

Monotone

<Area type="monotone" dataKey="uv" stroke="#8884d8" fill="#8884d8" />

Fill opacity and gradients

Opacity

<Area 
  type="monotone" 
  dataKey="uv" 
  stroke="#8884d8" 
  fill="#8884d8"
  fillOpacity={0.3}
/>

With dots

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

Area with labels

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

Connect nulls

Handle null or undefined values in the data.

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

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

Multiple areas (non-stacked)

<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

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