What it does
Waterfall Chart shows how a starting number turns into a final number — one step at a time. Add your items, pick Increase or Decrease for each, and the floating bars, dotted connector lines and totals are drawn for you.
Perfect for pricing breakdowns, revenue-to-profit stories, budget reports, "where does the money go" sections, and investor or fintech landing pages.
Customizable properties
- Items — label, type (Start, Increase, Decrease, Subtotal, Total) and value for each step
- Direction — vertical or horizontal
- Value labels — outside or inside the bars, with optional +/− signs
- Number format — currency symbol, thousands separator, decimals, suffix, and auto k/M shortening
- Colors — increase, decrease, total and start, plus text, grid, connector and background
- Axis — auto "nice number" ticks, grid lines and a zero baseline
- Tooltip — item, value and running total on hover or focus
- Animation — bars grow in one after another (stagger speed adjustable)
- Bar width, corner radius, padding and fonts
Why this component
- Totals calculate themselves: set a row to Subtotal or Total and it adds everything above it. Change one number and the whole bridge updates.
- Numbers look finished: $18.5k, −$4,900 or 12.5% in one click, no manual formatting.
- Bars animate in sequence when scrolled into view, and show instantly in the editor and for visitors who prefer reduced motion.
- Labels tilt automatically on narrow screens, and every bar has a screen-reader label.
Need help?
Email hello@brandingupstudio.com — we usually reply within 72 hours. Custom edits are available from $75/hr.
