Skip to content

Waterfall

js
{
  chartType: 'waterfall',
  isDataTransposed: true,
  seriesData: [
    ['', 'Start', 'Price', 'Volume', 'End'],
    ['Bridge', 100, 20, -10, null],
  ],
  waterfall: { columns: { 3: { isTotal: true } } },
  title: { visible: true, text: 'Bridge' },
  subtitle: { visible: false, text: '' },
}

Do not compute your own totals

This is the one thing to get right. A waterfall has two kinds of column:

  • Contribution columns (the default) add their value to the running total.
  • Total columns (isTotal: true) display the running total and contribute nothing. ChartBuddy sums them for you.

So a closing bar is not a number you type. Mark the column as a total and leave its cell empty — the value is computed, and any value you do type there is ignored:

js
seriesData: [
  ['', 'Start', 'Price', 'Volume', 'End'],
  ['Bridge', 100, 20, -10, null], // End has no value of its own
],
waterfall: { columns: { 3: { isTotal: true } } },

Typing 110 into End without marking it a total does not produce a total bar. It produces a fourth contribution of +110, and the bridge ends at 220.

waterfall.columns

Sparse, keyed by column index. Every key is optional; unlisted columns are plain contributions.

PropertyDefaultMeaning
isTotalfalseShow the running total here; ignore this column's own value
startBarfalseStart a new sequence from zero, with no connector from the previous column
showSegmentsfalseRender the total as per-series segments rather than one solid bar

Indices are data-column indices

Keys count the category columns only — they are indices into the header row after the row-label cell, not positions in the raw seriesData row.

js
seriesData: [
  ['', 'Start', 'Price', 'Volume', 'Mix', 'End'],
  //  ^0       ^1       ^2        ^3     ^4      <- waterfall.columns keys
  ['Bridge', 100, 18, -8, 5, null],
],
waterfall: { columns: { 4: { isTotal: true } } },

'End' sits at position 5 of the header array, but it is data column 4. Off-by-one here is silent: you mark a column that isn't the one you meant, and the closing bar renders as an ordinary contribution.

Column 0 is always a start bar

The first column is forced to isTotal: true and startBar: true whatever you pass, because a bridge has to begin somewhere. Unlike other totals, a start bar does use its own value — that is the opening balance.

Multiple sequences

To put two bridges side by side, mark where the second one begins. A mid-chart start bar needs both flags: startBar resets the running total, and isTotal is what makes it render as a solid opening bar rather than a floating contribution.

js
waterfall: {
  columns: {
    3: { isTotal: true },                    // close the first bridge
    4: { isTotal: true, startBar: true },    // open the second
  },
}

Sample

Live chart and copy-paste HTML: Waterfall sample.

Developer & LLM documentation · Not the end-user Help Center · Help Center