Chart Definition (JSON)
Enter a chart definition above or choose an example.
typestring (required)
One of: "bar", "line", "pie", "area", "scatter", "radar"
One of: "bar", "line", "pie", "area", "scatter", "radar"
titlestring
Main chart title
Main chart title
subtitlestring
Optional subtitle below the title
Optional subtitle below the title
labelsstring[] (required)
X-axis category labels, e.g. ["Jan","Feb","Mar"]
X-axis category labels, e.g. ["Jan","Feb","Mar"]
datasetsobject[] (required)
Array of {name: string, data: number[]}. Max 1,000 total data points.
Array of {name: string, data: number[]}. Max 1,000 total data points.
colorsstring[]
Hex colors per dataset, e.g. ["#f78166","#58a6ff"]
Hex colors per dataset, e.g. ["#f78166","#58a6ff"]
legendobject
{show: boolean, position: "top"|"bottom"|"left"|"right"}
{show: boolean, position: "top"|"bottom"|"left"|"right"}
axesobject
{xLabel: string, yLabel: string, showGrid: boolean, beginAtZero: boolean, yFormat: "default"|"currency"|"percent"|"compact"}
{xLabel: string, yLabel: string, showGrid: boolean, beginAtZero: boolean, yFormat: "default"|"currency"|"percent"|"compact"}
formatstring
"png" (default) or "jpeg"
"png" (default) or "jpeg"
width / heightinteger
Output dimensions in px. Default 800×450.
Output dimensions in px. Default 800×450.
Preview & API
Enter a valid chart definition to preview
How it works:
1. Paste a chart definition JSON on the left, or click an example button.
2. See a live browser-side preview above.
3. Enter your API key and click Render to call POST /api/charts/render and see the server-side PNG.
4. Copy the generated integration code for your project.