Docs › Chart types

Waterfall chart

From revenue to operating profit: steps up and down with total bars.

type: 'waterfall' reads values as steps: each bar starts where the previous one ended. A { total: true } point is a total bar from zero; without y it shows the running total so far, with y it uses that value (start with { y: 1250, total: true }). Dashed connectors join the bars and each bar gets its value (+35, -260).

Live example

Code for this example

createChart('#chart', {
  type: 'waterfall',
  title: 'Operating profit bridge',
  subtitle: 'Q3 2026',
  prefix: '$',
  data: {
    labels: ['Revenue', 'Cost of sales', 'Gross profit', 'SG&A', 'Other income', 'Operating profit'],
    series: [{ name: 'Amount', data: [{ y: 12500, total: true }, -7800, { total: true }, -2600, 350, { total: true }] }],
  },
});

Colors: by default (deltaColors: 'semantic') increases are green and decreases red, swapped with deltaUpIsGood: false; deltaColors: 'korea' makes increases red and decreases blue. Total bars are gray (or the series color).
The tooltip shows the step and the running total after it. The data table and CSV hold the computed totals.
Value labels are on by default and skipped when wider than their band; dataLabels: false turns them off, true always writes them.