Waterfall
Waterfall bridges a start total to an end total with one signed bar per step.
- encodes
- bar position/length from a running level
- precision
- medium — label='delta' or the interactive readout for exact steps
- nodes
- ≤ 15 (≤ 7 step rects + connectors + total bar)
60 opening, five signed steps, 87 at the close. Waterfall is the P&L bridge in a table cell: one bar per delta, each starting where the last one left off. Sign is encoded by vertical direction from the running level AND by valence color, never color alone.
Install
import { Waterfall } from "@microcharts/react/waterfall";// steps — real values under “Sample data” below<Waterfall data={steps} open={60} title="Net income bridge" />Sample data
const steps = [ { label: "Product", value: 42 }, { label: "Services", value: 18 }, { label: "Refunds", value: -12 }, { label: "Opex", value: -26 }, { label: "FX", value: 5 },];Try it
When to use it
Use it for P&L bridges in table cells and net-change decomposition in KPI cards. For unordered category comparison use MiniBar, and keep any one bridge under about 8 steps.
Sizing
Variants
The zero-anchored total bar stays on by default, because floating bars alone can't be checked against a real total. Hairline connectors carry the running level between steps without adding ink.
Edge cases
Four homes
Accessibility
The accessible name states the endpoints and the split: "From 60 to 87 over 5 steps: +65 gains, −38 losses." The interactive entry steps through the bridge ("Refunds: −12, running 108.").
The interactive entry follows the shared interaction contract:
arrow keys rove between units on both axes, Home and End jump to the ends, and a click, tap, Enter or
Space selects a unit — pinning its readout so it survives blur, until you select it again or press Escape.
On touch, a tap pins and a drag scrubs.
Props
| Prop | Type | Notes |
|---|---|---|
| data* | { label; value }[] | Signed deltas in order. |
| open | number | Opening level (prior-period close). |
| totalBar | boolean | Zero-anchored closing total bar (default on). |
| positive | "up" | "down" | "down" = decreases are good (cost breakdowns). |
| label | "none" | "delta" | "delta" (default) prints each step's signed value in a band below the plot; the biggest movers win when labels would collide. |
| animate | boolean | interactiveOpt-in entrance motion when the chart mounts client-side — add import "@microcharts/react/motion" once. Inert on the server, on hydrated server HTML, and under prefers-reduced-motion. |
Plus the shared grammar — data, domain, color, title, summary, format — and the layout props (width, height, className, style) that every chart accepts. Interactive entries also share animate and live, and — wherever a chart has more than one navigable unit — onActive, onSelect, selectedIndex and defaultSelectedIndex; and — wherever the chart shows a hover value — readout. See the shared grammar.