How to use the ChartQuery Playground

The ChartQuery Playground is a browser-based editor where you can build charts, diagrams, barcodes, QR codes and thermal labels without writing any code. Edit settings visually or as raw JSON, preview results live, then download the image or copy a ready-to-use code snippet.

No account required. You get 10 free runs per session.

Interface overview

The playground is split into three areas:

1. Product tabs -- the top row lets you switch between Charts, Diagrams, Barcodes, QR Codes and Labels. Each tab loads its own editor and examples.
2. Editor (left/top) -- where you configure your request. Two editing modes are available: Visual (form-based) and JSON (raw editor). The badge next to the editor shows the target API endpoint (e.g. POST /v1/chart).
3. Preview (right/bottom) -- the rendered result appears here after you click Run (or press Cmd+Enter / Ctrl+Enter). Once rendered, three action buttons appear: Download, Copy cURL and Share.

Toolbar

The toolbar between the tabs and the editor contains several controls:

Control	What it does
Example selector (dropdown)	Load a pre-built example. Each product tab comes with several examples to get you started.
Switch to AI / Switch to manual	Toggle between the manual JSON editor and the AI prompt mode (charts and diagrams only).
Format dropdown (PNG / SVG)	Choose the output format before running.
API Key	Paste your API key to remove the watermark, raise rate limits, and unlock AI mode.
Export as code	Open a modal with a ready-to-use code snippet in cURL, Python, TypeScript or Go.
Focus mode	Hide the header and footer to maximize editing space.
Remaining runs	Shows how many free runs you have left in this session (resets on reload).
Run	Execute the request and render the preview. Keyboard shortcut: Cmd+Enter (Mac) or Ctrl+Enter.

Charts

Select the Charts tab to build chart images.

Visual mode

The visual editor breaks the chart config into sections:

• General -- pick the chart type (Bar, Line, Area, Doughnut, Pie, Radar, Polar Area, Bubble, Scatter, Mixed), legend position, title, subtitle, dimensions and background color.
• Labels (X-axis) -- add, edit or remove category labels. Click the + button or Add label to add more.
• Datasets -- each dataset has a name, values (one per label), fill color and border color. Click Add dataset to add another series. Click the x button next to a dataset name to remove it.

Change any field and click Run to see the result.

JSON mode

Click the JSON tab to see (and edit) the raw JSON body that will be sent to POST /v1/chart. This is the same JSON format documented in the API reference. Edits made in visual mode are reflected here and vice versa.

Loading an example

Click the example selector dropdown in the toolbar (it shows the current example name, e.g. "Bar chart -- Monthly Sales"). A list of pre-built examples appears: bar charts, line charts, dual Y-axis, stacked area, doughnut, radar, pie, polar area, mixed charts, and share examples. Select one to load it into the editor.

Diagrams

Select the Diagrams tab to render text-based diagrams.

Visual mode

The visual editor shows two fields:

• Type -- pick the diagram language from a dropdown: Mermaid, GraphViz, PlantUML, D2, and 24 others.
• Source code -- a text area where you write the diagram source. Syntax depends on the selected type (e.g. graph TD\n A --> B for Mermaid).

JSON mode

Switch to JSON to edit the raw body sent to POST /v1/diagram. The JSON has three fields: diagram_type, diagram_source and output_format.

Examples

The example dropdown includes Mermaid flowcharts, sequence diagrams, ER diagrams, PlantUML component diagrams, D2 architecture diagrams, GraphViz dependency graphs, and share examples.

Barcodes

Select the Barcodes tab to generate 1D barcode images.

The visual editor lets you configure:

• Data -- the value to encode (e.g. 4006381333931 for EAN-13).
• Type -- barcode format: Code 128, EAN-13, EAN-8, UPC-A, Code 39, ITF-14, GS1-128, and more.
• Styling -- bar height, bar width, color, background, margins, rotation, text display and alignment.

The example dropdown includes EAN-13, UPC-A, Code 128, GS1-128, ITF-14, styled dark themes, rotated labels, print-ready configurations and more.

QR Codes

Select the QR Codes tab to generate styled QR codes.

The visual editor lets you configure:

