All tools

Free tool

JSON to chart

Paste JSON from an API, a script or a Chart.js config and download the chart as SVG or PNG.

Your data

12 rows, 3 columns. Read as a list of objects.

Or try a sample: , , .

The chart

Type
Size
More settings
Columns
Series to chart
Text
Numbers
Style
Weekly signupsLine chart: New accounts, and accounts that finished setup (sample data). 12 categories, from Jul 6 to Sep 21. signups: lowest 182 (Jul 6), highest 398 (Sep 21). activated: lowest 96 (Jul 6), highest 241 (Sep 21). Values: Jul 6: signups 182, activated 96; Jul 13: signups 205, activated 112; Jul 20: signups 198, activated 104; Jul 27: signups 240, activated 131; Aug 3: signups 262, activated 150; Aug 10: signups 251, activated 139; Aug 17: signups 298, activated 171; Aug 24: signups 315, activated 186; Aug 31: signups 302, activated 179; Sep 7: signups 344, activated 205; Sep 14: signups 371, activated 226; Sep 21: signups 398, activated 241.Weekly signupsNew accounts, and accounts that finished setup (sample data)signupsactivated0100200300400Jul 6Jul 13Jul 20Jul 27Aug 3Aug 10Aug 17Aug 24Aug 31Sep 7Sep 14Sep 21

800 × 400 px

Drawn in your browser. Nothing you paste is uploaded.

Export

More export options
PNG size

Shapes it reads.

Paste any of these as they are. The builder says which one it found.

A list of objects

One object per row, keys as columns.

[{ "week": "2026-07-06", "signups": 182 }, …]
An object of lists

One list per column, as dataframes return them.

{ "week": ["2026-07-06", "2026-07-13"], "signups": [182, 205] }
Labels and values

Pairs, or an object of numbers. Good for pie charts.

{ "Chrome": 62, "Safari": 21, "Firefox": 9 }
Chart.js data

The data part or the whole config. Its chart type carries over.

{ "type": "bar", "data": { "labels": […], "datasets": […] } }
A wrapped response

Rows under one key, like "data" or "results".

{ "data": [{ "day": "Mon", "requests": 1200 }] }

Questions

Something else? Send us a note, right from the page.

Is my JSON uploaded anywhere?

No. It is read and drawn in your browser. An editor link carries all of your JSON, even columns the chart leaves out, after the # in the address, which browsers never send to a server.

Which JSON shapes work?

A list of objects, an object of lists, label and value pairs, an object of numbers, Chart.js data or configs, arrays of arrays, a list of numbers, JSON Lines, and any of those wrapped in one key like "data".

Can I paste a Chart.js config and get a PNG?

Yes. The labels, datasets and chart type are read; colors and plugin options are not. Then use Download PNG. Doing it in your own code? See the Chart.js to PNG guide.

How are values read?

Numbers can be JSON numbers or text like "1,200", "12%" or "$1,200". null, a missing key or an empty string leaves a gap, not a zero. Nested objects, lists inside rows and true or false are skipped.

My JSON is nested. What now?

Flatten it first: one object per row, one number per key. With jq, for example: .items | map({ name: .name, visits: .stats.visits }).

What does the error with a line and column mean?

The JSON has a syntax error at that spot. The usual suspects: a trailing comma, single quotes, or keys without quotes.

Why did a column not show up as a series?

Only columns that are mostly numbers become series; columns of text can be labels. Up to 8 series fit on one chart.