WaterfallChart

Contributions float above a running total; result rows drop to a full zero-based bar. Subtractions carry higherIsBetter: false, so a cost increase reads as unfavorable in the variance panel.

When to use

Variance contribution / bridge - explain how a total got from A to B (e.g. revenue → costs → operating income), as a chart rather than a table.

Example

import { WaterfallChart } from "ibcs-react";

<WaterfallChart
  data={[
    { category: "Revenue", value: 30.1e6, flow: "add" },
    { category: "COGS", value: 9.7e6, flow: "subtract", higherIsBetter: false },
    { category: "Gross margin", value: 0, flow: "result" },
  ]}
  scenario="AC"
/>;

A result row needs no value - the component computes the running total. Pass comparisonData (the same categories for another scenario) to get a variance panel; mark decides whether those deviations draw as bars or pins.

For long line labels, lay the bridge on its side with HorizontalWaterfallChart; for a statement with embedded variance columns use StatementTable.

Props