QuickChart Documentation

Getting Started

QuickChart is a web service that generates chart images on-the-fly. These images are suitable for embedding in email, SMS, chatbots, and other formats. Charts are rendered by Chart.js, a popular open-source charting library. QuickChart is 100% open-source.

Quick Example

QuickChart works by taking Chart.js configurations and rendering them on the backend as an image. You can provide a configuration object using HTTP GET or POST requests.

For example, this simple URL: https://quickchart.io/chart?c={type:'bar',data:{labels:[2012,2013,2014,2015,2016],datasets:[{label:'Users',data:[120,60,50,180,120]}]}}

Shows this image:

QuickChart supports many types of charts and is highly customizable. Explore the documentation below to learn how to use it, jump to the chart gallery, or experiment in the live editor.

If you're stuck or running into a problem, feel free to email support or open a Github issue.

Migrating from Google Image Charts

QuickChart supports the most common parts of Google Image Charts format. For more information, see Migrating from Google Image Charts.

Chart API Parameters

The chart endpoint https://quickchart.io/chart accepts these query parameters:

Combine these parameters in your query string. For example: /chart?width=500&height=300&format=pdf&c={...}

Advanced API

POST endpoint

If your chart is large or complicated, you may prefer to send a POST request rather than a GET request. This avoids limitations on URL length and means you don't have to worry about URL encoding. The /chart POST endpoint takes the same parameters as above via the following JSON object:

"backgroundColor": "transparent",
"width": 500,
"height": 300,
"format": "png",
"chart": {...},

Note that if you want to include Javascript code in chart (e.g. to format labels), you'll have to send the entire chart parameter as a string rather than a JSON object.

Short URLs

You may want to create a shorter URL for your charts, especially if you are sending them via email or SMS. To generate a short URL alias, send a POST request to https://quickchart.io/chart/create per the above POST spec. For example:

curl -X POST \
-H 'Content-Type: application/json' \
-d '{"chart": {"type": "bar", "data": {"labels": ["Hello", "World"], "datasets": [{"label": "Foo", "data": [1, 2]}]}}}' \

You will get a response that looks like this:

"success": true,
"url": "https://quickchart.io/chart/render/9a560ba4-ab71-4d1e-89ea-ce4741e9d232"

Go to the url in the response to render your chart.

Note the following caveats:

Chart Types

Customization can be very simple. By changing type: bar to type: line, for example, we can instantly produce an equivalent line graph:

Bar Graph

<img src="https://quickchart.io/chart?c={type:'bar',data:{labels:['January','February', 'March','April', 'May'], datasets:[{label:'Dogs',data:[50,60,70,180,190]},{label:'Cats',data:[100,200,300,400,500]}]}}">

Bar Chart documentation

Line Graph

<img src="https://quickchart.io/chart?c={type:'line',data:{labels:['January','February', 'March','April', 'May'], datasets:[{label:'Dogs', data: [50,60,70,180,190], fill:false,borderColor:'blue'},{label:'Cats', data:[100,200,300,400,500], fill:false,borderColor:'green'}]}}">

Line Chart documentation

There are many other chart types as well:

Radar Chart

<img src="https://quickchart.io/chart?c={type:'radar',data:{labels:['January','February', 'March','April', 'May'], datasets:[{label:'Dogs',data:[50,60,70,180,190]},{label:'Cats',data:[100,200,300,400,500]}]}}">

Radar Chart documentation

Pie Chart

<img src="https://quickchart.io/chart?c={type:'pie',data:{labels:['January','February', 'March','April', 'May'], datasets:[{data:[50,60,70,180,190]}]}}">

Pie Chart documentation

Doughnut Chart

<img src="https://quickchart.io/chart?c={type:'doughnut',data:{labels:['January','February', 'March','April', 'May'], datasets:[{data:[50,60,70,180,190]}]}}">

Doughnut Chart documentation

Scatter Plot

<img src="https://quickchart.io/chart?c={type:'scatter',data:{datasets:[{label:'Data 1',data:[{x:2,y:4},{x:3,y:3},{x:-10,y:0},{x:0,y:10},{x:10,y:5}]}]}}">

Scatter Chart documentation

Bubble Chart

<img src="https://quickchart.io/chart?c={type:'bubble',data:{datasets:[{label:'Data 1',data:[{x:1,y:4,r:9},{x:2,y:4,r:6},{x:3,y:8,r:30},{x:0,y:10,r:1},{x:10,y:5,r:5}]}]}}">

