# Area chart

> A smooth trend line with a comparison period and an inspectable crosshair.

Component · Pro · https://lodeui.com/components/area-chart

## When to use

- One metric over time, optionally against the previous period.

## When not to use

- Several series: use a line chart with a legend.
- Part-to-whole: use a donut chart.

## Installation

```bash
npx shadcn@latest add @lode/area-chart
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { AreaChart } from "@/components/ui/area-chart";

const data = [
  { label: "Sep 1", value: 1210, previous: 1080 },
  { label: "Sep 2", value: 1340, previous: 1150 },
  { label: "Sep 3", value: 1290, previous: 1190 },
];

export function Visitors() {
  return <AreaChart data={data} height={240} />;
}
```

## API reference

### AreaChart

A smooth monotone line with a gradient fill, a dashed comparison line and a hover crosshair.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| data | `{ label: string; value: number; previous?: number }[]` | – | Points in order. |
| height | `number` | `260` | Height in px; width fills the container. |
| showPrevious | `boolean` | `true` | Draw the dashed comparison line. |
| yTicks / xTicks | `number` | `3 / 5` | How many axis labels to show. |
| formatValue | `(n: number) => string` | – | Tooltip number format. |

## Accessibility

- Summarize the trend in nearby text; the chart is visual support.
- The tooltip shows both values with line samples, not just colors.

## Motion

- Rises from the baseline on mount, then morphs between datasets.
- Datasets of different lengths are resampled so the line reshapes instead of redrawing.
- The y-axis scale eases with the data.

## Responsive behavior

- Measures its own width with ResizeObserver; tooltips clamp inside the chart.

## Performance

- Monotone cubic paths are recomputed per frame only during the 700ms morph.
- Comfortable up to a few hundred points; aggregate beyond that.

## Notes for AI

- Labels are shown as-is; pre-format dates.
- Set showPrevious={false} when you have no comparison data.

## Related

- [Line chart](https://lodeui.com/components/line-chart) — Multi-series lines with legend toggles, crosshair and shared tooltip.
- [Stacked area chart](https://lodeui.com/components/stacked-area-chart) — Stacked series above and below zero, morphing as the range changes.
- [Sparkline](https://lodeui.com/components/sparkline) — A tiny trend line that draws itself in.
- [Bar chart](https://lodeui.com/components/bar-chart) — Bars that grow in and morph between datasets, with a hover readout.