CSV to bar or line chart

How to use it

1. Paste your data into the box, or open a .csv file. Copying a block of cells straight out of Excel, Google Sheets or Numbers works too: those paste as tab-separated text, and the delimiter is detected automatically.
2. Check the label column. It defaults to the first column that is mostly text, such as months or product names. Every column that is at least 80% numbers is offered as a series.
3. Tick the series you want, choose bar or line, and give the chart a title.
4. Download the SVG. The file contains the colours that were showing on screen, so a chart made in dark mode downloads with its dark background.

How the data is read

The parser follows RFC 4180, the closest thing CSV has to a standard. A field wrapped in double quotes can contain commas, line breaks and quotes written twice ("say ""hi""" reads as say "hi"). A byte-order mark at the start of the file, which Excel adds to UTF-8 exports, is ignored, and Windows and Unix line endings both work.

To guess the delimiter, the tool parses the first rows with comma, semicolon, tab and pipe in turn and keeps the one that gives the most consistent number of columns. Semicolons matter because spreadsheets in much of Europe use a comma as the decimal mark and a semicolon between fields. If the guess is wrong, set the delimiter yourself.

Numbers are read the way people type them into spreadsheets: 1,234.5, $1,000, 12% (read as 12), and accounting negatives such as (250). A comma is only treated as a thousands separator when it sits in groups of three, so 1,23 is rejected rather than guessed at. European decimal commas such as 3,5 are not converted; change them to points first.

A worked example

The sample has twelve months and two series, online and in-store orders. The bar chart shows each month as a pair of bars. December has the largest values (861 online and 977 in store), and the y axis runs from 0 to 1,000 in steps of 200. The axis maximum comes from a "nice number" rule: the range is divided into about five steps, and each step is rounded up to 1, 2, 2.5 or 5 times a power of ten. That is why the ticks read 200, 400, 600 rather than 195.4, 390.8 and so on.

Switch to a line and the axis is fitted to the data, from 300 to 1,000. Online orders more than double across the year, from 412 to 861, which reads as a steep climb in the second half. On the bar chart the same change is still visible but less dramatic. That difference is the reason for the next section.

Choices the tool makes for you, and why

Choice	Rule used here
Bar baseline	Always zero. A bar's length is its value.
Line baseline	Fitted to the data, zero optional
Missing value in a line	The line breaks, never bridges the gap
Colours	Eight fixed slots, always in the same order
Legend	Shown for two or more series only
Crowded labels	Angled, then thinned to at most 24

The colours are assigned by position: the first series you tick is always blue, the second orange, and so on. The order was checked with a colour-vision-deficiency simulation so that neighbouring series remain distinguishable for the most common forms of colour blindness. Some light colours are pale against a white background, which is one reason the page also prints every value as a table. Hover over any bar or point to see its exact value.

Where this tool stops being the right one

It draws one chart type at a time on one y axis. There is deliberately no second y axis: two scales on one chart let the author make any two lines appear to move together. If two series have very different sizes, chart them separately. It does not parse dates, so time runs in the order your rows are in and gaps between dates are not spaced proportionally: if a month is missing from your rows, its neighbours are simply drawn next to each other. With several hundred rows, the labels thin out and bars become slivers; a histogram or a pivot that summarises first usually says more. For shares of a total, use the pie chart maker.