Waterfall chart
Opening to closing value, one step at a time.
Definition · Updated Nov 2, 2026
A waterfall chart shows how an opening value turns into a closing value through a run of gains and losses. Each bar starts where the last one ended, so you see which step moved the total and by how much. Use it for cash bridges, profit walks and budget against actual.
Pay once. Every update included.
Live preview
Sample data: Q3 2026 cash bridge, $1.82M opening to $1.91M closing
- Data shape
- Opening total, signed steps, closing total
- Good for
- Cash bridges, profit walks, budget against actual
- Avoid when
- Steps have no order, or the parts make up one whole
- Sizes
- XS, S, M and L, re-laid out from the data
Anatomy
Inspect it like the Figma file.
The same layers, names and tokens as the component. Select one to read its size, fill and style.
Layers
042 / Waterfall
- Layer
- step · sales
- Type
- Rectangle
- Size
- 70 × 72
- Fill
- status/success
- Radius
- 3
- Group
- Marks · 7
Layers
042 / Waterfall
- Layer
- step · sales
- Type
- Rectangle
- Size
- 38 × 45
- Fill
- status/success
- Radius
- 3
- Group
- Marks · 7
Layers
042 / Waterfall
- Layer
- step · sales
- Type
- Rectangle
- Size
- 22 × 38
- Fill
- status/success
- Radius
- 3
- Group
- Marks · 7
Sizes
Re-laid out, never scaled.
The same data at XS, S, M and L. Every size is redrawn from the data, so text and line weights never shrink.
M against S
Width360 px480 px
Plot328 px440 px
Labels1217
Marks77
Height212 px246 px
Same tokens at every size: text styles, 1 px lines and mark radius stay put.
When to use
A bridge between two totals.
Three signs it fits, and three signs another type fits better.
Do the steps run in a set order?
No order and no running total.
Yes: Keep the waterfall
Does it start and end with a total?
A trend, not a bridge between two totals.
Yes: Keep the waterfall
Does each step feed only the next one?
A step feeds more than one next step.
Yes: Keep the waterfall
Code and Figma
One name in Figma and in code.
Every Figma property is a prop with the same name and values. One command installs it.
Figma
chart/042-waterfall-cash-bridge
npx shadcn add @chartory/waterfallimport { Waterfall } from "@/components/chartory/waterfall"import { cashBridge } from "./cash-bridge"export function CashBridge() { return ( <Waterfall data={cashBridge} size="m" legend={true} /> )}Hearth widget
Waterfall as a widget.
The chart in a Hearth card with a hero number and two blocks. One token set, light and dark.
EmberPreset
ChartoryDefault preset
Pick the blocks, the size and the preset for your own widget.
Read the Hearth widget docsFAQ
Waterfall questions.
What people ask before they put a waterfall in a dashboard.
Something else?
hello@usechartory.comBars start from zero and compare values side by side. A waterfall starts each step where the last one ended, so the bars show how one total became another.
An opening total, then signed steps in order, then the closing total. The sample cash bridge comes with the component, so you can start from it and swap in your own.
Yes. Mark a step as a subtotal and it is drawn up from zero, like the opening and closing totals, while the steps after it carry on from it.
Gains and losses take the preset’s success and danger colours, and the totals take the color property. Change the preset to recolour every waterfall at once.
XS, S, M and L, in light and dark. Each size is laid out again from the data, so text and lines keep their size.
Yes. It plays in when it scrolls into view, and when the data changes every mark moves from its old place to its new one. With reduced motion on, it does not move.
Yes. The React component is free in the public registry in Hearth, no token needed; Signal comes with Code and Complete. The Figma component comes with Figma and Complete.
Ask for it by name. The MCP server tells the agent what data it needs and runs the same command: npx shadcn add @chartory/waterfall. You review the diff.
Related types
Other ways to show flow between steps.
The same question, a different shape of answer. Every type ships in Figma and in code.
Same family
Flow between steps
Where volume goes: funnels, bridges and cycles.