Stacked Area Chart
Bands stacked on a shared baseline, wiping in from the left. Install with npx remotion-ui@latest add stacked-area-chart.
PrimitiveData & mediaAdvanced
$ npx remotion-ui@latest add stacked-area-chartComposition over time: bands stacked on one baseline, uncovered left to right.
import { StackedAreaChart } from "@/remotion/primitives/stacked-area-chart";
<StackedAreaChart
series={[
{ label: "Reels", values: [140, 210, 300, 430, 520] },
{ label: "Ads", values: [90, 130, 210, 300, 340] },
]}
labels={["Jan", "Mar", "May", "Jul", "Aug"]}
durationInFrames={62}
/>The reveal is a wipe, not a fade
A clip travels across the plot. A stacked area is read as a history, so uncovering it in time order is the only reveal that agrees with the axis underneath it — an opacity fade or a vertical grow says the values changed, which they did not.
Bands are drawn bottom-up, each trailing the one below by
bandOffsetInFrames, so the stack assembles in reading order rather than as one
moving wall.
Stacking
Each band's upper edge is the sum of every series at or below it, and that same edge is the next band's floor. Pass series in the order you want them stacked; the first is the baseline band.
Both edges of a band are smoothed with the same spline and the lower one is walked backwards to close the shape, so the two curves meet exactly instead of leaving a sliver at the seam.
Axis
The value axis is snapped to round numbers off the total stack, not off any one series, so the top of the chart is the top of the sum.
The reveal is a clip travelling across the plot, not a fade or a vertical grow: a stacked area is read as a history, so uncovering it in time order is the only reveal that agrees with the axis. Band edges share one spline and the lower edge is walked backwards to close the shape, so no sliver appears at the seam.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/stacked-area-chart- Use when: data stories, metrics, charts, and numeric proof points.
- Customize: series, labels, width, height, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { StackedAreaChart } from "@/remotion/primitives/stacked-area-chart";
<StackedAreaChart
series={[
{ label: "Reels", values: [140, 210, 300, 430, 520] },
{ label: "Ads", values: [90, 130, 210, 300, 340] },
]}
labels={["Jan", "Mar", "May", "Jul", "Aug"]}
durationInFrames={62}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| series | StackedSeries[] | required | `{ label, values, color? }`, first entry is the baseline band. |
| labels | string[] | undefined | Category labels along the x axis, one per value. |
| width | number | 880 | Drawing width. Type scales off it. |
| height | number | 460 | Drawing height. |
| showAxis | boolean | true | Gridlines and value labels down the left gutter. |
| showLegend | boolean | true | Series names above the plot, arriving with their band. |
| showBoundaries | boolean | true | Hairline along the top of each band. |
| fillOpacity | number | 0.85 | Band fill opacity. |
| durationInFrames | number | 60 | Length of the wipe across the whole plot. |
| bandOffsetInFrames | number | 8 | Frames one band trails the band below it by. |
| exitAtInFrames | number | undefined | Frame the stack retreats on, top band first. |
| frame | number | undefined | Frame override — pass the parent frame inside a `<Sequence>`. |