Building an SVG Waterfall Chart by Hand
A waterfall chart shows how sequential positive and negative changes accumulate from a starting value to a final total.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Floating Bars Positioned by Running Total
Unlike a standard bar chart where every bar starts at the baseline, a waterfall chart's bars float, with each bar's vertical position determined by the running cumulative total before that step and its height determined by that step's individual change value.
- Each bar floats rather than starting from a common baseline
- Bar position comes from the running total before that step
- Bar height comes from that individual step's change value
Color Coding Increases, Decreases, and Totals
Waterfall charts conventionally use one color for positive changes, a contrasting color for negative changes, and a third neutral color for the starting and ending total bars, which anchor at the baseline rather than floating like the intermediate change bars do.
- Positive and negative changes use two contrasting fill colors
- Start and end total bars use a third neutral color for distinction
- Total bars anchor at the baseline rather than floating like change bars
Frequently Asked Questions
Why are waterfall chart bars called floating?
Intermediate bars don't start at the baseline — they begin wherever the running cumulative total sits before that step, appearing to float between the axis and the previous bar.
Should the starting and ending bars look different from the change bars?
Yes, totals conventionally use a neutral color and anchor at the baseline, which visually distinguishes them from the floating incremental change bars.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG