Chart Maker

Paste or type data, or import a CSV, and instantly build a bar, line, pie or donut chart with labels, colors and a legend. Export as PNG or SVG.

🌐 Español

Category

Tip: copy cells straight from Excel/Google Sheets/a CSV and paste directly into the grid above — it replaces the grid with your pasted data (the first row becomes the series names, the first column becomes the category labels).

Preview

Category 1 Category 2 Category 3 Category 4 Series 1

🔒 Private by design: everything runs locally in your browser and never uploaded to any server.

Written and maintained by Last updated

Categories down, series across, and nothing else to configure

The whole data model is one small table. Rows are categories, the labels that run along the bottom of a bar or line chart or name the slices of a pie. Columns are series, the things being measured. A chart of monthly revenue for two products has twelve categories and two series; a breakdown of a budget has one series and as many categories as there are line items.

The grid opens with four categories and a single series, all cells empty, and every label in it is editable text rather than a fixed heading. Change “Series 1” to “Revenue” and, on a bar or line chart, the legend updates as you type. The preview underneath redraws on every keystroke, so there is no generate step to click and no state where the picture and the numbers disagree.

Two buttons grow the table, + Add category and + Add series, and a small remove control sits on each row and column. Neither will let you delete the last remaining row or the last remaining column, since a table with nothing in it has no chart to draw.

Getting real numbers into the grid

  1. Copy a block of cells from a spreadsheet and paste it straight onto the grid. It replaces everything, reading series names from the first row and category labels from the first column. The corner cell of that header row is ignored, so a spreadsheet with a “Month” or “Region” header works without editing.
  2. Or click Import CSV… and choose a .csv file, which follows exactly the same first-row, first-column convention.
  3. Or type into the cells directly, which is usually fastest for the handful of numbers a chart of this kind actually needs.
  4. Pick a Chart type and a Color palette, add a title if you want one, and set the two checkboxes.

Copying a spreadsheet selection is the path most people should use. It takes about two seconds and removes the transcription errors that make hand-typed charts quietly wrong. If the CSV you are starting from is unfamiliar and you want to sort or search it before charting anything, the CSV Viewer opens .csv and .tsv files as a browsable table first.

Four chart types reading the same table

Bar charts group one cluster of bars per category and color them by series, and they always include zero in the scale, so the comparison a bar length invites you to make is the true one. Line charts draw one polyline per series with a marker at each point, and they auto-scale to the data’s own range with a small margin, which is appropriate when the shape of a trend matters more than its distance from zero. Pie and donut charts are the same drawing with and without a hole in the middle, both showing a single series as shares of its total, with the donut’s hole set at just over half the radius.

Legends follow the same logic: bar and line charts legend the series, pie and donut charts legend the categories, because that is what the colors are distinguishing in each case. All three palettes, Categorical, Pastel and Vivid, hold ten colors and hand them out in the same index order, so switching between them recolors the chart without reshuffling which item is which.

No y-axis, which is what the data labels are for

This is the honest limitation to plan around. The chart draws category labels along the bottom and, on a bar chart, a zero baseline. It does not draw a value axis, tick marks or gridlines. That keeps the output clean and small, and it is fine for a chart whose point is a comparison, but it means a reader cannot look up a specific value from the picture alone.

The fix is the Show data labels checkbox, which starts switched off. Turn it on and every bar and line point prints its own number, rounded to two decimal places, while pie and donut slices print their share as a percentage to one decimal. For anything going into a report or a slide where someone might quote a figure, turn it on.

SVG to keep, PNG to paste

Three export buttons sit under the preview. Download SVG saves the exact vector markup you are looking at, which stays sharp at any size and can be reopened and edited in a vector program. Download PNG rasterizes that same markup into a flat image at the chart’s own dimensions, which is the one to use for a slide deck, a document or a chat message. Copy SVG code puts the markup on your clipboard for pasting into a page or a template.

All three come from one source, so the preview, the SVG and the PNG can never disagree. The drawing itself is plain geometry assembled into SVG text in the page, with no charting library and no server involved, which is why data you are not ready to publish is safe to chart here. For a different shape of visual, the Word Cloud Generator sizes words by frequency instead of plotting numbers, and the rest of the generators cover the other make-something-from-scratch tools.

See it in action

Screenshot of the Chart Maker tool with bar, line, pie or donut chart types with Categorical, Pastel or Vivid palettes, an optional title, and toggles for the legend and data labels, over an editable data table
Chart Maker mid-process: bar, line, pie or donut chart types with Categorical, Pastel or Vivid palettes, an optional title, and toggles for the legend and data labels, over an editable data table.
Diagram: where the work happens on a SysFenix page that has no file input at all: the tool arrives as ordinary JavaScript inside the page, works the answer out on your own device and renders it in place, so the upload, queue and server-side record a typical online tool needs never happen
Where the work happens on a SysFenix page that has no file input at all: the tool arrives as ordinary JavaScript inside the page, works the answer out on your own device and renders it in place, so the upload, queue and server-side record a typical online tool needs never happen.

Frequently asked questions

What happens to a cell I leave empty?

It counts as zero. A chart grid is edited live and a cell is legitimately blank, or halfway through a number like a lone minus sign, far more often than it is a real mistake worth stopping you for, so anything that does not read as a number is quietly treated as zero rather than throwing an error. That is also why a freshly loaded, untouched grid draws a bar chart of flat zero-height bars, and why a pie chart on the same empty grid prints a short note in place of the wheel instead of drawing nothing at all.

Can I chart negative numbers?

On bars and lines, yes. A bar chart always keeps zero in its scale and draws negative bars downward from that baseline, which is the honest way to show them, since a bar's length is what encodes its value. A line chart auto-scales to whatever range your numbers occupy, with a little padding at each end, so negatives are simply part of the curve. Pie and donut charts are the exception. A negative share of a total is meaningless, so negative values are clamped to zero there; the category keeps its legend entry but its slice has no width.

How large is the exported PNG, and can I make it bigger?

It is always 720 by 440 pixels, because the chart is drawn at that size and the PNG is a one-to-one rasterization of it. There is no resolution setting. If you need something larger, or something that will be printed or projected, take the SVG instead and let whatever opens it do the scaling, since vector output has no fixed pixel size to run out of.

What happens if I add more series than the palette has colors?

Each palette holds ten colors and assignment wraps around, so an eleventh series repeats the first color, a twelfth repeats the second, and so on. Nothing breaks, but two items sharing a color in the same chart is a genuine readability problem rather than a cosmetic one. If you are past ten, that is usually a sign the data wants splitting into two charts.

Can I paste data copied from Google Sheets or a tab-separated file?

Yes. Copy the cells and paste anywhere on the grid; the paste is recognized as tabular and replaces the whole grid, taking series names from the first row and category labels from the first column. If what you paste does not look like a table, it drops into the focused cell as ordinary text instead, so you can still type or paste a single label without wiping your work. The import button, by contrast, expects an actual .csv file.

My donut chart is ignoring most of my columns. Is that a bug?

No. A slice of a circle represents a share of one total, so pie and donut charts here use the first data column only, and a note appears above the grid naming the column being charted whenever you have more than one. If you want to compare several series, a bar or line chart is the shape that can do it. If you want more slices, add categories rather than columns.

Related tools