Chart-Maker — Web application for creating charts and diagrams in the browser

Online / Offline generator, 21 chart types, export to PNG JPEG WEBP AVIF SVG, log, detailed instructions, app installation

For Users Applications
Chart-Maker App
For devs Libraries
Chart-Maker Libraries
Chart settings
JSON
Preview
How to use — detailed instructions

The «Chart settings» panel holds all the controls, and next to it a live preview updates automatically on every change. On wide screens the two sit side by side; on a phone they stack, with the preview below the settings.

Workflow: 1) choose a chart type; 2) enter a title and a dataset name; 3) fill in the data in the table below; 4) undo or redo if needed; 5) open «Export» to download an image or save the project.

There are 21 types, grouped by how their data is entered:

  • Label / value: bar, line, area, horizontal bar, pie, doughnut, radar, polar area, word cloud.
  • X / Y points: scatter (X, Y), bubble (X, Y, size).
  • Several datasets: stacked, grouped, multi line, combo (each dataset is a bar or a line).
  • Category and value list: box plot, violin.
  • Hierarchy: treemap (label, value, group).
  • Grid: heatmap (X, Y, value).
  • Flows: sankey (from, to, flow).
  • Map: choropleth (country from a list, value).

The data table adapts to the chosen type. «Add row» adds an entry, the cross removes one.

  • Label / value: a label and a number.
  • Points: X and Y (bubble also has size).
  • Several datasets: categories are comma-separated, each dataset's values are a comma-separated list of numbers; in combo each dataset is set to bar or line.
  • Box / violin: a comma-separated list of numbers in the values field.
  • Heatmap: X, Y (categories) and a value.
  • Sankey: from, to and the flow amount.
  • Choropleth: the country is picked from a dropdown (names in the interface language), plus a value.

The «Export» button opens a window.

  • Format: PNG, JPEG, WEBP, AVIF (a real format, encoded in the browser — the encoder loads on first use) and SVG (vector).
  • Width and height — image size in pixels; empty means the current chart size.
  • Download image — saves the picture; a background and the list of data below the chart are added to it.
  • Save project — a .json file with all settings; the «Include history and journal» checkbox adds them to the file.

The «Import» button opens a window with a zone where you can drop a .json project file or click to select one. Once a file is chosen, the «Apply project» button becomes active and loads the settings (and the history and journal if they were saved).

  • Ctrl/Cmd + Z — undo
  • Ctrl/Cmd + Y or Ctrl/Cmd + Shift + Z — redo
  • Ctrl/Cmd + S — save project
  • Ctrl/Cmd + E — export window
  • Ctrl/Cmd + O — import window
  • Ctrl/Cmd + J — journal
  • Ctrl/Cmd + , — settings

Inside input fields Ctrl+Z and Ctrl+Y work as normal text editing.

  • Undo / Redo: roll data and settings changes back and forward.
  • Journal: keeps actions, hints and errors; it can be cleared.