Stats & Numbers
Waterfall Chart
Shows how a run of gains and losses builds a start total into an end total, step by step. Positive and negative steps carry their own glyph and position so the direction reads without relying on colour, with a plain-text breakdown underneath for screen readers.
$ velocityx add waterfall-chartBuilt for astro.
Full docs for Waterfall Chart →
Needs a licence key —
subscribe here, then
velocityx loginonce.
Jan revenue
$142,000
New accounts
$18,400
Expansions
$6,200
Churn
$9,100
Discounts
$2,300
Dec revenue
$155,200
| Step | Change | Running total |
|---|---|---|
| Jan revenue | — | $142,000 |
| New accounts | $18,400 | $160,400 |
| Expansions | $6,200 | $166,600 |
| Churn | −$9,100 | $157,500 |
| Discounts | −$2,300 | $155,200 |
| Dec revenue | — | $155,200 |
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| start | number | Yes | ||
| steps | WaterfallStep[] | Yes | ||
| startLabel | string | No | 'Start' | |
| endLabel | string | No | 'End' | |
| unit | string | No | '' | |
| decimals | number | No | 0 | Decimal places for the value formatter. |
| height | number | No | 220 | |
| className | string | No | '' |
File this creates
The CLI writes this path into your project, relative to its root — nothing else moves.
components/velocity/waterfall-chart/WaterfallChart.astroUsing the Waterfall Chart component
Install it with velocityx add waterfall-chart.
The CLI writes the source straight into your project — no runtime dependency, no registry
lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.
Related components
More from Stats & Numbers.
Stat band whose numbers count up when the section scrolls into view, then settle. No runtime dependency — plain Astro plus a small inline observer. Honours prefers-reduced-motion by rendering final values immediately.
astroPuts two numbers on one shared scale and calls out the delta — the proof-point shape for 'we cut your load time' or 'conversion rate before vs. after' case studies. Ships a screen-reader summary alongside the bars, so the comparison reads correctly even without the visual.
astroOne headline figure sized to carry a section on its own, with a short annotation line underneath for context. Locale-safe number formatting (including compact '4.2M' notation) and a count-up that lands on the real value immediately for reduced-motion users.
astroThe compact way to show actual-vs-target on a scorecard row: a thin fill against a qualitative poor/satisfactory/good band, with a tick marking the target, so a whole KPI reads in the space a single number used to take. Values stay in text too, so it holds up for anyone who can't read the bar visually.
astro