Appearance
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.
| Property | Default | Meaning |
|---|---|---|
isTotal | false | Show the running total here; ignore this column's own value |
startBar | false | Start a new sequence from zero, with no connector from the previous column |
showSegments | false | Render 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.