Stacked area chartPro
Stacked series above and below zero, morphing as the range changes.
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
Usage
Import it from @/components/ui/stacked-area-chart after installing.
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.
This page as Markdown, for assistants and coding agents:
/components/stacked-area-chart/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt