Chart 10 of 15

Waterfall

Use it to explain a change: opening balance, what came in, what went out, closing balance. Totals stand on the baseline; changes float and connect with a dashed rule.

Live demo

Made-up data. Try the options, then switch to the empty and one-point states.

Hover a bar for its amount. Labels alternate in height on narrow screens so they do not collide.

How to use it

JavaScript
const chart = waterfall({
  steps: [
    { label: 'Start',     value: 4200, total: true },
    { label: 'Salary',    value: 3100 },
    { label: 'Housing',   value: -1210 },
    { label: 'Groceries', value: -438 },
    { label: 'End',       value: 5652, total: true }
  ],
  height: 300,
  label: 'How the balance changed in September'
});

Options

steps
[{ label, value, total?, colour? }]. value > 0 adds, value < 0 subtracts; total: true restarts from zero at that value.
height
Chart height.
label
aria-label.