Visualize JSON data as a graph
Paste JSON to see its structure as a tree graph of connected boxes, or switch to Chart to plot your data as a bar, line or pie chart. Download either as PNG or SVG.
JSON → tree graph · bar · line · pie
8 boxes · 3 levels deep
Everything runs in your browser; your JSON is not uploaded.
Two ways to visualize JSON as a graph
"JSON graph" can mean two different things, and the tool does both:
| You want to… | Use | You get |
|---|---|---|
| Understand a big or nested JSON file, such as an API response | Tree graph | Boxes for each object and list, joined by lines |
| See the numbers in your data, such as sales per month | Chart | A bar, line or pie chart |
How to see the structure of JSON as a graph
- Paste your JSON into the box. It is checked as you type, and errors are shown straight away.
- Choose Tree graph. Each object or list becomes a box, and nested ones branch off to the right.
- Use Actual size to read a large file at full scale and scroll around it, then download it as PNG or SVG if you need it for documentation.
How to read it: the box title is the key name, with {3} for an object with three keys or [4] for a list of four items. Inside each box, simple values are coloured by type: green for text, orange for numbers, purple for true/false and grey for null.
How to turn JSON into a bar, line or pie chart
Charts need a list of records, where each record has a name and a number:
[
{ "month": "Jan", "income": 5000 },
{ "month": "Feb", "income": 6200 }
]- Paste your JSON and choose Chart. The tool finds the lists of records for you, even when they are nested inside a bigger response such as
{"data": [ … ]}. - Pick the field for the labels (month) and the field for the values (income).
- Choose bar, line or pie, then download the chart.
| Chart | Best for |
|---|---|
| Bar | Comparing amounts: sales per product, visits per page |
| Line | Change over time: income per month, temperature per day |
| Pie | Shares of a whole: budget per category (positive numbers only) |
Example: monthly sales from a JSON file
A small shop exports its data as JSON (the example loaded in the tool). The owner wants to know which month was best.
Step 1: Tree graph shows what is in the file
Step 2: Chart picks the sales list
Step 3: Read the bar chart
Result: April was the best month at 7,100. Switch to pie and April shows as 30.7% of the four months' income, March as the smallest share at 20.8%.
Make a chart from JSON with JavaScript (Chart.js)
To draw the chart on your own web page, load your JSON and pass the labels and values to Chart.js:
<canvas id="chart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
fetch('data.json')
.then((response) => response.json())
.then((data) => {
new Chart(document.getElementById('chart'), {
type: 'bar', // or 'line', 'pie'
data: {
labels: data.sales.map((row) => row.month),
datasets: [{ label: 'Income', data: data.sales.map((row) => row.income) }],
},
});
});
</script>data.sales is the path to your list; change it, and the month and income field names, to match your JSON. The tool's Data, Labels and Values menus show you which names to use.
Why won't my JSON make a graph?
| Problem | Fix |
|---|---|
| "Invalid JSON" | Look for single quotes (JSON needs double quotes), a comma after the last item, or a missing bracket |
| Numbers in quotes, like "5,000" or "$12.50" | Nothing to do: the chart reads them as numbers |
| Data inside a wrapper, like {"data": [ … ]} | Nothing to do: pick it from the Data menu |
| No chart, only a tree | Your file has no list of records with a number in it; the tree graph still shows its structure |
| Pie chart refused | Pie charts cannot show negative numbers; use a bar chart |
Frequently asked questions
Can I visualize nested JSON?
Yes. The tree graph shows every level, with each nested object or list as its own box. For very large files it draws the first 400 boxes and lists the rest as {…}.
Is my JSON uploaded anywhere?
No. The graph and chart are drawn in your browser, so it is safe to paste private API responses.
How do I save the graph as an image?
Use PNG for documents and slides, or SVG if you want to edit it or need it sharp at any size.
Can I chart more than one field at once?
One field at a time. Switch the Values menu to compare, or use the Chart.js code above with a second dataset to draw them together.
Sources
- JSON.org: Introducing JSON: the JSON format: objects, arrays and values.
- Chart.js: Getting started: drawing bar, line and pie charts from data in JavaScript.
Related Tools
Build and preview Valorant crosshair settings.
Search common Vim commands.
Convert WebP files and Base64 data in both directions.
Convert GIF files and Base64 data in both directions.
Save any GIF frame, or all frames, as JPG.
Save any GIF frame, or all frames, as PNG.