Blog
Charts from data

CSV to area chart online

An area chart is a line chart with the space under the line filled in. That fill changes what the reader perceives: instead of reading the slope, they read the accumulated bulk. Use it when the quantity is something that piles up — visits, orders, volume shipped.

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 single accumulating quantity measured over time
Zero baseline Mandatory here, unlike a plain line chart — the fill encodes area
Comfortable range 5 to 400 points
Fill opacity 16% so gridlines stay visible through the shaded region
Interpolation Slight curve tension; the line still passes exactly through every value
Output PNG at 2× scale, plus CSV, JSON and Markdown

When it misleads you

How it is calculated

The chart is built exactly like the line chart, with the fill extended from the line down to the zero baseline. Every parsing behaviour is identical: both decimal conventions, currency symbols stripped, empty cells drawn as gaps rather than zeros.

The fill is drawn at 16% opacity rather than solid. A solid fill hides the gridlines and makes it impossible to read a value off the chart, which defeats the purpose of having an axis at all.

The vertical axis includes zero. This is enforced, not optional, and it is the single most important difference between this page and the plain line chart.

Only the first numeric column is filled. Overlapping translucent regions from several series produce colours that exist in neither original and a reader cannot decode them, so several series belong in the stacked version.

Questions and answers

When should I use an area chart rather than a line?

When the quantity accumulates and the total bulk is meaningful — orders, visits, units shipped. For rates, ratios, temperatures and prices, a plain line is the correct choice.

Why can I not crop the vertical axis?

Because the fill turns the chart into an area comparison. Cropping the axis of a filled chart exaggerates differences far more than cropping a line, so this page does not allow it.

Can I overlay two areas?

Not here, deliberately. Two translucent fills overlap into a third colour that belongs to neither series. Use the stacked area version or a multi-series line chart.

The fill is too pale to see in my presentation.

It is intentionally light so gridlines and values stay readable. If you need a bolder look, export the CSV and restyle in your presentation tool where you control the whole slide.

Is anything uploaded?

No. The chart is built entirely inside your browser.

The opposite tool

Need it the other way round? Stacked area chart How a total and its composition changed over time

Related tools

All tools