Waterfall

​

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

• 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

• First column: Category labels
• Second column: Numeric values (positive for increases, negative for decreases)

​

Data labels

const config: GraphConfig = {
  type: 'waterfall',
  dataLabels: {
    showDataLabels: true,
  },
  data: {
    /* ... */
  },
};

​

Related

• Column - Standard column chart
• Data labels - Display bar values