Skip to main content
Waterfall charts show running totals with up and down bars, ideal for visualising how sequential positive and negative values contribute to a cumulative result.

​
When to use

  • Financial analysis - Show income, expenses and profit
  • Explaining variance - Break down differences between starting and ending values
  • Incremental changes - Display step-by-step contributions
  • Budget vs actual - Analyze deviations

​
Basic example

const config: GraphConfig = {
  type: 'waterfall',
  data: {
    columns: [
      { key: 'category', label: 'Category' },
      { key: 'amount', label: 'Amount' }
    ],
    rows: [
      { category: 'Starting balance', amount: 10000 },
      { category: 'Revenue', amount: 25000 },
      { category: 'Operating costs', amount: -8000 },
      { category: 'Marketing', amount: -3000 },
      { category: 'Tax', amount: -4000 },
      { category: 'Ending balance', amount: 20000 }
    ]
  }
};

​
How it works

Waterfall charts automatically:
  • Start with the first value as the base
  • Show positive values as upward bars (increases)
  • Show negative values as downward bars (decreases)
  • Connect bars to show the running total
  • Display the final cumulative value

​
Data structure

Provide:
  • First column: Category labels
  • Second column: Numeric values (positive for increases, negative for decreases)
The chart calculates running totals automatically.

​
Data labels

Show values on each bar: 
const config: GraphConfig = {
  type: 'waterfall',
  dataLabels: {
    showDataLabels: true
  },
  data: { /* ... */ }
};