Transform JSON data arrays into bar, line, pie

Map structured JSON arrays and fields into a selected chart type.

freeworks offlinenothing uploaded
ToolJSON to Chart
Input
Output
—
Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

Preview

How it works

JSON arrays and object properties are parsed into labels, series, and numeric values, then mapped to chart coordinates and marks according to the selected chart type. Missing or nonnumeric fields need an explicit conversion policy before plotting.

  • JSON is portable, but chart series require an explicit rectangular field mapping.

Worked example

Array of Objects
Convert JSON array to a bar chart
Input
											[{"month": "Jan", "sales": 100}, {"month": "Feb", "sales": 150}, {"month": "Mar", "sales": 120}]
Output
												xychart-beta
    title "JSON Data Chart"
    x-axis ["Jan", "Feb", "Mar"]
    y-axis "sales"
    bar [100, 150, 120]

When to use this

API previews, reports, and chart-configuration fixtures turn JSON into plots.

Edge cases

  • Numeric strings may sort lexically instead of numerically if not converted.
  • Unequal array lengths misalign labels and values.
  • Nested objects need a selected path before becoming a series.

References