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.

Waterfall

interactive · 5.59 kB · static · 3.12 kB

Install

Import & usereact/waterfall

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 },];

Needs package + stylesheetSet up with AI

Try it

Live playground

onActive

idle

—

hover · rove · click…

Hover or arrow through the steps — each announces its delta and the running level.

open · 60

total bar

delta labels

positive

readout

animate

import { Waterfall } from "@microcharts/react/waterfall/interactive";// steps — real values under “Sample data” below<Waterfall  data={steps}  open={60}/>

Sample data

const steps = [  { label: "Product", value: 42 },  { label: "Services", value: 18 },  { label: "Refunds", value: -12 },  { label: "Opex", value: -26 },  { label: "FX", value: 5 },];

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

no step labels

P&L rows

cost bridge (down is good)

Variants

signed step labels vs no total bar

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.

costs: down is good

Edge cases

all losses

zero-delta step

Four homes

In a sentence

Net income bridged from $60k to $87k this quarter — Product and Services carried it past Refunds and Opex.

In a table cell

Core		+27
Labs		−3
Field		−2

In a KPI card

Q2 net income

$87kfrom $60k

In a tab header

RevenueCosts

Preview uses the public chart API only. When an interactive twin exists, it swaps in with the same props and no entrance motion - code samples stay on the static import. Placement recipes: Composition, Sizing.

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, press Escape, or press outside the chart. 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.