synthetic
WaterfallChart
A starting total, a run of increases and decreases, and the ending total.
Harbour rebrand budget bridgeFrom the approved budget to the forecast
In context
Project reviewThe bridge sits under the summary a lead reads first
Harbour rebrand
Forecast is £48,900 against £48,200 approved, due 24 Oct.
Props
| Prop | Type | Required | Default |
|---|---|---|---|
steps | WaterfallChartStep[] | Yes | — |
title | string | undefined | No | — |
ariaLabel | string | undefined | No | — |
height | number | undefined | No | 340 |
yFormat | ((v: number) => string) | undefined | No | (v: number) => Math.round(v).toLocaleString() |
bionic | boolean | undefined | No | — |
bionicOptions | BionicOptions | undefined | No | — |
Colours
Totals (isTotal) are drawn from zero in the primary colour; increases in the success colour, decreases in the danger colour, joined by dashed connectors.
data-rebar-* attributes
data-rebar-component="waterfall-chart" on the root <figure>.
Migrating to Ant Design
Not codemod-covered. AntD ships no chart components (it recommends @ant-design/charts); reimplement against the charting library your project already uses.