Waterfall chart
Bridge chart from a start to an end value with coloured up/down steps, connector lines, subtotal bars and value labels.
Preview
Recurring revenue, Q2 → Q3
Annualised| Step | Change | Running total |
|---|---|---|
| Q2 | $1.84M | |
| New | +$420K | $2.26M |
| Expansion | +$180K | $2.44M |
| Churn | −$260K | $2.18M |
| Downgrades | −$90K | $2.09M |
| Subtotal | $2.09M | |
| Pricing | +$130K | $2.22M |
| FX | −$40K | $2.18M |
| Q3 | $2.18M |
Monthly cloud cost
Increases shown in red| Step | Change | Running total |
|---|---|---|
| September | $61.2K | |
| GPU nodes | +$8.4K | $69.6K |
| Reserved | −$5.1K | $64.5K |
| Egress | +$1.9K | $66.4K |
| October | $66.4K |
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | { key: string; label: string; value: number; kind?: "start" | "delta" | "total" }[] | — | Steps; the first defaults to start, totals show the running sum. |
| label | string | — | Accessible name and table caption. |
| height | number | 280 | Height in px; width follows the container. |
| invert | boolean | false | Treat increases as bad (costs); colours flip. |
| valueFormatter | (value: number) => string | compact | Formats axis ticks and bar labels. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.