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

# Area chart

> Area charts for trends over a continuous interval — basic, stacked and gradient fills.

Area charts display quantitative data over a continuous interval, with the area between the axis and the line filled. They are ideal for showing trends over time.

## Basic area chart

```tsx theme={null}

const data = [
  { month: "Jan", visitors: 1200 },
  { month: "Feb", visitors: 1900 },
  { month: "Mar", visitors: 2400 },
  { month: "Apr", visitors: 2100 },
  { month: "May", visitors: 2800 },
  { month: "Jun", visitors: 3200 },
]

const chartConfig = {
  visitors: { label: "Visitors", color: "var(--chart-1)" },
}

<ChartContainer config={chartConfig} className="h-[300px]">
  <AreaChart data={data}>
    <CartesianGrid strokeDasharray="3 3" className="stroke-border" />
    <XAxis dataKey="month" className="text-xs fill-muted-foreground" />
    <YAxis className="text-xs fill-muted-foreground" />
    <Area
      type="monotone"
      dataKey="visitors"
      fill="var(--chart-1)"
      fillOpacity={0.2}
      stroke="var(--chart-1)"
      strokeWidth={2}
    />
    <ChartTooltip content={<ChartTooltipContent />} />
  </AreaChart>
</ChartContainer>
```

## Stacked area chart

For comparing multiple data series:

```tsx theme={null}
const chartConfig = {
  mobile: { label: "Mobile", color: "var(--chart-1)" },
  desktop: { label: "Desktop", color: "var(--chart-2)" },
}

<AreaChart data={data}>
  <Area
    type="monotone"
    dataKey="mobile"
    stackId="1"
    fill="var(--chart-1)"
    fillOpacity={0.3}
    stroke="var(--chart-1)"
  />
  <Area
    type="monotone"
    dataKey="desktop"
    stackId="1"
    fill="var(--chart-2)"
    fillOpacity={0.3}
    stroke="var(--chart-2)"
  />
</AreaChart>
```

## Gradient fill

For a polished look, use a gradient fill:

```tsx theme={null}
<defs>
  <linearGradient id="fillVisitors" x1="0" y1="0" x2="0" y2="1">
    <stop offset="5%" stopColor="var(--chart-1)" stopOpacity={0.3} />
    <stop offset="95%" stopColor="var(--chart-1)" stopOpacity={0.05} />
  </linearGradient>
</defs>
<Area
  type="monotone"
  dataKey="visitors"
  fill="url(#fillVisitors)"
  stroke="var(--chart-1)"
  strokeWidth={2}
/>
```

## Styling guidelines

* Use `fillOpacity={0.2}` for single-series charts
* Use `fillOpacity={0.3}` for stacked charts (so overlapping areas are visible)
* Use `type="monotone"` for smooth curves, `type="linear"` for straight segments
* Set `strokeWidth={2}` for the line stroke
* Use `CartesianGrid` with `strokeDasharray="3 3"` and `className="stroke-border"` for grid lines
* Use `className="text-xs fill-muted-foreground"` on axis components for themed labels

## Responsive sizing

Wrap in `ChartContainer` with a height class:

```tsx theme={null}
<ChartContainer config={chartConfig} className="h-[200px] sm:h-[300px] lg:h-[400px]">
  <AreaChart data={data}>...</AreaChart>
</ChartContainer>
```

The `ChartContainer` uses `ResponsiveContainer` internally, so the chart fills the available width automatically.