# Stacked area chart

> Stacked series above and below zero, morphing as the range changes.

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

## When to use

- Components of a total over time, with losses below zero (new, expansion, churn).

## When not to use

- Independent series: use a line chart.

## Installation

```bash
npx shadcn@latest add @lode/stacked-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 { StackedAreaChart } from "@/components/ui/stacked-area-chart";

export function Mrr({ months, newMrr, churn }: { months: string[]; newMrr: number[]; churn: number[] }) {
  return (
    <StackedAreaChart
      labels={months}
      series={[
        { key: "new", label: "New", color: "var(--chart-1)", values: newMrr },
        { key: "churn", label: "Churn", color: "#ef4444", values: churn, negative: true },
      ]}
    />
  );
}
```

## API reference

### StackedAreaChart

Stacked bands above and below zero with a tooltip showing each series and the net.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| labels | `string[]` | – | X-axis labels. |
| series | `{ key; label; color; values; negative? }[]` | – | negative draws below zero. |
| height / formatValue | `number / (n) => string` | – | Size and number format. |
| showTotal | `boolean` | `true` | Net row in the tooltip. |

## Accessibility

- role="img"; the tooltip lists every series as text.

## Motion

- Morphs when the range changes, even when the number of points changes.

## Responsive behavior

- Measures its width; labels thin out to about seven.

## Performance

- Paths recomputed per frame only during the 600ms morph.

## Notes for AI

- Values for negative series are positive numbers; the chart flips them.

## Related

- [Area chart](https://lodeui.com/components/area-chart) — A smooth trend line with a comparison period and an inspectable crosshair.
- [Line chart](https://lodeui.com/components/line-chart) — Multi-series lines with legend toggles, crosshair and shared tooltip.
- [Revenue breakdown](https://lodeui.com/blocks/revenue-breakdown) — Recurring revenue split into new, expansion and churn, with a draggable range brush.