mailinapp
Documentation menu

Waterfall block

A running-total chart — a start value, then a sequence of increase and decrease bars that float between the running total before and after each one, optionally landing on an authored "total" bar partway through or at the end. It's the standard shape for a revenue bridge: "Starting MRR" → new business → expansion → churn → "Ending MRR."

How it works

Each authored row becomes a bar that either adds a signed delta to the running total (an increase or a decrease) or resets the running total outright to an absolute value (a total or subtotal anchor). That's a real geometric difference from the funnel chart, not just a styling one: a funnel bar always starts at zero and shrinks monotonically, while a waterfall bar floats — its left edge sits wherever the running total already was, and its right edge sits wherever it ends up, which can move in either direction.

Increase, decrease, and total bars always draw in the same three reserved colors, never author-overridable for the increase/decrease pair — the same "red always means bad" trust rule the product applies to every status color, so a waterfall reads consistently across every email rather than however you last happened to pick colors. Only the neutral Total color is a real authoring choice, defaulting to the project's brand color when left blank.

The always-visible data table beneath the image repeats every bar's Label, Value, Type (Increase/Decrease/Total), and Running total after that bar — the running-total column is the one number genuinely specific to this chart type, since only a sequence of floating deltas has a meaningful "where things stood after this bar" figure. The legend only lists the roles actually present among the authored bars — a chart with no total bar shows no "Total" swatch nobody used.

Like the funnel, bar order is the data: the running-total math depends on the order you typed the rows in, so past 8 bars, anything beyond the cap is dropped rather than folded into a synthetic bucket the way pie/treemap does with overflow slices — merging two bars together would silently corrupt the running total every bar after it depends on. A blank label or an unparseable value is skipped, not counted as a real zero-value bar.

Configurable fields:

  • Chart title — optional heading text above the chart.
  • Bars (in order) — the row-list: a Label, a numeric Value (a signed delta, or an absolute value when the row is marked as a total), and a Type cell — type it as total (case-insensitive) to make that row an absolute anchor; anything else, including a blank cell, is a plain delta.
  • Total color — overrides the neutral color used for total/subtotal bars; leave blank to use the project's brand color. Increase and decrease colors aren't configurable.
  • Background color, padding, border and border radius on the card.
  • Title color/size and legend color/size — text styling for the heading and the legend/table text beneath the image.

If no bars are authored yet, the block renders its title and card chrome with a plain "Add at least one row of data to render this chart" notice instead of the image.

Examples

A monthly revenue bridge — Starting MRR, New business, Expansion, Churn, Ending MRR — is the canonical use, dropped into a board update or an investor digest so the reader sees exactly what moved the number without a spreadsheet attached. A headcount report can bridge Starting headcount → Hires → Departures → Ending headcount for a monthly ops recap. A product team tracking a feature rollout's error budget could bridge a starting budget against categorized incidents that consumed it, landing on a remaining-budget total bar.

What the static fallback looks like

<div style="margin:12px 0;background-color:#ffffff;padding:16px">
  <p style="margin:0 0 8px;font-weight:600;font-size:15px;color:#111827">Monthly MRR bridge</p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="280"
       alt="Waterfall: Starting MRR 12,000 (total) → New business +3,200 → Expansion +1,400 → Churn -1,800 → Ending MRR 14,800 (total)" />
  <table style="width:100%;border-collapse:collapse;margin-top:4px">
    <tr>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Label</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Value</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Type</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Running total</th>
    </tr>
    <tr>
      <td style="padding:4px 8px">Churn</td>
      <td style="padding:4px 8px">-1,800</td>
      <td style="padding:4px 8px">Decrease</td>
      <td style="padding:4px 8px">13,000</td>
    </tr>
  </table>
</div>

The <img>'s alt text spells out every bar's value and role; the table adds the running-total figure that gives the bridge its name.

Related