Create embeddable chart images with a single URL

Static embeddable image charts for email, SMS, reports, and more

<img src="https://quickchart.io/chart?width=500&height=300&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]}]}}">

Try it yourself

{ type: 'bar', data: { labels: [2012, 2013, 2014, 2015, 2016], datasets: [{ label: 'Raisins', data: [12, 6, 5, 18, 12] }, { label: 'Bananas', data: [4, 8, 16, 5, 5] }] } }

Customize Your Chart

Let's get creative. The example below uses custom background colors, title, legend, stacked bars, axis labels, and data labels:

{ type: 'bar', data: { labels: ['January', 'February', 'March', 'April', 'May'], datasets: [{ label: 'Dogs', backgroundColor: 'chartreuse', data: [ 50, 60, 70, 180, 190 ] }, { label: 'Cats', backgroundColor: 'gold', data: [ 100, 200, 300, 400, 500 ] }] }, options: { title: { display: true, text: 'Total Revenue (billions)', fontColor: 'hotpink', fontSize: 32, }, legend: { position: 'bottom', }, scales: { xAxes: [{stacked: true}], yAxes: [{ stacked: true, ticks: { callback: function(value) { return '$' + value; } } }], }, plugins: { datalabels: { display: true, font: { style: 'bold', }, }, }, }, }

You can use any static customization option available in Chart.js. The best place to learn the extent of customization options is through the documentation.

A couple things to remember when customizing your chart:

• We recommend that you URL-encode the entire chart config or base64 encode your chart config (with &encoding=base64). If not encoded, you will run into problems with the # symbol and other special characters.
• Interactivity and animations are not supported (this service produces static images)

The chart endpoint accepts these query parameters:

• width=500: Width of the image. Abbreviated as "w"
• height=300: Height of the image. Abbreviated as "h"
• backgroundColor=transparent: Background of the chart canvas. Abbreviated as "bkg"
• format=png: Format of your output. Currently the two supported output formats are PNG and PDF. Abbreviated as "f"
• devicePixelRatio=2.0: Device pixel ratio of the output (defaults to retina=2.0). Note that width and height are multiplied by this value.
• encoding=url: Encoding of your "chart" parameter. Accepted values are url and base64.

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 parameter as a string rather than a JSON object.

Short URLs

You may like to create a shorter URL for your charts, especially if you are sending them via email or SMS. 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]}]}}}' \
   https://quickchart.io/chart/create
  

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:

• This feature is in beta as of its release on August 26, 2019.
• Request inputs are not validated before the URL is created. The chart is only rendered when the URL is visited.
• Saved charts only support JSON for now (no Javascript functions)
• Saved charts expire after 3 months.

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]}]}}">

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]},{label:'Cats',data:[100,200,300,400,500]}]}}">

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]}]}}">

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]}]}}">

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]}]}}">

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}]}]}}">

Bubble Chart

The r variable defines bubble radius in pixels:

<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}]}]}}">

Radial Gauge / "Meter" Charts

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

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

Sparklines

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

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

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]}]}}">

Chart Annotations and Plugins

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:

{ type: 'line', data: { labels: [1,2,3,4,5], datasets: [{ label: 'Rainfall', data: [ 200, 90, 120, 400, 500 ], fill: false, borderColor: 'green', backgroundColor: 'green', }] }, options: { annotation: { annotations: [{ type: 'line', mode: 'vertical', scaleID: 'x-axis-0', value: 2, borderColor: 'red', borderWidth: 4, label: { enabled: true, content: 'Something changed' } }, { type: 'box', xScaleID: 'x-axis-0', yScaleID: 'y-axis-0', xMin: 3, xMax: 5, backgroundColor: 'rgba(200, 200, 200, 0.2)', borderColor: '#ccc', }] }, plugins: { datalabels: { display: true, align: 'bottom', backgroundColor: '#ccc', borderRadius: 3 }, } } }

An example of the outlabeledPie type:

{ "type": "outlabeledPie", "data": { "labels": ["ONE", "TWO", "THREE", "FOUR", "FIVE"], "datasets": [{ "backgroundColor": ["#FF3784", "#36A2EB", "#4BC0C0", "#F77825", "#9966FF"], "data": [1, 2, 3, 4, 5] }] }, "options": { "plugins": { "legend": false, "outlabels": { "text": "%l %p", "color": "white", "stretch": 35, "font": { "resizable": true, "minSize": 12, "maxSize": 18 } } } } }

QR codes

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

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:

Frequently Asked Questions

Is QuickChart reliable?

This site (QuickChart.io) is widely used and generates over 16 million charts per month without issue. That's an average of 6 charts per second over the entire month! There is a built-in rate limit of 240 charts/min (4 charts/sec) per IP.

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

See also the QuickChart status page, which monitors uptime.

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.

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 choices.

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.

About QuickChart.io

The QuickChart is provided for free and open source. You may use images produced by this website for any purpose. This service was built in response to the Google Image Charts shutdown and is supported by Arthena and Zenysis.

The QuickChart.io site is a public service that is shared between many users. It serves over 16 million charts per month. There is a 240 requests per minute per IP rate limit (4 charts/sec) on the public service. If you'd like to exceed this limit, please contact us to request an exception or discuss commercial pricing.

QuickChart is open source, dual licensed under the GNU GPLv3 and a commercial license. This means that QuickChart is never going away; anyone can host this service with minimal resource requirements. If you would like to modify QuickChart source code for commercial use, please contact us for a license.