CSV to Waterfall Chart

Give this page a column of steps and a column of changes and it draws the bridge: each bar starts where the last one finished, gains rise in green, losses drop in rust, and a Total bar closes the sequence. The arithmetic is done in your browser, the labels sit on the bars, and the numbers behind the picture download as CSV.

No file handy? Bridge a year of expense data · set Step to category and Change to amount.

Need to compute deltas before charting? Open the app

A waterfall answers one question: how did we get from there to here?

A bar chart ranks things. A line chart shows movement. Neither of them explains a movement, and explaining is the job people keep handing to the wrong shape. You started the quarter at 1.4 million and ended at 1.1, and the interesting content is not the two endpoints, it is the four things in between that made up the difference. Written as a table that is a column of numbers with signs on them, and a reader has to hold a running sum in their head while scanning down it. Drawn as a bridge, the running sum is the picture.

The mechanic is simple enough to state in one sentence, so I will state it rather than hide it. Two bar series are stacked in the same slot. The lower one is the riser and is painted transparent, and its height for each step is either the running total before that step, when the step is a gain, or the running total after it, when the step is a loss. The upper one is the bar you actually see, drawn at the absolute size of the change. The riser is marked silent, which means it never claims a hover, never appears in a tooltip and never picks up an emphasis color when you mouse over its column. Everything ends up on one shared value axis, so the heights are genuinely comparable rather than being two overlaid charts pretending to be one.

Then the page appends a category called Total with a riser of zero, so the final bar stands on the baseline and its height is the closing balance. It is drawn in the accent color rather than in green or rust, because it is not a movement and it should not be judged as one. That distinction sounds pedantic until you meet a bridge where every step was a loss and the closing balance was still healthy: a green Total bar in that chart would be a small lie told in paint.

Five controls, and File order is the important one

Step. The category down the x axis, one bar per distinct value. In practice this is a stage name, an expense category, a month, a driver of variance, or a scenario label. Repeated values are combined rather than drawn twice.
Change. The numeric column holding the movement. Positive lifts the running total, negative drops it. This column must hold deltas, not balances, and that is the single most common thing to get wrong on the first try.
Aggregate. Sum, average, count, count distinct, minimum, maximum or median, applied within each step before the bridge is built. Sum is the default and is very nearly always what a waterfall wants, because a bridge adds up. Average is occasionally right when each step is a rate, and median is there when a handful of enormous rows would otherwise define a step on their own.
Sort. Biggest first, smallest first, label A to Z, label Z to A, or File order. This page opens on File order, alone among the chart tools here, because the row order in your file is the story you wrote and a bridge that has been re-sorted by magnitude is no longer a narrative. Change it when you want a contribution ranking instead, and the running total is recomputed for the new sequence.
Show. Top 5, 10, 20, 50 or everything. On a waterfall this doubles as a legibility control, since value labels are printed only when there are twenty bars or fewer.

The value axis formats itself from the role of the Change column. If the values carry currency symbols, the ticks read $0, $25k, $50k, and the bar labels and the tooltip use the same formatting, so nothing on the panel disagrees with anything else on the panel.

Worked example: where the expense budget went

The sample expense file has seven columns. The first rows:

date,employee,category,merchant,amount,currency,status
2024-01-03,C. Nakamura,Contractors,Fieldwork Ltd,1747.97,USD,approved
2024-01-05,E. Novak,Travel,Acme Air,573.78,USD,approved
2024-01-08,C. Nakamura,Hardware,Bitshop,2105.98,USD,reimbursed
2024-01-11,M. Okafor,Software,Tabletop Cloud,318.40,USD,pending

Set Step to category and Change to amount. The panel titles itself amount by category, the kicker in the corner reads BRIDGE, and the caption underneath reads Sum of amount · file order · 6 steps + total. Six green bars climb from the baseline, each one starting at the top of the one before it, with $41.2k, $28.9k, $19.4k and the rest printed in mono just above them. A seventh bar in the accent color stands on the baseline at the far right, labeled Total, at $118.6k.

Every step is green here because every expense row is a positive amount, which is exactly what an expense export looks like and exactly why this first chart is a cumulative build rather than a variance bridge. To get the more interesting shape, add a sign: in the app, multiply amount by minus one for rows where status is reimbursed, then chart the result. Now the reimbursed steps drop in rust while the rest climb in green, the running total dips and recovers, and the Total bar lands on net spend. That is a chart somebody can act on.

Switch Sort to Biggest first and watch what changes: the same seven bars, the same total, an entirely different reading. Contractors now leads and the tail shrinks toward the right, which answers the question what dominates our spending rather than what happened, in order. Both are legitimate charts. Only one of them is a bridge, and that is why the default is where it is.

Download the bridge saves a two-column CSV of step and value, in the drawn order, with the Total row included. Paste it under the chart in your deck and the appendix cannot contradict the picture above it.

Files that bridge well

A waterfall is picky about its input in a way a bar chart is not. These are the shapes that work without preparation:

Budget versus actual variance. One row per driver, each holding the signed difference. Volume, price, mix, currency, one-offs. This is the canonical bridge and it is the reason the shape exists in finance decks at all.
Headcount movement. Opening headcount, hires by source, transfers in, transfers out, attrition, closing headcount. The negative steps carry the whole message.
Revenue build. New business, expansion, contraction, churn, reactivation. Four of those five are typically negative in a bad quarter, and a bridge is the only shape that shows a bad quarter honestly without editorializing.
Cash movement. Receipts and payments by category over a period, with the closing balance as the Total. Bank exports usually come out this way already, sign included.
Inventory reconciliation. Opening units, received, sold, damaged, returned, counted. The gap between the computed Total and the physical count is what the chart is really for.

