Skip to content

JSON to chart

Paste JSON, such as an API response, an array of records or a Chart.js config. The maker finds the rows, lets you pick the label and value fields, and draws the chart right away.

Your data is read in your browser. PNG and PDF are drawn by the Render API from the same spec and nothing is stored. An image URL contains the data, so anyone with the link can read it.

How to use it

  1. Paste JSON, open a .json file, or enter a public API URL and press Load.
  2. If the JSON holds several arrays, choose which one has your rows.
  3. Pick the label field and the number fields, then download PNG, SVG or PDF.

Accepted JSON shapes

json
// 1. Array of records (most API responses)
[{ "month": "2026-01", "visits": 5200, "signups": 310 }, { "month": "2026-02", "visits": 6100, "signups": 344 }]

// 2. Rows nested inside a response: choose the path, e.g. data.items
{ "meta": { "page": 1 }, "data": { "items": [{ "name": "A", "value": 3 }] } }

// 3. Columnar JSON (pandas to_dict("list"))
{ "city": ["Austin", "Denver"], "population": [979882, 715522] }

// 4. A {label: value} object
{ "API": 41, "Web": 23, "Workers": 12 }

// 5. Chart.js-style config, rendered as written
{ "type": "line", "data": { "labels": ["Q1","Q2","Q3"], "datasets": [{ "label": "Revenue", "data": [12, 19, 27] }] } }

Worked example: an analytics API response

Load the "Weekly active users" sample. Its rows sit under data.weeks, so that path is picked for you. The week field holds dates, so it becomes the x axis in time order, and web, ios and android become three lines. To chart a live endpoint, paste its URL: the Render server fetches public JSON or CSV up to 2 MB, and private or internal addresses are refused.

What Chart.js options are supported

The renderer reads the parts that change how a chart looks as a static image: type, labels, datasets (label, data, backgroundColor or borderColor), indexAxis: "y" for horizontal bars, stacked scales, axis titles and the title and subtitle plugins. Options that only affect interaction, like tooltips, hover and animation, are ignored.

Do it from code or an AI assistant

The same renderer is an HTTP API and an MCP tool, so this exact result can come from a script or from Claude, ChatGPT or Cursor. See the Render API reference and the MCP setup guide.

HTTP API

bash
# GET: the URL is the image (embed it in Markdown, email or Slack)
curl -o chart.png "https://render.cuelark.com/v1/chart?c=%7B%22type%22%3A%22doughnut%22%2C%22title%22%3A%22Error%20budget%20used%22%2C%22data%22%3A%7B%22API%22%3A41%2C%22Web%22%3A23%2C%22Workers%22%3A12%2C%22Remaining%22%3A24%7D%7D"

# POST: same chart at 2x for slides
curl -X POST https://render.cuelark.com/v1/chart -H "content-type: application/json" \
  -d '{"chart":{"type":"doughnut","title":"Error budget used","data":{"API":41,"Web":23,"Workers":12,"Remaining":24}},"format":"png","scale":2}' -o chart@2x.png

MCP tool call: render_chart

json
{
  "method": "tools/call",
  "params": {
    "name": "render_chart",
    "arguments": {
      "type": "doughnut",
      "title": "Error budget used",
      "data": {
        "API": 41,
        "Web": 23,
        "Workers": 12,
        "Remaining": 24
      }
    }
  }
}

Frequently asked questions

Is this compatible with QuickChart?

It accepts the same Chart.js-style config for the common chart types, so most simple QuickChart configs render here too. Plugins and JavaScript callbacks aren't supported.

Can I send JSON from code instead?

Yes. POST the same JSON to https://render.cuelark.com/v1/chart and you get a PNG or SVG back. See the Chart image API page.

What if my JSON has strings like "$1,200"?

Numbers given as strings are cleaned. Commas, $, % and spaces are stripped before plotting.

My API needs a key. Can I load it by URL?

No, URL loading only fetches public addresses without credentials, so keys never pass through us. Call your API yourself and paste the JSON response instead.

Updated November 10, 2026 by the Cuelark Team.