Make a chart from a table in your browser
This chart maker turns a small table of numbers into a bar, line, area, pie or donut chart. Type the data or paste cells from a spreadsheet, and the preview updates as you type. Download the chart as an SVG file, which stays sharp at any size, as a PNG at one or two times its size, or copy the SVG code into a web page. For a table instead of a chart, use the Markdown table generator.
Choosing a chart type
Start with the question the chart should answer:
| Chart type | Answers | Good for | Avoid when |
|---|---|---|---|
| Bar (vertical) | Which is bigger? | Comparing a few categories, such as sales per store | Labels are long; use horizontal bars |
| Horizontal bar | Which is bigger, with long names? | Rankings, survey answers, many categories | The categories are points in time |
| Grouped bars | How do two or three series compare per category? | This year against last year, per month | You care most about the total |
| Stacked bars | What is the total, and what is it made of? | Sales per channel adding up to total sales | Middle segments need exact comparison |
| Line | How does it change over time? | Monthly visitors, prices, temperatures | The categories have no order |
| Area | How much, over time? | A single amount growing over time | Several series overlap a lot |
| Pie or donut | What share of the whole is each part? | A budget split into three to six parts | Values are negative, or the parts do not add up to a whole |
Bar, line or pie
A short rule covers most cases. Compare separate things with bars. Show change over a sequence, such as days, months or years, with a line, because the line connects points that belong together and the slope shows the trend. Use a pie only when the parts add up to a meaningful whole and there are few of them.
A pie asks the reader to compare angles and areas, which gets hard with many slices or slices of similar size. This tool adds a note above eight slices. It leaves out zero, negative and empty values, because a slice cannot be smaller than nothing, and draws only the first series, because one pie stands for one whole. Percentages are rounded to one decimal with the largest remainder method, so the shown numbers add up to exactly 100.0%.
Start the y axis at zero for bars
A bar shows its value by its length. If the axis starts above zero, the lengths no longer match the values. Take two stores with sales of 98 and 102. With an axis from 0, the bars are almost the same height, which is true: the difference is about 4%. With an axis that starts at 95, the bars are 3 and 7 units tall, so the second looks more than twice as large. That is why this tool always includes zero for bar and area charts.
A line shows change through its slope rather than the height of a filled shape, so line charts here fit the data by default. Switch on Start the value axis at zero for the full range.
Axis steps are always 1, 2 or 5 times a power of ten. For values from 0 to 97, the tool aims at about five steps: 97 / 5 = 19.4, rounded up to the nice step 20, so the axis runs 0, 20, 40, 60, 80, 100.
Color and accessibility
Two success criteria of the Web Content Accessibility Guidelines matter most for charts. Use of Color (1.4.1) says color must not be the only visual means of conveying information. Non-text Contrast (1.4.11) asks for a contrast ratio of at least 3:1 against adjacent colors for the parts of a graphic needed to understand it, such as the lines of a line chart or the slices of a pie. Its explanation names a darker outline around a light slice as one way to pass.
This tool works with both:
- It checks each color in use against the background. A color below 3:1 gets a thin outline in the text color, and the tool tells you which ones.
- Patterns and dashes, not color alone gives bars and slices stripes, dots or cross-hatching and makes lines solid, dashed or dotted.
- Every line series has its own marker shape: circle, square or diamond.
- Value labels and percentages put the numbers in text, so nobody has to match colors to a legend to read them.
- The Color-blind safe palette is the bright qualitative scheme from Paul Tol's notes on color schemes, which he describes as color-blind safe.
Text inside a bar or slice is black or white, whichever contrasts more with the fill, and the SVG carries the title and a text summary of the data for screen readers.
Pasting data from a spreadsheet
Copied spreadsheet cells arrive as text with tabs between them. Paste them into the first label cell or into the box under Paste from a spreadsheet or CSV. Tabs, commas and semicolons all work, and quotes follow RFC 4180: a quoted cell may hold commas and line breaks. Numbers like 1,234.5, 1.234,5 and $1,200 are read correctly. A first row with text in the value columns becomes the series names. Up to 3 series and 200 rows are used, and cells that are not numbers stay empty with a note.
How to use the chart maker
- 1Type labels and values into the table, or paste cells from a spreadsheet into the first label cell.
- 2Pick a chart type, and for bars choose grouped or stacked.
- 3Add a title and axis titles, and switch the legend, value labels and patterns on or off.
- 4Choose colors and a light or dark background, and read the notes under the preview.
- 5Pick a download size and press Download PNG or Download SVG, or copy the SVG code.
Sources
- W3C, Understanding Success Criterion 1.4.1: Use of Color
- W3C, Understanding Success Criterion 1.4.11: Non-text Contrast
- W3C, Web Content Accessibility Guidelines (WCAG) 2.2: contrast ratio
- Paul Tol, Colour schemes and templates
- RFC 4180, Common Format and MIME Type for Comma-Separated Values (CSV) Files
Guide on this topic
Frequently asked questions
Is my data uploaded anywhere?
No. The table, the chart and the downloads are all made by your browser on your own device. Nothing you type or paste is sent to a server. Copy link only shares your settings, such as chart type and colors, never your data or titles.
How do I paste data from Excel or Google Sheets?
Select the cells in your spreadsheet, copy them, then click the first label cell of the table and paste. The tool reads the tab-separated text a spreadsheet puts on the clipboard and fills the table. You can also open Paste from a spreadsheet or CSV and paste there, or open a .csv or .tsv file. The first column becomes the labels and the next one to three columns the series.
Why does my pie chart leave some rows out?
A pie or donut chart shows parts of a positive whole, so a slice cannot be zero or negative. Rows with a zero, negative or empty value are left out and a note tells you how many. A pie chart also shows only the first series. For negative values or several series, use a bar chart.
Is the PNG as sharp as the SVG?
The SVG is drawn from shapes and text, so it stays sharp at any size. The PNG is drawn from that SVG by the canvas of your browser at the pixel size you choose. Pick 2x for screens with high pixel density and for slides. Text in the PNG uses a system font of your device, so it can look a little different on another computer.
Why do some value labels disappear?
When a label does not fit its bar, or would overlap another label, it is left out and a note says how many. On grouped bars, when some labels are too wide for their bars, all of them are hidden, so the chart does not show a random few. A larger chart size or fewer rows gives the labels room.
Can I use the charts in my work?
Yes. The charts you make here are yours to use in reports, slides, websites and print, without a watermark or attribution. Check that the numbers in your table are right before you publish, because the chart only shows what you enter.