Waterfall Chart
Waterfall charts explain how sequential changes lead from a starting value to an ending value — perfect for breaking down profit, cost, or throughput differences.
Example do and don't images
Do's
-
Group related drivers.
Show inflows and outflows together for logical reading.
-
Use consistent colour for gains and losses.
Green for positive, red for negative keeps interpretation instant.
-
Label subtotals clearly.
Mark checkpoints like 'After returns' or 'After damages' for clarity.
Don'ts
-
Don’t overload minor steps.
Group small contributors into an 'Other' bar to keep focus.
-
Avoid missing intermediate totals.
Without checkpoints, readers lose track of the cumulative story.
-
Never flip directions mid-flow.
Up should always mean increase, down decrease.
Use cases
-
Warehouse throughput drivers
Show how receipts, damages, and dispatches explain stock changes.
-
Budget variance analysis
Reveal where spending diverged from plan.
-
Customer churn walk
Track acquisitions, losses, and net change.
Common Mistakes to Avoid
Even experienced analysts make these errors. Here's how to spot and fix them:
Overcomplicating the visual
Why it's bad: Too much information overwhelms the viewer and obscures the message.
Fix: Focus on one clear message per chart. Use multiple simple charts instead of one complex one.
Poor color choices
Why it's bad: Can make data hard to read or inaccessible to colorblind viewers.
Fix: Use colorblind-safe palettes and ensure sufficient contrast.
Missing context
Why it's bad: Data without context (targets, benchmarks, time period) is meaningless.
Fix: Always include titles, labels, units, and reference points.
Accessibility Guidelines
Make your visualizations accessible to everyone, including users with visual impairments, color blindness, or who rely on screen readers.
Color Considerations
Use colorblind-safe palettes:
- Avoid: Red-green combinations (8% of men are red-green colorblind)
- Use: Blue-orange, purple-yellow, or add patterns/textures
- Test: Use tools like Color Oracle or Coblis to simulate color blindness
Recommended palettes:
Contrast & Legibility
Meet WCAG 2.1 standards:
- Text contrast: Minimum 4.5:1 for normal text, 3:1 for large text
- Chart elements: 3:1 contrast between adjacent colors
- Labels: Use dark text on light backgrounds (or vice versa)
Font guidelines:
- Minimum 12pt for body text, 14pt+ preferred
- Avoid decorative or overly thin fonts
- Use bold for emphasis, not color alone
Screen Reader Support
Essential elements:
- Alt text: Describe the chart's key insight, not just "bar chart"
- Data tables: Provide raw data as an accessible table alternative
- Aria labels: Use aria-label for interactive elements
Example alt text:
"Bar chart showing sales increased 30% from Q1 to Q2, with Q2 reaching $2.5M. Technology had the highest growth at 45%."
Additional Techniques
Don't rely on color alone:
- Use patterns, textures, or shapes to differentiate categories
- Add direct labels to data points when possible
- Use icons or symbols alongside colors
Interactive features:
- Ensure keyboard navigation works (tab, arrow keys)
- Provide text summaries of key findings
- Allow users to toggle between visual and tabular views
📖 Helpful Resources
- Color Oracle: Free color blindness simulator for Windows, Mac, Linux
- WebAIM Contrast Checker: Test color contrast ratios
- ColorBrewer: Colorblind-safe color schemes for maps and charts
- WCAG 2.1 Guidelines: Full accessibility standards for web content
Story tip
Waterfalls narrate change step by step — great for financial or operational reconciliations.