Create static charts for embedding in email, SMS, reports, and more.
How It Works · Customize Your Chart · Chart Types · QR Codes · Open Source
<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.
Chart images are defined by their URLs. Each URL contains a JSON/Javascript 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 config, render it as an image with https://quickchart.io/chart?c=[[insert config here]]
. Try the realtime editor below:
Let's get creative. The example below uses custom background colors, title, legend, stacked bars, axis labels, and data labels:
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:
#ff0000
→ %23ff0000
, or just use the rgb(255, 0, 0)
equivalentWe 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"/chart?width=500&height=300&c={...}
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,
"chart": {...},
}
Note that if you want to include Javascript options in chart
, you'll have to send the parameter as a string rather than a JSON object.
Customization can be very simple. By changing type: bar
to type: line
, for example, we can instantly produce an equivalent line 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]}]}}">
<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:
<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]}]}}">
<img src="https://quickchart.io/chart?c={type:'pie',data:{labels:['January','February','March','April', 'May'], datasets:[{data:[50,60,70,180,190]}]}}">
<img src="https://quickchart.io/chart?c={type:'doughnut',data:{labels:['January','February','March','April', 'May'], datasets:[{data:[50,60,70,180,190]}]}}">
<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}]}]}}">
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'}]}}">
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":
<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]}]}}">
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:
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.
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:
https://quickchart.io/qr?text=Here's%20my%20text&dark=f00
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 Arthena and Skeptical Investments.
QuickChart is a free 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.