Chart Maker
Paste numbers from a spreadsheet; get a pie chart or bar graph with percentages and error bars, as SVG or PNG.
Settings
On by default because a bar's length is read as its value: start the axis at 90 and a bar of 100 looks twice as tall as a bar of 95.
How to make a chart from your data
- Copy the cells from your spreadsheet, header row included, and paste them into the box. Or switch to Table and type the values; add rows and series with the buttons.
- Pick a chart: Pie or Donut for parts of a whole, Bar to compare amounts, Line or Area for change over time, Scatter for two measures against each other.
- Add a title and axis titles, choose how numbers are written (decimals, separator, a currency symbol or %), and whether labels show values, percentages or both.
- For error bars, put a ± column (or a low and a high column) after each value column.
- Download a PNG (1x to 4x) or an SVG, copy the image straight into a document or slide, or make a share link.
Percentages that add up to 100
Round each slice on its own and the labels often total 99 % or 101 %: three equal slices are 33.33… % each, which rounds to 33 + 33 + 33 = 99. This page uses largest-remainder rounding: every share is rounded down, and the points left over go one at a time to the shares that lost the most (earlier rows win a tie). So the labels read 34 %, 33 %, 33 % and always sum to exactly 100, and no label is more than one unit away from its exact value. The same rule is used for percentage labels on bars and on 100 % stacked columns. Example: Rent 1,200, Food 450, Other 200, Transport 150 out of 2,000 are 60 %, 22.5 %, 10 % and 7.5 %; at 0 decimals the labels read 60 %, 23 %, 10 %, 7 %.
Error bars
An error bar shows the spread or uncertainty you already worked out: a standard deviation, a standard error, a 95 % confidence interval, a measurement tolerance. Put it in the column right after its value, headed ±, SD, SE, CI or error, and the page switches error bars on. Each bar then runs from value − error to value + error. If your numbers are the two ends (say a minimum and a maximum), use three columns per series, value then low then high, and choose Low and high columns. Say in the caption or axis title what the bars mean; a reader cannot tell an SD from an SE by looking.
Why bars start at zero
The start at zero box is on by default for bars because a reader compares bar lengths, not the numbers at their ends. Sales of 95 and 100 drawn on an axis that begins at 90 look like a doubling. Lines and scatter points are read by position, so for them a zoomed axis can be fair; untick the box to let the axis fit the data. When bars do not start at zero the page says so under the chart.
What it cannot do
- No live link to a spreadsheet: the chart is a copy of what you pasted. After you change the sheet, paste again.
- Error bars are drawn from the values you give, not computed: the page does not work out a standard deviation or a confidence interval from raw data.
- No maps, no 3D charts, no dual axes. A 3D pie tilts the circle, so the slices at the front look bigger than the same-sized slices at the back.
- One value axis per chart. Two measures on very different scales are clearer as two charts.
- Up to 500 rows and 25 columns. Share links longer than 2,000 characters may be cut short by some chat apps; for a big table send the PNG or SVG instead.
- The PNG and SVG use the fonts on the device that opens them (Geist where it is installed, otherwise Helvetica or Arial), so the lettering can differ slightly from what you see here.
Privacy and what is stored
Your data never leaves your device: the chart is drawn by code in this page, and exports are made in the browser. Your latest chart and settings are saved in this browser's local storage once you edit them, so a reload keeps them; Clear saved chart deletes them in one tap. The page sends an anonymous page-view count and, at most, two fixed words (chart-make, chart-export), never a label or a number. A share link carries the chart after the #, which browsers do not send to any server, and opening one saves nothing unless you tap Keep this copy.
Questions
How do I make a pie chart with percentages?
Paste two columns, a label and a number, pick Pie or Donut, and the slices are labelled with their percentage by default. Set Data labels to Value and % to show both. The percentages are rounded by the largest-remainder method, so they always add up to exactly 100: three equal slices read 34%, 33% and 33%, not 33% three times.
How do I add error bars to a bar graph?
Put the error next to each value column, with a header such as ±, SD, SE or error, for example Group, Mean, SD. The chart maker sees the column and draws an error bar from mean minus SD to mean plus SD on every bar. If you have the ends instead, use three columns (value, low, high) and pick Low and high columns under Error bars. Error bars are drawn on grouped bars, lines and scatter points.
How do I make a horizontal bar graph?
Pick Bar, then set Bars to Horizontal. The categories run down the left side and the bars grow to the right, which leaves room for long labels such as survey answers or country names. Grouped, stacked and 100% stacked bars all work horizontally, and the axis titles move with their axes.
Is this chart maker free, and do I need to sign up?
It is free, with no account, no watermark and no ads. The chart is drawn by code in the page on your own device; the data you paste is never uploaded. Your last chart is kept in this browser so a reload does not lose it, and one tap clears it.
How do I paste data from a spreadsheet?
Select the cells including the header row and copy them; spreadsheets copy as tab-separated text, which the paste box reads directly. Comma- or semicolon-separated text works too. The first column becomes the labels and every column after it becomes a series. Numbers such as 1,234.50, 1.234,50, $1,200, 45% and (300) are understood.