Chart maker: bar graph, line and pie chart

Type or paste your numbers, pick a chart and download it as SVG or PNG. Nothing is uploaded.

How it works

  1. Pick a chart type and type or paste your numbers
  2. Add a title, axis labels and value labels
  3. Download the chart as SVG or PNG

How to make a bar graph, line chart or pie chart from your numbers

To make a chart, pick a type, then fill in the table: one row per label and up to 4 columns of values, with a name for each column. The page opens on an example of sales by quarter in two products, so you can overwrite it or press Paste and drop in text copied from a spreadsheet. Paste accepts tab, comma or semicolon separated text, with quoted cells such as "Smith, J". Labels go in the first column, and a first row of text is read as the series names. Up to 50 rows and 4 series are used. Bar, horizontal bar and line charts can show all series side by side; pie and doughnut charts show the first series only. Then add a title, axis labels and the value labels, and download the chart as an SVG or as a PNG.

How the axis, the angles and the colours are chosen

The value axis always includes 0 and uses a step of 1, 2, 5 or 10 times a power of ten, chosen to give about 5 ticks. With values up to 22 the ticks are 0, 5, 10, 15, 20 and 25. A bar below zero hangs under the zero line, and a line chart breaks where a cell is empty. For a pie, each slice has its value divided by the total of the positive values, so values 1, 1 and 2 are 90, 90 and 180 degrees, and the last slice ends at exactly 360. Zero and negative values cannot be a slice, so they are left out and a note says so. Series use the Okabe-Ito palette, which was designed to stay distinguishable for the common kinds of colour blindness: blue, orange, green and pink come first.

Accessible by default: text summary and data table

The chart is a picture, so it comes with the same information as text. Under it you get a one-sentence summary, such as the highest and lowest values and where they are, and a data table with every number. The picture's alt text is that summary. The table adds a Share column for a pie. Value labels print the numbers on the bars, points and slices, so a reader does not have to estimate from the gridlines; turn them off for a cleaner look. Long category names are cut with an ellipsis, and with more than 10 categories they are tilted to fit. Colour alone is never the only clue: bars are also in the same order as the legend and the table.

Files, limits and what it does not do

The SVG is built from your numbers as text, with every label escaped, and has no script, no external picture and no font file. The PNG is that SVG drawn on a canvas at twice its size, 1600 by 1000 pixels, on a white background. Text in the PNG uses a common sans-serif font from your device, so it can look slightly different between computers. Charts are always 800 by 500 units: there is no custom size, no stacked or combined chart, no logarithmic axis and no secondary axis. Numbers are shown in English format, such as 1,234.5, whatever your language. Nothing you type is saved, so download the chart before you close the tab.

Frequently asked questions

How do I make a bar graph from a CSV?

Choose Paste, paste the CSV with labels in the first column, for example Fruit,Count then Apples,5 and Pears,9, and the bar graph appears at once. A first row of text becomes the series names. Up to 50 rows and 4 value columns are used.

Can I make a pie chart with negative or zero values?

No. A slice is a share of a total, so only values above 0 can be slices. Zero and negative values are left out and a note says so. If every value is zero or less, the page asks for at least one value above zero.

How do I get a PNG, and how big is it?

Press Download PNG. The chart is drawn at 2 times its size, 1600 by 1000 pixels, on a white background. If your browser cannot make the PNG the page says so and you can download the SVG, which scales to any size without blurring.

Why does the axis go to 25 when my highest value is 22?

The axis steps are 1, 2, 5 or 10 times a power of ten, so the ticks fall on round numbers. For 22 the step is 5 and the axis ends at 25. A bar chart always starts the axis at 0, so bar lengths are not misleading.

Are the colours safe for colour-blind readers?

The first 4 series use blue, orange, green and pink from the Okabe-Ito palette, which was made to be told apart by people with common colour vision differences. Value labels, the legend order and the data table under the chart give the same facts without colour.

Is my data uploaded anywhere?

No. The numbers you type or paste are processed in your browser and not uploaded, and they are not saved. The chart is built in this tab and shown as an image. The page counts visits with Google Analytics, never your data or labels.