What all of these have in common is that the rows are already differences. If yours are levels, difference them first. A minute in the app with a calculated column beats a chart that is off by an order of magnitude and looks plausible.

Getting the bridge out of the browser

Download PNG. Two-times pixel density on the panel's own background, not a transparent one, so it does not become a black rectangle on a dark slide.
Copy image. The identical PNG placed on your clipboard. It goes into a document, a ticket or a chat message without a file ever landing on disk.
Download SVG. The chart is rendered again through a vector renderer, so you get real paths and real text. Sharp at poster size, and editable in Illustrator or Figma when the green has to become somebody's brand green.
Download the bridge. The steps and their values as CSV, in drawn order, with the appended Total.

The preview table under the chart carries the same rows, and Copy to clipboard puts them there as CSV. To put the bridge on a web page instead of in a document, the embed builder compresses the data and the configuration into the URL of an iframe, so the chart renders from a link with nothing stored anywhere.

What this page will not do

The genuine edges, stated plainly, because these are the ones people run into:

No mid-chart subtotals. Every bar except the appended Total is a movement. There is no per-row flag that says rebase here, so a bridge with an intermediate gross-margin bar has to be split into two charts.
It will not difference your data for you. Balances charted as changes produce a bridge that is confidently wrong. Compute the deltas first.
No connector lines between bars. The bars themselves make the staircase visible, and thin dashes across the gaps mostly add ink. If you need them for a house style, take the SVG and add them in a vector editor.
Value labels stop past twenty bars. Not a setting, a legibility floor. Reduce Show and they return.
Only one bridge at a time. No small multiples, no side-by-side scenarios. Chart them separately, or build a dashboard if you want several panels from one file.
No filtering. Every row in the file goes into the bridge. Filter in the app first, or split the file with the CSV splitter.
A header row is required. A file whose first line is data will be charted with data as column names.

Frequently Asked Questions

How does a bar float in the middle of the chart?

There are two bar series stacked on each other, and the lower one is invisible. That lower series is the riser: for each step it holds the height the visible bar has to start at, which is the running total before the step for a gain, and the running total after the step for a loss. The riser is drawn in transparent and is marked silent, so it takes no color, catches no tooltip and appears in no legend. What you see is only the second series, sitting on air. It is the oldest trick in bridge charting and it is still the correct one, because it keeps every bar on a single shared value axis instead of inventing a second coordinate system.

Where does the Total bar come from?

The page adds it. After the last step is placed, the running total is appended as one more category called Total, with a riser of zero so it stands on the baseline like an ordinary column. It is drawn in the single accent color rather than green or rust, because it is not a change, it is the sum of the changes, and painting it green whenever the ending balance happens to be positive would make the color lie. If your file already contains a total row, delete it before charting or you will see the total twice.

Why are the gains green and the losses rust?

Because on this site a hue is only allowed to mean one thing. Green is upward movement everywhere it appears, rust is decline, amber flags an outlier, and the categorical palette is reserved for encodings where the color separates categories rather than judging them. A waterfall is the clearest case for that rule: the sign of each step is the entire point of the chart, so the sign gets the color, and nothing else on the panel competes for it. Both hues are checked for separation under the common forms of color vision deficiency in light and dark mode, so the reading survives a projector too.

Why is Sort set to File order instead of biggest first?

Because in a bridge the sequence is the meaning. Opening balance, then the four things that happened, then the closing balance is a sentence, and sorting it by magnitude scrambles the sentence into a ranking. Every other chart page here defaults to biggest first, since a ranking is usually what a bar chart is for. This page is the exception and it opens on File order deliberately. You can still switch to biggest or smallest first if what you want is a contribution ranking rather than a narrative, and the running total will simply be recomputed in the new order.

Why did the value labels disappear from my bars?

Because there are more than twenty bars, counting the Total. Up to twenty, each bar carries its formatted value in monospace just above it, which is what makes a waterfall readable in a screenshot or on paper where no tooltip exists. Past twenty the labels start colliding with each other and with the neighboring bars, and a row of overlapping smudged numbers is worse than none. Lower the Show setting to Top 10 or Top 20 and the labels come back.

My CSV has balances, not changes. Can I still chart it?

Not directly. A waterfall consumes deltas, so a column of month-end balances will be read as twelve enormous steps that pile up to twelve times the real number. Convert the balances to period-over-period differences first, in the app or in your spreadsheet, then chart the difference column. The one exception is a file that is already structured as an opening figure followed by changes, which is what most finance exports look like, and that charts correctly as it stands.

Can I mark a bar as a subtotal in the middle?

No. Every bar except the appended Total is treated as a change that moves the running balance, and there is no per-row flag that says stop here and rebase. That is a real limitation of this page rather than an oversight, and the honest workaround is to split the file into two waterfalls at the point where you wanted the subtotal, or to chart the segments separately and place them side by side in a document.

What happens to rows whose value is not a number?

They are excluded from the running total and counted in a note under the chart. A blank cell, a dash or the text N/A is not a step of zero, and silently treating it as zero would shift every bar after it without saying a word. Currency symbols, thousands separators and accounting parentheses are all read as numbers, so a column holding $1,204.15 and (2,500) works without cleaning, and the parentheses are correctly understood as negative.

Build the bridge

Drop the CSV, pick the step and the change, take the PNG. No sign-up, no upload, no row cap.

Back to the waterfall maker