Skip to content
plot.tools

CSV to chart

Open a CSV file and see it as a chart. The file is read on your device; it is not uploaded.

What this page does

  • Comma, semicolon, tab and pipe separators
  • Decimal point or decimal comma, detected
  • Quoted fields with commas and line breaks
  • Header row detected
  • Currency signs, % and thousands separators stripped
Bar chart: Orders per quarter. 2 series (This year and Last year) across 4 categories, from Q1 to Q4. This year: highest 580 (Q4), lowest 420 (Q1). Last year: highest 495 (Q4), lowest 380 (Q1).Orders per quarterSample data: this year against last yearThis yearLast year0100200300400500600Q1Q2Q3Q4420510465580380430470495
PNG scale

SVG 1600 × 900 px · PNG 3200 × 1800 px · 16:9

No account and no watermark. The file has the Inter font embedded, named layers and the chart’s alt text, so it looks the same in a slide, a document or a browser. Not every app reads alt text stored in a file, so also paste it into the image’s alt text field.

Alt text: Bar chart: Orders per quarter. 2 series (This year and Last year) across 4 categories, from Q1 to Q4. This year: highest 580 (Q4), lowest 420 (Q1). Last year: highest 495 (Q4), lowest 380 (Q1).

Your data

First column: labels. Other columns: one series each. The file is read in your browser and is not uploaded.

Table

4 × 2

Label
Remove row

Design

Chart type

Direction
Series

Text

Numbers

Colours

Output

Proportion

320 to 4000 px. PNG multiplies it by the scale.

Background
  1. Step 1: Pick a chart typeBar, line, pie, scatter, area or radar. You can switch at any time.
  2. Step 2: Put in your numbersPaste cells from Excel or Google Sheets, load a file, or type in the table.
  3. Step 3: Download the pictureA PNG for slides and documents, or an SVG you can edit.

Start from an example

Click one to load it in the editor, then replace the sample numbers with yours.

Other chart makers

Each page opens the editor on that chart, with a short guide to reading and drawing it well.

Load a CSV and the separator and decimal mark are detected: comma or semicolon, 1,234.5 or 1.234,5. The file is read in your browser and is not uploaded.

How to turn a CSV into a chart

  1. In the Data panel, choose “Load CSV or XLSX” and pick the file, or drag the file onto the paste box. You can also open the CSV in a text editor, copy it and paste it.
  2. Read the line that appears under the box. It reports the rows and series found, the separator and the decimal mark.
  3. If something was guessed wrong, change “Decimal mark” or “First row” and the table is read again.
  4. Pick a chart type, adjust the design and download the SVG or PNG.

What the file should look like

Month,Online,Store
Jan,1200,860
Feb,1350,790
Mar,1580,910

The first row names the columns. The first column holds the labels. Each further column is a series of numbers. A file without a header row works as well: the series are then named “Series 1”, “Series 2”, and you can rename them in the table.

Separators and decimal marks

“CSV” covers several dialects. Programs set to English write commas between fields and a point in decimals. Programs set to Portuguese, German, French or Spanish usually write semicolons between fields, because the comma is the decimal mark:

Mês;Online;Loja
Jan;1.200,50;860,00
Fev;1.350,75;790,25

Both are read. The separator is chosen by testing which one splits the first lines into the same number of columns. The decimal mark is decided from the numbers themselves: when a number has both marks, the last one is the decimal; a comma followed by one or two digits is a decimal comma; “1,234” on its own is read as one thousand two hundred and thirty-four.

What is cleaned up, and what is not

  • Currency signs, percent signs and spaces around numbers are removed: “$1,250.50” and “45 %” become 1250.5 and 45.
  • Negative numbers in parentheses, such as (120), and with a typographic minus are understood.
  • Quoted fields may contain the separator, quotes and line breaks.
  • Text in a number column becomes an empty cell and is reported.
  • Dates are kept as text and used as labels in the order of the file. They are not sorted or spaced by time.

From a spreadsheet instead

If the data is open in Excel or Google Sheets, you do not need to export a CSV: copy the cells and paste them. See Excel to chart. To choose a chart type for the data, the chart maker page has a short guide.

Why use Plot Tools

What you can check for yourself, without taking our word for it.

No account, no watermark
The download buttons work straight away. The exported file holds your chart, your text and the font, and nothing else.
Your data stays in the browser
Pasted cells and loaded files are parsed and drawn on this page. There is no upload step, and the site’s security policy only allows connections to itself.
The PNG matches the screen
The Inter font is embedded in the SVG before it is rasterised, so the labels in the PNG sit exactly where you saw them.
Decimal comma understood
1.234,56 and 3,5 are read correctly: the separator and the decimal mark are detected from the data, and you can override both.
Defaults a data editor would accept
Round axis marks, solid fills, one colour per series, bars that start at zero, and a square background that can be transparent.
Colour-blind-safe by default
The default palette is Okabe-Ito. A test in the code simulates red-green colour blindness and checks that its colours stay apart.
A link that carries the chart
“Copy link” packs the data and settings into the part of the address after #, which browsers do not send to servers.
Alt text written for you
A description is generated from the data and stored in the SVG and the PNG. Line and area charts also say how each of the first four series ends compared with its start. It is shown under the chart with a button to copy it.

Questions and answers

Which CSV formats are read?

Files separated by comma, semicolon, tab or pipe, with or without a header row, with fields in double quotes when they contain the separator or a line break. A byte-order mark at the start is ignored.

My numbers use a comma as the decimal mark. Will they be read correctly?

Yes. The decimal mark is detected from the numbers in the file: 1.234,56 and 3,5 are read with a decimal comma, 1,234.56 with a decimal point. The result is shown under the import box, and you can override it there.

A number like 1.234 is ambiguous. How is it read?

As one point two three four. A lone group of three digits after a point cannot be told apart from a thousands separator, so the default is the decimal point. If your file means one thousand two hundred and thirty-four, set “Decimal mark” to Comma after importing.

Is the file uploaded?

No. The browser reads the file and the page parses it. Nothing is sent to a server.

What if a cell is not a number?

In a value column, text such as “n/a” becomes an empty cell and is drawn as a gap. The import message says how many cells were left empty.

How large can the file be?

A table can have up to 500 rows and 12 series. A larger file is cut to that size, and the import message says so.