Blog
Charts from data

CSV to stacked area chart online

This is the chart for showing how a total grew and how its composition shifted at the same time. The top edge traces the total; each coloured band is one component. It answers "did we grow, and did the mix change" in a single picture.

Your data never leaves this device

Your data

Paste a table straight from Excel or Google Sheets, or drop a CSV file. Nothing is uploaded anywhere — the whole calculation runs inside this browser tab.

CSV, TSV or plain text. Files saved in windows-1251 are detected and re-read automatically, so Cyrillic headers do not turn into garbage.

Parsing options

Columns

Result

The drawing library is downloaded only when you press the button, and only on this page.

This page has no server side at all. The table you paste is parsed by JavaScript inside your own browser, the chart is drawn on a canvas element on your machine, and the export file is assembled locally. Nothing is uploaded, stored or written to any log. You can disconnect from the network after the page has loaded and everything will still work — which is the simplest way to verify the claim yourself.

Facts and limits of this method

Best for A total made of 2–5 components tracked over time
What is reliable The top edge (the total) and the bottom band
What is not Middle bands — they float on everything below them
Prerequisite The components must sum to a meaningful total at every point in time
Zero baseline Mandatory and structural
Output PNG at 2× scale, plus CSV, JSON and Markdown

When it misleads you

How it is calculated

The label column becomes the shared horizontal axis. Every numeric column becomes a band, stacked from the bottom in column order, with each band drawn from the top of the one below it.

Fills are more opaque here than in the single-series area chart — bands need to be told apart, and translucency that works for one region turns into mud when five overlap.

The vertical axis starts at zero because the stack is built upward from zero. The top edge is therefore a true total, and it can be read off the axis directly.

The order of your columns is the most consequential decision on this page. Put the component you most want the reader to judge accurately in the first column, so it lands on the flat bottom band.

Questions and answers

Why does a middle band look like it is growing when the numbers say otherwise?

Because it is riding on the bands below it. Its thickness is what matters, but the eye tends to read its top edge, which moves whenever anything underneath moves. Check the exported numbers rather than trusting the shape.

Which component should go at the bottom?

The one whose behaviour matters most, because the bottom band is the only one drawn against a flat line and therefore the only one that can be judged accurately.

Stacked area or 100% stacked?

Stacked area when both the total and the mix matter. If the total is a distraction and only proportions count, use the 100% stacked chart.

Can I use negative values?

No meaningful stack exists with mixed signs. Split positive and negative contributions into separate charts, or use a waterfall.

Does my data leave the browser?

No. Everything is computed and drawn locally.

The opposite tool

Need it the other way round? CSV to area chart A line with the space beneath it filled in

Related tools

All tools