Bubble is similar to Scatter except that the r variable defines bubble radius in pixels. Bubble Chart documentation

Radial Gauge / "Meter" Charts

<img src="https://quickchart.io/chart?c={type:'radialGauge',data:{datasets:[{data:[70],backgroundColor:'green'}]}}">

View the options at chartjs-radial-gauge for customization details.


<img src="https://quickchart.io/chart?c={type:'sparkline',data:{datasets:[{data:[140,60,274,370,199]}]}}">

A sparkline is a special case of line graph with axes and other labeling removed. All line graph options can be applied.

You can combine charts together by specifying different "types":

Mixed Charts

<img src="https://quickchart.io/chart?c={type:'bar',data:{labels:['January','February', 'March','April', 'May'], datasets:[{label:'Dogs',data:[50,60,70,180,190]},{label:'Cats',data:[100,200,300,400,500],},{type:'line',fill:false, label:'Potatoes',data:[100,400,200,400,700]}]}}">

QR codes

This web service supports QR code generation. You can render a QR code like so:

https://quickchart.io/qr?text=Here's my text

Remember the URL-encode your text parameter for more complex strings. The QR endpoint produces a PNG image by default. You may optionally set the query parameter format=svg for SVG format.

Specify the whitespace around QR image in modules with query parameter margin (defaults to 4), size in pixels of the square QR image (defaults to 150), and error correction level with ecLevel=M (valid values: L, M, Q, H).

If you'd like to customize the color of your QR code, use dark=000000 and light=ffffff. The parameters must be hex color codes. Here's the same code as above but with slimmer margins, more error protection, and colors:


Using Javascript functions

Simple chart configs are defined using only JSON, but more complex chart configs may include Javascript functions. QuickChart accepts charts containing Javascript.

If you're using a GET request, all you need to do is include your function in the chart definition. If you're using a POST request, make sure you send the chart parameter as a string rather than a JSON object.

Building chart objects in Javascript

Below are a few Javascript examples showing how to build a chart definition containing a function:

Option 1: Build the config as a string, not an object. This is the most straightforward way.

Option 2: Construct your chart as a JSON object. Later, substitute your Javascript function.

Option 3: Serialize a normal Javascript object containing a function using javascript-stringify. This is probably the easiest to work with but it requires an external dependency.

Plugins: Annotations and Labels

Three additional Chart.js plugins are supported: Data Labels (chartjs-plugin-datalabels), Annotations (chartjs-plugin-annotation), and Outlabels (chartjs-plugin-piechart-outlabels). These allow you to add various markup to your chart. Have a look at the documentation for each plugin to learn more about the possibilities.

An example of Chart.js data labels and annotations:

An example of the outlabeledPie type:

Sandbox Editor

Try it yourself

Frequently Asked Questions

How can I make my chart look like X?

QuickChart uses the popular open-source Chart.js library, so you can use all Chart.js documentation and Chart.js-related search terms to answer questions on how to customize your chart. If you're stuck, feel free to email us.

Do I need a license to use QuickChart?

Charts generated by QuickChart are public domain. You don't need a license or any permission to use or distribute images produced by this site.

If you'd like to fork the code, keep in mind this project is licensed under GPLv3 and you should make your code public and retain the copyright notice. If you'd like to license QuickChart privately or commercially, or if you'd like help setting up a private instance, please get in touch.

Is this a suitable replacement for Google Image Charts?

This service is a replacement for the Google Image Charts API, which turned off on March 14, 2019. QuickChart provides a drop-in replacement for Google Image Charts documented here.

QuickChart encourages the use of Chart.js format over the deprecated Google Image Charts format. Although Chart.js doesn't match exactly with the Google Image Charts API, it is a more flexible, general-purpose charting specification. Both Chart.js and QuickChart have strong open-source communities.

We encourage developers to choose a fully open-source solution over proprietary services in order to mitigate risk and future-proof their choice of API.

How reliable is QuickChart?

This site (QuickChart.io) is widely used and generates over 16 million charts per month. There is a built-in rate limit of 60 charts/min (1 chart/sec) per IP for free users.

If you want to adjust rate limits or need a Service-Level Agreement with uptime guarantees, purchase a license or get in touch.

See also the QuickChart status page, which monitors uptime.

How can I contribute?

QuickChart is under active development. If you'd like to suggest a feature or modify QuickChart code, please open an issue or pull request on the QuickChart Github.