Kinetiq

KQ-549 · WATERFALL/STEPS

Waterfall Steps

A cash bridge that builds itself. Every bar grows from the running total the last one ended on, in cascade() order on glide, with rises drawn in success, falls in danger and hairline connectors drawing between them on flick; the closing bar lands on recoil, two visible bounces for the arrival the chart was building toward. Columns are a list of buttons: hover or focus reads a step's delta and running total, Left and Right walk them, Home and End jump to the totals.

KQ-549 · WATERFALL/STEPS
Coldbrook cash bridge$45,200
  • Opening, $42,000
  • Receipts, up $18,400, running total $60,400
  • Payroll, down $9,600, running total $50,800
  • Grants, up $6,200, running total $57,000
  • Fit-out, down $11,800, running total $45,200
  • Closing, $45,200

Hover or arrow-key a column

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/waterfall-steps

Props

steps
WaterfallStep[]
default —
Ordered changes between the opening and closing totals; a negative delta falls.
start
number
default —
Opening value the first step builds on.
format
(value: number) => string
default rounded en-US
Formats every number: the rolling readout, the caption total and the aria text.
height
number
default 200
Plot height in px. The width is fluid and measured, so the columns fit any container.
label
string
default —
Chart name; also the caption above the plot, opposite the closing total.
startLabel / totalLabel
string
default Opening / Closing
Column names for the two total bars.
onActiveChange
(index: number | null) => void
default —
Fires with the column index under the pointer or focus, or null when it clears.