JSON Tool 10

JSON to chart

Paste a JSON document and get a bar or line chart. The field mapping is guessed and explained, a null is drawn as a gap rather than a zero, and hovering any point shows the JSON path behind it — click to copy that path into a ticket.

Y values
Samples
JSON Paste JSON to chart

Paste your own JSON, or start from a sample

The array with the most rows is charted, and the guess is explained
Chart Chart appears here

Chart appears here

Hover a point for its JSON path; click to copy it
Waiting for input Need the numbers as a table instead? Open the JSON to Table tool → Client-side only
How the chart is chosen

Paste a document and the page looks for the shallowest array of objects — the records — and charts it. If there is no such array it falls back to an array of numbers, an object of key-to-number pairs, an array of rows, or the numeric leaves of a nested object. The status bar always names what it found and which fields it used.

A missing value is a gap. A line breaks at a null instead of dropping to zero, because plotting a zero would invent a dip that is not in the data. Values that are not numbers are skipped and counted, never coerced: "007" stays text, so a product code cannot silently become a quantity.

Hover any point to see its JSON path and click to copy it. The chart itself is SVG text, so it pastes into a README, a ticket or a comment and stays sharp at any zoom.

Frequently asked

Is my JSON uploaded?
No. The document is parsed and the chart is built as SVG in the page, and the script issues no network request with your data. Copying or downloading the SVG happens locally.
How does it decide what to plot?
It looks for the shallowest array of objects, takes a date field as the x axis when one exists and the first text field otherwise, then plots every numeric field it finds up to eight. The status bar names the path it charted and the fields it chose, and the three controls override each choice.
Why does my line break in the middle?
Because that value was null or missing. A gap is drawn as a gap: plotting it as zero would invent a dip that is not in your data. The status bar counts the gaps, and a bar chart leaves an empty slot at that category instead of drawing a zero-height bar.
What happens to values that are not numbers?
They are skipped and counted, never coerced. Only plain decimals count as numbers, so "1,5", "$1,234", "12%" and "1e5" are all treated as text, and "007" stays text so a product code cannot become a quantity. The status bar reports how many values in each column were skipped.
What if my JSON has duplicate keys?
The last value wins. That is standard JSON parsing behaviour, and it happens before the chart is built, so the earlier values are not available to plot.
Can I put the chart in a README or a ticket?
Yes. The chart is SVG text: Copy SVG pastes into any Markdown file or issue tracker and stays sharp at any zoom, and Download .svg saves a standalone file with its colours inlined. There is no PNG export, because the page has no canvas.