Comma

Free tool

JSON to chart.

Paste an API response, an array of objects or a Chart.js config and get a clean bar, line or pie chart. Envelopes like {"data": […]} are unwrapped and nested fields flattened. The chart is plain SVG — download it, drop it in a slide, or turn it into a link people can comment on, bar by bar.

data.json
6 categories × 2 series · skipped: plan
Weekly signups vs activatedBar chart of signups, activated by 6 categories Weekly signups vs activated signupsactivated 0 100 200 300 400 500 600 700 Aug 10 Aug 17 Aug 24 Aug 31 Sep 7 Sep 14 Aug 10 · signups: 412 Aug 17 · signups: 455 Aug 24 · signups: 498 Aug 31 · signups: 471 Sep 7 · signups: 563 Sep 14 · signups: 602 Aug 10 · activated: 268 Aug 17 · activated: 301 Aug 24 · activated: 322 Aug 31 · activated: 339 Sep 7 · activated: 384 Sep 14 · activated: 431

Publishes the chart and its data to Comma: one URL instead of a screenshot in a thread, and readers pin comments on the bar they mean. Free, no card.

How the data becomes a chart

  • An array of objects is one row per object. The first field holding text — a name, a date, a week — becomes the categories, even if an id or a count comes before it. Every field whose values are all numbers becomes a series; the rest are listed as skipped.
  • An API envelope such as {"results": […], "next_cursor": null} is unwrapped when it holds exactly one array. Nested objects flatten to dot paths, so metrics.revenue can be charted.
  • A flat map — {"North": 120, "South": 95} — charts keys against values. A Chart.js {labels, datasets} object, bare or inside a full config, charts each dataset as a series.
  • Numbers stored as strings ("$1,204", "31%", "(1,200)") are read as numbers; null leaves a gap in a line rather than dropping to zero.
  • Bar charts start at zero, a line fits its axis to the data, and a pie charts the first numeric field only, folding past eight slices into “Other”.

Charts from agents and APIs, without a notebook

The usual path from a JSON payload to a chart is a notebook, a pandas import and a matplotlib call — for a picture someone will look at once. Here it is a paste. When the chart needs a conversation, publish it: the chart and the data behind it become one URL, comments pin to the bar they are about, and re-publishing keeps the old version as a revision. A coding agent can skip this page entirely and post the chart over MCP, or a routine can refresh it on a schedule.

Questions

How do I turn JSON into a chart?
Paste the JSON into the editor on this page, or drop a .json file onto it, and pick bar, horizontal bar, line or pie. An array of objects becomes one row per object: the first text field (a name, a date, a week) becomes the categories and every numeric field becomes a series. Download the chart as SVG or PNG, or publish it as a shareable link.
Which JSON shapes does it understand?
An array of objects; an array of arrays with a header row; an API envelope like {"data": [...]} or {"results": [...]} (the single array inside is unwrapped); a flat map like {"North": 120, "South": 95}; a Chart.js-style {labels, datasets} object, bare or as a full Chart.js config; and NDJSON, one object per line. Nested objects are flattened to dot paths such as metrics.revenue, so a nested number can still be charted.
Why is one of my fields missing from the chart?
A field is charted only if every non-empty value in it reads as a number. Text fields, booleans, nested arrays and IDs that mix letters and digits are listed under the chart as skipped instead of being drawn as zero. Up to eight numeric fields are charted; each gets a fixed, colorblind-checked color.
Are numbers stored as strings handled?
Yes. "1204", "$1,204.50", "31%" and accounting negatives like "(1,200)" are all read as numbers, which matters because many APIs and spreadsheets export amounts as strings to keep precision.
Does the chart need JavaScript or a chart library?
No. The chart is plain SVG: it renders in any browser, in an email client that shows images, in a slide, and when opened straight from disk. Hovering a bar, point or slice shows its exact value through native SVG titles, with no script involved.
Is my data uploaded anywhere?
No. Parsing and drawing happen in your browser. The data only leaves your machine if you click “Get a shareable link” and create a report.
How do I share a chart from an API or an agent so people can comment on it?
Click “Get a shareable link”. The chart — and the data table under it, if you keep that option on — is published to Comma as a report: one URL that looks the same for everyone, where readers pin comments on the exact bar or row. A coding agent can do the same thing without this page by publishing over Comma's MCP server or API. Comma is free.

Related: CSV to chart · JSON to HTML table · JSON formatter · YAML to JSON · SVG viewer · all free tools