Waterfall

The createWaterfall helper accumulates a list of signed steps into floating bars: increases and decreases ride the running total, and total steps drop a full bar back to the base.

Open in demo ↗

// createWaterfall accumulates signed steps into floating bars — one series
// per direction (increase / decrease / total), each row filling exactly one.
import { createWaterfall } from '@mochart/core';
import type { MochartInputConfig } from '@mochart/core';

const waterfall = createWaterfall([
  { label: 'Product revenue', value: 420 },
  { label: 'Services revenue', value: 210 },
  { label: 'Gross revenue', total: true },
  { label: 'Cost of goods', value: -180 },
  { label: 'Operating expenses', value: -95 },
  { label: 'Marketing', value: -60 },
  { label: 'Tax', value: -22 },
  { label: 'Net income', total: true }
]);

export const config: MochartInputConfig = {
  version: '1.0.0',
  title: { text: 'Income Statement (fictional, $k)' },
  categoryAxis: waterfall.categoryAxis,
  valueAxes: [{ title: '$ thousands' }],
  series: waterfall.series
};

export const data = waterfall.data;

How it works

• Each item is { label, value } for a delta step, or { label, total: true } for a total bar showing the running total so far (give a total a value to reset the running total, e.g. an audited closing balance).
• The floating bars are three ordinary bar series — increase, decrease, total — all spanning from the shared start property via rangeProperty. Every row carries a value for exactly one of them, and missingValues: 'connect' with partialRangeIsMissing keeps the other two from rendering (start exists on every row, so without partialRangeIsMissing they would collapse to zero-height bars instead of skipping), so each slot shows one full-width bar while the legend still names the three directions.
• The default direction colors are aqua/red/blue rather than the conventional green/red: green↔red is the classic red-green-blindness collision, while this triple keeps every pair distinguishable on light and dark surfaces. Override per direction with colors, and rename the series with seriesTitles.
• base sets the value the running total starts from and total bars span from (default 0). When it's not 0, also set the value axis base so delta bars near it read correctly.
• Each row also carries delta, cumulative and direction, and the computed steps come back under steps — or call computeWaterfallSteps(items, base) alone for the math without the chart fragments.
• The floating deltas visualize signed changes without ever plotting below the axis; for charts whose bars themselves cross zero, see positive and negative values.