• Data -- the value to encode: a URL, email, phone number, WiFi credentials, vCard, geolocation, or plain text.
• Style -- dot type (square, rounded, dots, diamond, classy, classy-rounded, extra-rounded...), size, error correction level, colors, background, margin and overall shape (square or circle).
• Corners -- custom finder pattern styling (outer and inner shapes, colors).
• Gradients -- for full gradient control, switch to JSON mode and use the gradient object syntax.

The example dropdown includes simple URLs, rounded dots, diamond modules, gradient QR codes, circle-shaped QR codes, vCard contacts, WiFi codes, dark themes, and custom corner examples.

Labels

Select the Labels tab to preview thermal labels and receipts.

The visual editor lets you configure:

• Label dimensions -- width, height, unit (mm, inch, dot), DPI, gap and printer profile.
• Language -- target printer language for preview rendering: TSC, ZPL, EPL, ESC/POS, CPCL, DPL, SBPL, Star PRNT or IPL.
• Elements -- add text, boxes, lines, circles, ellipses, reverse regions and raw commands. Each element has position, size and styling properties.

The example dropdown includes product labels (TSC), shipping labels (ZPL), receipts (ESC/POS), QC stamps, FRAGILE inverted labels, labels with all shapes, printer profiles, and more.

AI mode

For Charts and Diagrams, click the Switch to AI button in the toolbar to enter AI prompt mode.

Instead of filling out a form or writing JSON, describe what you want in plain English:

"A stacked bar chart comparing monthly revenue by product line over H1 2026, clean style with a legend at the bottom"

The AI mode shows different fields:

• Prompt -- your plain-English description (max 1000 characters).
• Raw data (optional) -- paste existing data so the AI uses your numbers exactly. Accepts CSV-like strings, JSON arrays, or JSON objects.
• Overrides -- title, subtitle, legend position.
• Output -- width, height, background color, pixel ratio.

AI mode requires an API key. If you don't have one, click the Get a free key link in the yellow banner or the API Key button in the toolbar. The endpoint changes to POST /v1/chart/ai or POST /v1/diagram/ai depending on the active tab.

To switch back to the manual JSON editor, click Switch to manual.

Running and previewing

Click the Run button (or press Cmd+Enter / Ctrl+Enter) to execute the request. The preview panel shows the rendered image.

Once a result is rendered, three action buttons appear in the preview header:

Button	What it does
Download	Save the rendered image to your computer as PNG or SVG.
Copy cURL	Copy a curl command to your clipboard that reproduces the exact same request. Paste it in a terminal to generate the image programmatically.
Share	Persist the result and get a shareable URL. The result is stored on ChartQuery servers (3-day expiry on free plan, 6 months on paid).

Exporting code

Click Export as code in the toolbar to open a modal with a ready-to-use code snippet that reproduces the current request. Four languages are available:

• cURL -- a curl command you can paste in any terminal.
• Python -- uses the requests library.
• TypeScript -- uses fetch.
• Go -- uses net/http.

Each snippet includes a placeholder YOUR_API_KEY header. Replace it with your actual key from app.chartquery.com. Click Copy to copy the snippet to your clipboard.

Connecting your API key

Click the API Key button in the toolbar to enter your key. With a key connected:

• The watermark is removed from rendered images.
• Rate limits are raised according to your plan.
• AI mode is unlocked (the Run button becomes active).
• Shared results expire after 6 months instead of 3 days.

You can get a free API key at app.chartquery.com.

Focus mode

Click Focus mode to hide the page header and footer. The playground expands to fill the full viewport, giving you more room for the editor and preview. Click the button again to restore the normal layout.

Tips

• Start with an example. Pick one from the dropdown, run it, then modify the values to match your data. It's faster than starting from scratch.
• Use JSON mode for precision. The visual editor covers the most common fields. For advanced options (custom options object, Chart.js plugins, gradient QR colors, corner styling), switch to JSON mode.
• Keyboard shortcut. Press Cmd+Enter (Mac) or Ctrl+Enter (Windows/Linux) to run without reaching for the button.
• Copy cURL for integrations. After building what you want visually, click Copy cURL to get the exact request you need to reproduce the result from your backend.
• Switch format before running. Set the format dropdown to SVG before running if you need vector output. The preview renders the same either way, but the downloadable file will be different.
• AI mode for quick drafts. If you're not sure what chart type to use or how to structure the data, start in AI mode with a plain-English prompt. Once the AI generates a result, switch back to manual mode and refine the JSON.