Deck

Waterfall slide

The quantified bridge on the VI canvas: title top-left, the waterfall chart owning the right region full-height. The schema gives an opening level, signed movements, and a closing label; the closing value is computed here (start + Σ steps), so the bridge always reconciles.

Install

npx shadcn@latest add @alix/waterfallSlide

Preview

From last year's EBITDA to this year's

£m · Illustrative; Northwind management accounts

Usage

import { WaterfallSlide } from "@/components/deck/waterfallSlide";

<WaterfallSlide
  title="From last year's EBITDA to this year's"
  unit="£m"
  start={{ label: "FY24", value: 46 }}
  steps={[
    { label: "Volume", value: 9 },
    { label: "Price", value: -4 },
    { label: "Mix", value: 3 },
    { label: "Input costs", value: -6 },
    { label: "Efficiency", value: 5 },
  ]}
  end={{ label: "FY25" }}
  source="Illustrative; Northwind management accounts"
/>

Examples

01

A cost-base bridge

Any quantified bridge fits: cost, headcount, working capital. Signed steps net down or up; the closing bar is computed and never stated in a step.

Where the cost base lands

£m · Illustrative

<WaterfallSlide
  title="Where the cost base lands"
  unit="£m"
  start={{ label: "Baseline", value: 120 }}
  steps={[
    { label: "Procurement", value: -8 },
    { label: "Logistics", value: -5 },
    { label: "Overtime", value: -4 },
    { label: "Inflation", value: 6 },
  ]}
  end={{ label: "Run-rate" }}
  source="Illustrative"
/>
02

The bridge always reconciles

Because the closing value is start + Σ steps, the arithmetic can't drift: FY24 46 + 9 − 4 + 3 − 6 + 5 = 53 (FY25), whatever the deck JSON supplies.

From last year's EBITDA to this year's

£m · Illustrative; Northwind management accounts

// end has a label only; the renderer computes its value:
// 46 + 9 − 4 + 3 − 6 + 5 = 53
end={{ label: "FY25" }}

When to use it

Use it for

  • Any quantified bridge: EBITDA, cost, headcount, working capital.
  • Signed deltas as steps; the closing value is computed, so never state the total in a step.
  • One- or two-word bar labels (they sit on an axis), and a source, where the credibility lives.

Reach for something else

  • Stating the closing total as a step. It's computed from start + Σ steps.
  • Headline figures that don't net to a total: use StatsSlide.
  • A bare chart with no slide chrome: use the WaterfallChart directly.

Props

PropTypeDefaultDescription
titlestring–The slide title, on the canvas title row.
unitstring–Optional unit line under the title, e.g. "£m".
start{ label: string; value: number }–The opening total: the first anchor bar.
steps{ label: string; value: number }[]–Signed movements in order. Positive reads as an increase, negative as a decrease; the running level carries between them.
end{ label: string }–The closing anchor, label only. Its value is computed (start + Σ steps), so the bridge always reconciles.
sourcestring–The credit line; joins the footer meta row ahead of any other meta.
metastring[]–Additional deck chrome for the footer meta row.

See also

Waterfall chartStats slideVI layout