Make a chart from CSV data

Paste a table or open a CSV file. The tool reads the columns, suggests the chart that suits the data and draws it as you type: column, bar, line or area, grouped or stacked, light or dark. Download the chart as SVG for documents and websites or as PNG for slides and chats. Everything runs in your browser.

CSV to Chart

or drop a file here. It stays on this device.

How it works

  1. Paste your table into the editor or open a .csv, .tsv or .txt file. The first row must name the columns.
  2. Check the chart type (a suggestion is made from the data), the column with the category labels and the columns to plot. The chart updates as you change anything.
  3. Add a title, axis titles or a source line if you like, pick light or dark and a size, then download the SVG or PNG. Hover over the chart or use the arrow keys to read each value.

Questions

Which chart should I choose?

Columns compare values across a handful of categories; bars do the same for many categories or long names and grow taller to fit every row; a line shows change over time or along any ordered sequence; an area is a single line with the space below it shaded. Stacked columns or bars show how parts add up to a whole. The tool suggests one from your data (dates or periods suggest a line, many or long names suggest bars) and says why; you can always pick another.

Why is there no pie chart?

Pies make close values hard to compare, because people judge angles and areas less accurately than lengths. A stacked bar shows the same part-to-whole story with values you can compare, so the tool offers that instead.

How are my numbers read?

Plain numbers, thousands separators (1,234 or 1 234), a currency sign before or after ($, €, £, ¥), a trailing % and accounting brackets for negatives (such as (1,200)) are understood. Whether a comma or a dot marks decimals is detected from the data, or you choose. Empty cells are gaps: no column is drawn and a line breaks. A column is offered for plotting when at least half of its filled cells are numbers; a cell that is not a number (such as n/a) is left out and named in the notes with its row. A column whose header names a code (barcode, SKU, ID, phone, 编号, 条码, 电话, 单号) and that holds whole numbers is offered but not ticked at first, and the page says why: its numbers are labels, not amounts. When every value carries the same currency sign or %, the axis shows it too. Values written beside the marks are rounded to 2 decimals (3 significant digits below 1), or to the axis's decimals when it has more; from a million they are written with M, B or T (in full digits when the axis needs more than three decimals of those), and below 0.0001 or from a quadrillion with a power of ten (such as 2e-8). A value that is not zero is never written as 0, and a zero is written as 0, so it is not taken for an empty cell. The axis has as many decimals as its steps need, so no two of its numbers read the same. The readout and the table give every value in full, as read; the SVG's description sums each series up by its highest and lowest values, also in full; and a stacked total is the exact sum of the values as read.

How are the colours chosen, and are they colour-blind safe?

Series take eight colours in a fixed order, following the order of the ticked columns: the first ticked series is always the first colour, so unticking a series moves the colours of the series after it up by one. Every other option (chart type, sort order, stacking, title, size, theme) leaves each series with its colour. The order was tested so that neighbouring series stay distinguishable for people with red-green colour blindness, and the dark theme uses its own steps of the same colours tested against the dark background. Three of the light colours are paler than 3:1 against white, so the chart keeps values or series names written next to the marks, every chart with two or more series has a legend, and the page shows a table of every value. For print or for readers who cannot tell colours apart at all, switch on hatched fills.

What exactly is in the downloads?

The SVG is a standalone vector file with the title and a text description built in for screen readers; it scales to any size and can be edited in design tools. Its text uses the system font of whoever opens it. The PNG is drawn by your browser at 1×, 2× or 3× the chosen size (2× is sharp on most screens), within 16,000,000 pixels and 32,767 pixels a side; the page states its size in pixels. Both have a filled background unless you choose transparent; with a transparent background, pick the colour theme that matches the page the chart goes on. Both are named after the file you opened, or after the chart's title, which keeps its letters and numbers in any script (a Chinese title gives a Chinese name).

Are there limits?

A chart shows up to 8 series; tick fewer for a calmer chart. Column charts need room for every column, so very many categories are refused with a suggestion to use bars (which grow taller, up to 500 rows) or a line. The editor opens files up to 16 MB, read as UTF-8. When category labels do not all fit under the axis, only every second or third is written; the readout and the table always show every one. A very tall bar chart's PNG is drawn at a lower resolution, below 1× when it must, so that it stays within 16,000,000 pixels and 32,767 pixels a side, as browsers limit what they draw; the notes give its size, and the SVG keeps every detail. If a browser still cannot make the PNG, the page says so and the SVG download works.

Is my text uploaded?

No. The page loads a small script into your browser and every operation runs on your device. You can check this yourself in the browser's network panel: after the page has loaded there are no upload requests. Closing the tab discards the text.

Do I need an account or to pay?

No. These basic tools are free and add nothing to your data. The only limits are the tool's own: files up to 16 MB, up to 8 series per chart, bar charts up to 500 rows. Within them, the practical limit is your device's memory.

What does this page keep in my browser?

Nothing you open or type. While the tab is open, the tool pages keep a short list of the steps taken in it, in the tab's session storage: the step (page opened, started, succeeded, first success, used again or failed), the tool's name, the time, how many files were used and, for a failure, an error code; never a file name, the contents of a file or your text. It holds at most the latest 200 steps, and the browser deletes it when the tab closes. The page never sends it. Where a Report a problem button is shown, you can attach the last 20 steps to your report; nothing is attached unless you tick that box. In local storage the page keeps only choices you made: a Light or Dark theme until you choose System again, the language you picked with the EN / 中文 switch if it differs from your browser's language, and this tool in your recently used list if you switched that list on at the tools page.

Questions or problems

Found a problem or missing feature? Tell us. Please describe the steps; do not send confidential data.