Chart.js Playground

Paste a Chart.js config · PNG · SVG · no sign-up

Loading the editor…

Example chart configs

Three starting points. Open one to load it into the editor above.

Bar chart to PNG

The most common case: a Chart.js bar config rendered to a static PNG you can drop into an email or report.

{
  "type": "bar",
  "width": 600,
  "height": 320,
  "format": "png",
  "data": {
    "labels": ["Q1", "Q2", "Q3", "Q4"],
    "datasets": [{ "label": "Revenue", "data": [12000, 15000, 18000, 16000] }]
  }
}
Open this example in the editor

Line chart to SVG

Same config, vector output. SVG stays sharp at any size, which matters for print and high-DPI screens.

{
  "type": "line",
  "width": 560,
  "height": 240,
  "format": "svg",
  "data": {
    "labels": ["Mon", "Tue", "Wed", "Thu", "Fri"],
    "datasets": [{ "label": "Signups", "data": [18, 24, 21, 33, 41] }]
  }
}
Open this example in the editor

Doughnut chart for dashboards

Compact category breakdowns read well in Slack messages and dashboard cards.

{
  "type": "doughnut",
  "width": 560,
  "height": 400,
  "format": "png",
  "data": {
    "labels": ["Direct", "Organic", "Referral"],
    "datasets": [{ "data": [42, 38, 20] }]
  }
}
Open this example in the editor

Frequently asked questions

Do I need an account to use the Chart.js playground?

No. The playground renders charts without signing up, with a limited number of free renders per browser session. Creating a free account removes that cap and unlocks brand kits, saved templates, JPEG and WebP output, PDF export, and API keys for your own integrations.

Which output formats can I render here?

The public playground renders PNG and SVG. PNG is the safest choice for email and chat clients; SVG stays sharp at any size. JPEG, WebP, and PDF output are available on an account.

Does this accept standard Chart.js configuration JSON?

Yes. The spec is a Chart.js configuration with a few extra top-level fields for the image itself: width, height, and format. If a config works in Chart.js in the browser, it renders here.

Can I share the chart I built?

Yes. The Copy link button encodes the whole spec into the URL, so anyone opening that link sees the same chart. Nothing is stored on our servers, and shared links are not indexed.

How do I render these charts from my own code?

Send the same JSON to POST /api/v1/render with an API key and you get image bytes back. The Quick Start guide has copy-paste examples for curl, Node, Python, and PHP.

Take it into production

The playground is the same renderer that backs the API. These guides cover the rest.