Recipes / Migrating from QuickChart
Convert a QuickChart URL
Paste a QuickChart chart URL, or just a Chart.js config. You get the ChartPNG URL, the Chart.js 4 config it draws, what was changed on the way, what needs your attention and a live preview.
Your ChartPNG URL
Preview
What changed
What needs your attention
The config ChartPNG draws
This is the Chart.js 4 config inside the URL, after the fixes above. Use it as your config from now on.
What it converts
The page reads the parameters QuickChart documents for /chart: chart or c,width or w, height or h, backgroundColor or bkg,devicePixelRatio, version or v, format or f,encoding and key. The config goes through the same lenient parsing as every ChartPNG request: JavaScript syntax becomes JSON, and Chart.js 2 options are translated to Chart.js 4. The docs list every fix code.
| QuickChart | ChartPNG URL |
|---|---|
width, height (default 500 and 300) | w, h, always written out. Between 50 and 2000. |
devicePixelRatio (default 2) | dpr, always written out. 1 or 2. |
backgroundColor (default transparent) | bkg, transparent when the URL has none. ChartPNG is white otherwise. |
encoding=base64 | Decoded here and sent as plain JSON. |
version, format, key | Not carried over: ChartPNG refuses them, draws Chart.js 4 and PNG only, and never takes a key in a URL. |
What does not convert
These are the cases the page cannot fix for you. It names them in What needs your attention when it finds them in what you pasted.
| In your QuickChart chart | What ChartPNG does | What to do |
|---|---|---|
type: 'horizontalBar' | Refused with a 400. | Use type: 'bar' with options.indexAxis: 'y'. The value axis is then scales.x and the label axis scales.y. |
A time or timeseries axis | Cannot be drawn: Chart.js needs a date adapter for it and ChartPNG has none. | Write the dates as labels and use a category axis. |
| Functions: tick callbacks, label formatters | Removed, never run. The option they set is gone. | Put the final text in your data or labels. |
QuickChart-only types: progressBar, gauge, radialGauge, sparkline, sankey, violin, boxplot, funnel and candlestick | Refused with a 400. ChartPNG draws bar, line, pie, doughnut, radar, polarArea, scatter and bubble. | For a sparkline or a progress-style bar, see the KPI sparkline guide. The others have no equivalent. |
Plugins QuickChart bundles, such as datalabels and doughnutlabel | Their options are ignored: ChartPNG has Chart.js core only. | None. The chart draws without them. |
| Several axes without ids, an axis a dataset names by id, an option Chart.js 4 could not draw once renamed | Left as written, and Chart.js 4 ignores the v2 form. | Rewrite it as scales.x, scales.y or one entry per axis id. The page says which axis it left. |
Short URLs and templates: quickchart.io/chart/render/... | The page cannot read them: the config is on QuickChart's server. | Open the URL at QuickChart, copy the full chart URL or the config, and paste that. |
One difference is fixed for you and is worth knowing: Chart.js 2 filled the area under a line by default and Chart.js 4 does not. The page shows it as the fix v2_defaults. A dataset that says fill: false keeps its plain line. A chart that sets no colors gets the ChartPNG theme, which draws its own soft area under a single line.
Your config and your privacy
The URL is read in your browser. To check the config and draw the preview, the page sends the config, the size and the background to ChartPNG, as any chart request does (POST /chart.json, then the image from GET /chart). A key in the URL is never sent. Nothing you paste is kept by the page.
Back to Migrating from QuickChart.
Sources
Claims about other products, read at their source on 3 Nov 2026.
- QuickChart width defaults to 500 and height to 300, both before the pixel ratio:
Width of the image in pixels, before applying devicePixelRatio.
quickchart.io - QuickChart pixel ratio defaults to 2:
Device pixel ratio of the output.
quickchart.io - QuickChart background defaults to transparent:
Background of the chart canvas.
quickchart.io - QuickChart version defaults to 2:
Chart.js major version.
quickchart.io - QuickChart can answer in other formats than PNG:
Format of your output.
quickchart.io - QuickChart can read the chart parameter as base64:
Encoding of your chart parameter.
quickchart.io - QuickChart has an API key parameter:
Your QuickChart API key.
quickchart.io - QuickChart adds chart types that are not in Chart.js:
A progress bar is a special case of a horizontal bar chart with axes and other labeling removed.
quickchart.io - QuickChart adds box plot and violin types:
You can use violin, boxplot, horizontalBoxPlot, and horizontalViolin chart types.
quickchart.io - QuickChart adds funnel charts through a plugin:
QuickChart supports funnel charts (aka pyramid charts) using chartjs-chart-funnel for Chart.js version 3+.
quickchart.io - QuickChart bundles the datalabels plugin:
This chart also uses the datalabels plugin.
quickchart.io - QuickChart short URLs and templates live under /chart/render/:
Customize a template by adding URL parameters to the template URL.
quickchart.io - Chart.js v3 replaced horizontalBar:
Horizontal bar charts can be configured using the new indexAxis option
www.chartjs.org - Chart.js v3 keys a scale by its id:
Scales are now configured directly to options.scales object with the object key being the scale Id.
www.chartjs.org - Chart.js v3 renamed steppedLine:
The dataset option steppedLine was removed. Use stepped
www.chartjs.org - Chart.js v3 stopped filling lines by default:
elements.line.fill default changed from true to false.
www.chartjs.org - Chart.js v4 renamed the scale border option:
scales[id].grid.drawBorder has been renamed to scales[id].border.display.
www.chartjs.org - The Chart.js time scale needs a date adapter:
The time scale requires both a date library and a corresponding adapter to be present.
www.chartjs.org - In Chart.js 4 bold is a font weight, not a font style:
Default font weight (boldness).
www.chartjs.org