Waterfall

Waterfall answers "how did the deltas compose into the total?" — the P&L bridge, in a cell. 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" />

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

• Good for — P&L bridges in table cells, net-change decomposition in KPI cards.
• Avoid for — unordered category comparison (MiniBar), or more than ~8 steps.

Sizing

Variants

Edge cases

Four homes

Why this default

The zero-anchored total bar stays on by default: a waterfall without a grounded total is unverifiable — floating bars alone can't be checked against reality. Hairline connectors carry the running level between steps without adding ink.

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

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.