Does this page parse JSON automatically?

Not yet - you map fields manually or in your code. The builder verifies the resulting URL.

Can I still POST JSON?

Yes, `/api/render` is documented in the main [docs](/docs).

What about chart colors in JSON?

GET URLs support series color parameters in advanced cases; start with defaults from the builder.

Yes for learning and small tests on the public site.

JSON to chart

POST `/api/render` accepts JSON on the server - but many embeds want a GET URL. This page shows the field mapping so you can translate between them.

JSON objects vs query strings

`type` stays `type`. `labels` becomes a comma-separated `labels` param. `datasets[0].data` joins into `s0`, with `datasets[0].name` as `s0name`.

Repeat for `s1` when needed. Optional `title`, `width`→`w`, `height`→`h`, `legend`, `valueFormat`, `currencySymbol`, `format` pass through.

After mapping, paste values into the builder to validate, or emit the string in your backend.

Use cases

Backend tests that already build `ChartConfig` objects and need shareable links.
LLMs that default to JSON - you reject it and ask for the equivalent GET URL.
Migrating from one chart microservice that logged JSON to ChartKit URLs.

Examples

Example JSON body (POST /api/render style)

{
  "type": "bar",
  "title": "Quarterly",
  "labels": ["Q1", "Q2", "Q3"],
  "datasets": [
    { "name": "ARR", "data": [1.2, 1.4, 1.7] }
  ],
  "width": 680,
  "height": 400,
  "valueFormat": "compact",
  "legend": true
}

Equivalent GET /api/chart URL

https://getchartkit.com/api/chart?type=bar&labels=Q1,Q2,Q3&s0=1.2,1.4,1.7&s0name=ARR&title=Quarterly&w=680&h=400&valueFormat=compact&legend=true&format=svg

Two-series mapping

Second dataset → `s1` + `s1name`.

https://getchartkit.com/api/chart?type=line&labels=A,B,C&s0=1,2,3&s0name=Foo&s1=3,2,1&s1name=Bar&title=Both&legend=true&format=svg

Paste values after you extract them from JSON

Adjust fields and copy URL, HTML, Markdown, or an AI prompt. See the URL parameters reference if you are editing links by hand.

Chart title

Chart type

Labels (comma-separated)

Series 15 numbers

Name

Values (comma-separated)

Chart options

Chart size

Value labels

Currency

Show values on chartPrint numbers on bars, points, or slices

Show legendSeries key below the chart

Advanced▾

Axis text size

Makes X and Y axis labels larger. Applies to bar, line, area, and horizontal bar charts.

Chart font

Preview

Copy

Show snippets

URL

https://getchartkit.com/api/chart?type=bar&labels=Jan,Feb,Mar,Apr,May&s0=12000,18000,15000,22000,27000&s0name=Revenue&title=Monthly%20Revenue&w=700&h=420&valueFormat=currency

HTML

Markdown

![Monthly Revenue](https://getchartkit.com/api/chart?type=bar&labels=Jan,Feb,Mar,Apr,May&s0=12000,18000,15000,22000,27000&s0name=Revenue&title=Monthly%20Revenue&w=700&h=420&valueFormat=currency)

How it works

Inventory keys in your JSON and match them to the URL parameters table.
Encode reserved characters in titles or labels for URLs.
Use the interactive builder to diff your hand-built string against a known-good preview.

Use with ChatGPT or Claude

Instruct LLMs: “Convert this JSON config to ChartKit GET parameters only.”

For no-code users, CSV to chart avoids JSON entirely.

FAQ

Does this page parse JSON automatically?: Not yet - you map fields manually or in your code. The builder verifies the resulting URL.
Can I still POST JSON?: Yes, `/api/render` is documented in the main docs.
Can I embed GET charts in Markdown?: Yes.
What about chart colors in JSON?: GET URLs support series color parameters in advanced cases; start with defaults from the builder.
Is mapping free?: Yes for learning and small tests on the public site.