# How to Make a Waterfall Chart in Figma (and Make It Reconcile)
_August 26, 2026 · 12 min read · by Systergon_
> A waterfall explains the difference between two totals as a sequence of named contributions — the profit bridge, the headcount reconciliation, the growth accounting decomposition. Mechanically it is a bar chart with a moving baseline, which is exactly where it goes wrong: the bars float, so none of them share a baseline and the reader has to be told which columns are totals. How to order the steps, how to build one in the four libraries that have no waterfall type, and why the arithmetic has to be checked first.
Tags: Figma, Charts, Waterfall Chart, Finance, Plugin
URL: https://systergon.com/blog/figma-charts-waterfall-chart
---
[Install Figma Charts — it’s free to try →](https://www.figma.com/community/plugin/1345221583582136577/figma-charts) [See the waterfall gallery →](https://systergon.com/figma-charts/chart-types/waterfall)

A waterfall chart answers one question, and answers it better than anything else: **we started here and ended there — what happened in between?** Each column is a change, floating at the level the previous change left it, so the eye walks down a staircase from the opening balance to the closing one and every rise and fall is a named contribution.

![A waterfall chart drawn by Highcharts inside the Figma Charts plugin](https://systergon.com/blog/figma-charts-waterfall-chart/images/waterfall-basic.svg)

_Real plugin output: a Highcharts waterfall captured from the editor. Every chart on this page is the library’s own drawing._

Mechanically it is a bar chart with a moving baseline, and that is exactly where it goes wrong: because the bars float, none of them share a baseline, so their _lengths_ are comparable but their _positions_ are not — and the reader has to be told which columns are totals and which are steps. This page is about getting both of those right.

## First — get the plugin

Everything below happens inside **Figma Charts**, a Figma plugin. It runs the real JavaScript charting libraries — Google Charts, Highcharts, D3-based Nivo, ApexCharts and Apache ECharts — inside the plugin window, so the columns on your canvas are the library’s own output.

[Install Figma Charts from the Figma Community →](https://www.figma.com/community/plugin/1345221583582136577/figma-charts)

Press **⌘/** (**Ctrl /** on Windows), type _Figma Charts_, hit Enter, and pick **Waterfall** from the category filter. It is one of the narrowest categories in the plugin — three examples, all Highcharts — and there is a fourth waterfall hiding somewhere else entirely, which the [library section](#libraries) explains.

## What the floating columns claim

A waterfall makes three claims at once, and all three have to hold:

- **The steps are additive.** Each column is a signed contribution to a running total. If your values do not add up to the ending balance, the chart is arithmetic that does not work.
- **The order is meaningful.** Unlike a bar chart, the sequence is part of the content: a waterfall reads left to right as a narrative. Reordering the middle columns is allowed only because addition is commutative — but the reader will infer chronology or causation from the order you chose, so choose it deliberately.
- **Some columns are totals.** The first and last — and often subtotals in between — are anchored to zero rather than floating. They are a different kind of object from the steps and must look like one.

Get that last one wrong and the chart becomes unreadable in a specific way: a total drawn as a step reads as an enormous single change, and a step drawn as a total reads as a balance. Every library exposes a flag for it; use it rather than styling around it.

## Four waterfalls, and one filed under another name

![A horizontal waterfall chart drawn by Highcharts](https://systergon.com/blog/figma-charts-waterfall-chart/images/waterfall-horizontal.svg)

_**Horizontal** — the same chart rotated, and the version to reach for when your step labels are phrases rather than words. “Currency effects” and “Price increases” each get a full line instead of being rotated to 45 degrees under a column._

![A stacked waterfall chart drawn by Highcharts](https://systergon.com/blog/figma-charts-waterfall-chart/images/waterfall-stacked.svg)

_**Stacked** — each step is itself broken into components, so a single “costs” movement can show which costs. It is the most information a waterfall can carry, and the point at which it starts asking a lot of the reader._

![A waterfall chart built from candlestick data in Google Charts](https://systergon.com/blog/figma-charts-waterfall-chart/images/waterfall-google-candlestick.svg)

_**And Google’s waterfall** — which lives in the Candlestick_ category, because that is how Google Charts builds one: a candlestick is a floating bar with a start and an end per category, which is precisely what a waterfall step is. Same primitive, different framing.

## When a waterfall is the wrong chart

**1. The parts are not signed contributions to a total.** If your categories are simply values — revenue by region — there is no running balance to walk, and a sorted [bar chart](https://systergon.com/blog/figma-charts-bar-chart) compares them better because every bar shares a baseline.

**2. You have more than about ten steps.** Each step needs a label and a value, and the staircase gets long and shallow. Past ten, group the small movements into an “other” step and say how many it contains — a waterfall with fifteen two-pixel columns has stopped explaining anything.

**3. The changes are tiny relative to the balance.** A chart that starts at 4.2m and ends at 4.3m spends its whole height on the part that did not change. The honest fixes are to chart the _changes_ alone as a bar chart, or to break the axis explicitly — never to truncate it silently, because a floating-bar chart with a cropped axis exaggerates every step at once.

A fourth: **when the sequence implies causation it should not.** A waterfall of price, volume and mix effects reads as though each caused the next. If the decomposition is simultaneous rather than sequential, say so in the title — “contributions to the change” rather than “how we got there”.

## The profit bridge, and how to order it

The commonest waterfall in the world is the profit bridge: last year’s figure on the left, this year’s on the right, and the movements between them. It is worth knowing the conventions, because a finance audience reads them as grammar.

**Group the movements by kind, not by size.** The standard sequence is volume, then price, then mix, then cost, then one-offs — because that order tells a causal story a business recognises: we sold more units, at different prices, of a different blend, against costs that moved for their own reasons. Sorting by magnitude instead produces a tidier staircase and destroys the narrative.

**Put subtotals where the argument has joints.** A bridge from revenue to gross profit to operating profit deserves anchored subtotals at each stage, because those are the numbers people quote. Each subtotal resets the baseline visually, which also stops a long bridge from drifting off the top of the frame.

**Keep one-offs last and label them as such.** A restructuring charge or a disposal gain buried in the middle of the sequence looks like operating performance. At the end, clearly labelled, it reads as what it is — and the subtotal before it is the number the reader actually wanted.

## Waterfalls for product metrics

The other place this chart earns its keep is a growth accounting bridge — last month’s active users to this month’s, decomposed into new, resurrected, churned and contracted. It is the clearest way to show that flat top-line numbers can hide enormous churn underneath, and the design has two specific requirements.

**The negative steps need as much room as the positive ones.** In most growth bridges the gross movements dwarf the net change: forty thousand new and thirty-eight thousand churned to produce a two-thousand net gain. That is the finding, and an axis scaled to the net change hides it. Scale to the largest movement, not to the difference between the totals.

**Two totals are not enough context.** A single month’s bridge cannot say whether this churn is normal. Either repeat the chart per period as small multiples, or pair it with a [line chart](https://systergon.com/blog/figma-charts-line-chart) of the same components over time — the bridge explains one period, the line says whether that period was unusual.

## Building one, step by step

Six screens, start to finish, captured from the plugin.

![The Figma Charts gallery filtered to the Waterfall category](https://systergon.com/blog/figma-charts-waterfall-chart/images/step-gallery.webp)

_**1. Filter to Waterfall.** Highcharts is the only library with the category — three examples: vertical, horizontal and stacked._

![The Figma Charts editor with a waterfall chart in the preview](https://systergon.com/blog/figma-charts-waterfall-chart/images/step-editor.webp)

_**2. The editor.** Live preview above, tabs below. Check the label treatment early: waterfall labels are longer than most chart labels because they are usually phrases._

![The Data tab showing the step labels and signed values behind a waterfall](https://systergon.com/blog/figma-charts-waterfall-chart/images/step-data.webp)

_**3. Signed values.** One row per step: a label and a value, negative for a decrease. The total columns are marked in the configuration rather than the data, which is the part that catches people out._

![The Configuration tab showing waterfall option groups](https://systergon.com/blog/figma-charts-waterfall-chart/images/step-config.webp)

_**4. Mark the totals.** This is the panel where a step becomes an anchored total, and where the up, down and total colours are set. Also where the connector lines between columns are turned on._

![The Export tab showing code export formats](https://systergon.com/blog/figma-charts-waterfall-chart/images/step-export.webp)

_**5. Export.** A working component for React, Vue 3, Angular, Svelte or vanilla JavaScript — the exported config carries the total flags, which are the settings most likely to be lost in a hand rebuild._

![The + SVG and + PNG insert buttons](https://systergon.com/blog/figma-charts-waterfall-chart/images/step-insert.webp)

_**6. Insert.** SVG gives you every column as a rectangle and every connector as a line, so re-labelling a step or highlighting the biggest drag happens on the canvas._

## The data shape it needs

A label column and one column of **signed numbers** — positive for an increase, negative for a decrease — with the totals identified as such. That is the ordinary cartesian table; there is no special editor, and a waterfall accepts a linked data source like any other bar-family chart.

Two things are worth planning before you build. First, **decide where the totals go**: opening balance, closing balance, and any subtotals you want anchored. Second, **check the arithmetic** — the sum of the steps plus the opening total must equal the closing total. A waterfall whose columns do not reconcile is the same failure as a [Sankey](https://systergon.com/blog/figma-charts-sankey-diagram) whose flows do not conserve, and it looks just as authoritative while being wrong.

The usual numeric caution has a specific consequence here: an unparseable cell becomes **0**, which in a waterfall is a step of no size — an invisible column whose label still appears on the axis, and a running total that silently stops reconciling.

## Library by library

The Waterfall category holds **three examples and one library**: Highcharts. That is the narrowest coverage of any Tier 1 or Tier 2 type in the plugin, and it needs the chip-versus-capability caveat more than most.

- **Highcharts — 3 examples**, and a proper waterfall series type with total flags, connector lines and both orientations, plus the stacked variant. If you want a waterfall configured rather than constructed, this is the tab. Commercial licence required to ship commercially.
- **Google Charts — one, filed under Candlestick.** Google has no waterfall type; it builds one out of the candlestick primitive, because a candlestick is already a floating bar with a start and an end. It is a genuine waterfall and it is not where you would look for it.
- **ECharts, ApexCharts and Nivo — no waterfall type**, and the standard workaround is well known: a **stacked bar chart with an invisible base series**. The first series is transparent and carries the offset, the second carries the movement. It works, it is what several charting libraries do internally, and it means the total flags and connectors are yours to build.

That workaround is worth knowing even if you use Highcharts, because it explains the chart: a waterfall _is_ a stacked bar chart whose bottom segment has been made invisible. Everything odd about the type — the floating bars, the missing shared baseline, the need to mark totals — follows from that.

As always: **design in whichever library your engineers already use**, because the export then matches production exactly. [Choosing the right chart library](https://systergon.com/blog/figma-charts-choosing-the-right-chart-library) covers the trade-offs.

## If your library has no waterfall type

Three of the five libraries have no waterfall series, and the workaround is worth spelling out because it is also the clearest explanation of how the chart works.

**Two stacked series.** The first is the invisible base — its value for each column is the running total _before_ that step, and it is styled with no fill and no border. The second is the movement itself. Stack them and the visible bars float at exactly the right height, because the invisible one is holding them up.

**Totals are a third series.** A total column has no base: it runs from zero to the balance, so it goes in its own series with a zero offset, which also lets it carry its own colour without fighting the up/down palette.

**Connectors are a scatter or a line series** with markers disabled, or annotations, depending on the library. This is the part most hand-built waterfalls skip, and skipping it is what makes them read as unrelated floating bars.

Building it this way means you own the arithmetic: the base series has to be computed from the cumulative sum of the steps, and it has to be recomputed whenever the data changes. That is fine for a designed chart and a real cost in a live product — which is a legitimate reason to pick Highcharts for a dashboard that needs one.

## Styling it well

**Three colours, and only three.** Increases, decreases and totals. Adding a fourth for emphasis breaks the convention the reader has just learned; if one step needs emphasis, use weight or an annotation instead.

**Avoid red and green as the pair.** It is the default in finance and the worst case for colour vision deficiency. A blue-and-orange pairing carries the same up-down meaning and survives; if the context demands red and green, add direction arrows or signs to the labels.

**Draw the connectors.** The thin lines linking the end of one column to the start of the next are what turn a set of floating bars into a staircase. Without them, a reader has to infer the continuity; with them, the chart reads in one pass.

**Label every column with its value, including the sign.** “−120k” rather than “120k” on a downward bar. The direction is already in the geometry, and repeating it in the number removes any ambiguity about what is being subtracted.

**Give the totals visual weight.** A darker fill, a heavier outline or a full-height column — something that says “this one is anchored”. The single most common waterfall failure is a total that looks like a step.

For type and colour, bind them to your design system rather than picking by hand — covered in [Your chart, your design system](https://systergon.com/blog/figma-charts-design-system-colors-typography-tokens).

## Reading it well — and the ways it misleads

**No shared baseline means no easy comparison.** Two steps of similar length at different heights are hard to rank by eye, which is the price the chart pays for showing the sequence. If ranking the contributions is the point, put a sorted bar chart of the same movements beside it.

**Order is rhetoric.** Because the steps are additive, any order produces the same ending balance — but the order determines which movements appear to drive the story and which look like adjustments at the end. Grouping all the negatives together makes a period look like a series of setbacks; interleaving them makes it look volatile. Pick an order for a stated reason: chronology, magnitude, or category grouping.

**A truncated axis exaggerates every step at once.** In an ordinary bar chart a cropped axis distorts the bars; in a waterfall it distorts the bars _and_ the apparent size of the total change, because the staircase occupies more of the frame. If the movements are small relative to the balance, break the axis visibly or chart the changes on their own.

**Stacked steps hide their own composition.** A stacked waterfall carries two levels of structure at once, and the segments inside a floating column have neither a shared baseline nor a fixed position. Use it when the breakdown is context; if the components are the subject, they deserve their own chart.

**Percentages do not waterfall.** Adding percentage changes is arithmetic that does not work — a 10% rise followed by a 10% fall is not zero. Waterfall the absolute values and put the percentages in the labels.

## Accessibility

**Do not encode direction in colour alone.** The signed value in the label does it for everyone, and it is the fix that requires no palette negotiation.

**Keep the connectors visible at low contrast.** They are usually the lightest element in the chart and they carry the continuity; if they wash out, the staircase becomes a scatter of rectangles.

**Give it a text equivalent.** The Export tab’s **Copy Alt Text**, **Copy Data Table** and **Set Node Desc** produce a description, a table of the numbers and a description written onto the Figma node. A waterfall’s table is unusually satisfying because the chart is a reconciliation — opening, movements, closing — and that is exactly what a table shows.

## Common questions

### What is a waterfall chart for?

Explaining the difference between two totals as a sequence of named contributions — opening balance, the rises and falls, closing balance. It is the standard chart for a profit bridge, a headcount reconciliation or a variance analysis.

### Which libraries can draw one?

Highcharts has a real waterfall series and three examples. Google Charts builds one from its _candlestick_ type — its waterfall example is filed under Candlestick. ECharts, ApexCharts and Nivo have no waterfall type; the standard workaround is a stacked bar chart with an invisible base series.

### How do I mark the total columns?

With the library’s total flag, not with styling. A total is anchored to zero while the steps float, so it is structurally different — and a total drawn as a step reads as one enormous change.

### How many steps should a waterfall have?

Ten or fewer. Beyond that the columns get thin, the labels collide and the staircase stops being legible. Group the small movements into a labelled “other” step and state how many it covers.

### Can I show percentages in a waterfall?

Not as the bars. Percentage changes do not add — a 10% rise then a 10% fall does not return you to the start. Chart the absolute movements and put the percentages in the labels.

### Why do my columns not reconcile?

Either a step is missing, or a value that should be negative is positive, or an unparseable cell became zero. The check is arithmetic: opening total plus the signed steps must equal the closing total, and the chart will happily draw a staircase that does not.

### Should the axis start at zero?

It should include zero wherever the totals are anchored there, because those columns encode length from the baseline. Where the movements are tiny relative to the balance and a zero axis wastes the frame, break the axis visibly rather than cropping it quietly.

### Does the chart stay editable in Figma?

Insert as **SVG** and every column is a rectangle, every connector a line and every label real text — which makes a waterfall one of the easier charts to annotate for a board pack. Insert as **PNG** for a flat image at twice the pixel density.

## Where to start

Open the plugin, filter to Waterfall, and put your reconciliation in — then add up the columns before you style anything. If the opening balance plus the movements equals the closing balance, you have a chart that will survive a finance review. If it does not, you have found the discrepancy, which is more valuable than the chart was going to be.

[Install Figma Charts — it’s free to try →](https://www.figma.com/community/plugin/1345221583582136577/figma-charts) [Browse all 45 chart types →](https://systergon.com/figma-charts/chart-types)