Chart Images from URL


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

This service is a replacement for the Google Image Charts API, which is scheduled to turn off on March 14, 2019.

How It Works

Chart images are defined by their URLs. Each URL contains a JSON object that includes all the data and display options. These options follow the popular open-source graphing library Chart.js. Use the documentation to define your chart.

Once you've written your JSON, render it as an image with <img src="https://quickchart.io/chart?c=[[insert json here]]">. Try the realtime editor below:

Customize Your Chart

Let's get creative. The example below uses custom background colors, title, legend, stacked bars, 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}], }, 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 JSON block. If not URL-encoded, you must escape all hex characters, e.g. #ff0000%23ff0000, or just use the rgb(255, 0, 0) equivalent
  • Interactivity and animations are not supported (this service produces static images)

We also provide these additional options as query parameters:

  • &width=500: Set the width of the image. Abbreviated as "w"
  • &height=300: Set the height of the image. Abbreviated as "h"
  • &backgroundColor=transparent: Set the background of the chart canvas. Abbreviated as "bkg"
Combine these parameters in your query string. For example: /chart?width=500&height=300&c={...}

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

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

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

We also support 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.

About QuickChart.io

QuickChart is a free service built and maintained by Ian Webster. 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 its sponsors: Arthena and Skeptical Investments.

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.