QuickChart Documentation
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.
Do you have questions? Don't hesitate to send us a message or open a Github issue.
QuickChart works by taking Chart.js configurations and rendering them on the backend as an image. You may send your chart configuration in JSON or Javascript format using a simple URL or through POST request.
For example, take this simple Chart.js configuration:
{
type: 'bar', // Show a bar chart
data: {
labels: [2012, 2013, 2014, 2015, 2016], // Set X-axis labels
datasets: [{
label: 'Users', // Create the 'Users' dataset
data: [120, 60, 50, 180, 120] // Add data to the chart
}]
}
}
We'll pack this Chart.js object into the /chart
endpoint URL:
The URL generates this chart image, a rendering of the Chart.js config above:
Make adjustments to this example - try editing the chart and replacing "bar" with "line" or "pie" to get different types of chart, change the legend labels, or add another dataset to get a grouped bar chart.
Because QuickChart is built on open-source chart libraries, our charts are flexible and highly customizable. Explore the documentation below to learn more or view more examples.
The chart endpoint https://quickchart.io/chart
accepts these query parameters:
chart
: Javascript/JSON definition of the chart. Use a Chart.js configuration object. Abbreviated as "c"
It is best practice to URL-encode your chart configuration. If not encoded, you may run into problems with special characters or syntax errors in your program. You may also use base64 encoding (see encoding
option).
width=500
: Width of the image. Abbreviated as "w"height=300
: Height of the image. Abbreviated as "h"devicePixelRatio=2.0
: Device pixel ratio of the output (defaults to retina=2.0). Width and height are multiplied by this value.backgroundColor=transparent
: Background of the chart canvas. Accepts rgb (rgb(255,255,120)
), colors (red
), and url-encoded hex values (%23ff00ff
). Abbreviated as "bkg"format=png
: Format of your output. Supported output formats are PNG, WebP, and PDF. Abbreviated as "f"encoding=url
: Encoding of your "chart" parameter. Accepted values are url
and base64
.version=2.9.3
: Chart.js version to use. Currently only 2.9.3 is supported.
Combine these parameters in your query string. For example: /chart?width=500&height=300&format=pdf&c={...}
. Numerous client libraries are available so you do not need to construct the URL yourself, if you prefer.
Errors that prevent the chart from rendering will return an HTTP status code 500. In most cases, the error will be rendered in the requested image format. If an error is rendered in an image, it is also included as a string in the X-quickchart-error
HTTP header.
An example error due to invalid chart config - not URL encoded.
Invalid or unexpected token: Invalid Chart.js configurations may return errors similar to this one. The most common cause of this error is that the caller forgot to URL-encode the chart
variable. The next most common cause is invalid JSON/Javascript syntax in the chart configuration.
Cannot read property <X> of undefined and <X> is not a function: Access to certain Chart.js internals, used especially in plugins, is restricted due to potential for abuse. Contact us to get whitelisted for these features.
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. For examples, see documentation on using JS Functions.
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 for your chart, send a POST request to https://quickchart.io/chart/create
per the above POST spec.
Here's an example using curl. You can use any library that sends an HTTP POST request:
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
Here's an equivalent request using Python:
import json
import requests
quickchart_url = 'https://quickchart.io/chart/create'
post_data = {'chart': {'type': 'bar', 'data': {'labels': ['Hello', 'World'],
'datasets': [{'label': 'Foo', 'data': [1, 2]}]}}}
response = requests.post(
quickchart_url,
json=post_data,
)
if (response.status_code != 200):
print('Error:', response.text)
else:
chart_response = json.loads(response.text)
print(chart_response)
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.
Please note the following limitations:
If you prefer not to edit a Chart.js configuration directly, use the Chart Maker to create a chart without code. Then, save the chart as a template and customize it using a few URL parameters, or embed it anywhere.
To learn more about no-code chart APIs, read more here.
Using the no-code chart builder to generate a customized chart API.
You can use the QuickChart web service by building a standard URL, so a client library is not a requirement. However, we've released several optional client libraries for your convenience:
Run npm install quickchart-js
to install the QuickChart dependency. Use it like so:
const QuickChart = require('quickchart-js');
const myChart = new QuickChart();
myChart
.setConfig({
type: 'bar',
data: { labels: ['Hello world', 'Foo bar'], datasets: [{ label: 'Foo', data: [1, 2] }] },
})
.setWidth(800)
.setHeight(400)
.setBackgroundColor('transparent');
// Print the chart URL
console.log(myChart.getUrl());
Get more details on the quickchart-js project page.
Run pip install quickchart.io
to install the QuickChart dependency. Use it like so:
from quickchart import QuickChart
qc = QuickChart()
qc.width = 500
qc.height = 300
qc.device_pixel_ratio = 2.0
qc.config = {
"type": "bar",
"data": {
"labels": ["Hello world", "Test"],
"datasets": [{
"label": "Foo",
"data": [1, 2]
}]
}
}
# Print the chart URL
print(qc.get_url())
Read the full Python tutorial or see details on the quickchart-python project page.
Run gem install quickchart
to install the QuickChart Ruby gem:
require 'quickchart'
qc = QuickChart.new(
{
type: "bar",
data: {
labels: ["Hello world", "Test"],
datasets: [{
label: "Foo",
data: [1, 2]
}]
}
},
width: 600,
height: 300,
device_pixel_ratio: 2.0,
)
# Print the chart URL
puts qc.get_url
Learn more about chart generation in Ruby at the quickchart-ruby repository.
Run composer install ianw/quickchart
to install the QuickChart PHP library:
require 'quickchart'
$qc = new QuickChart(array(
'width': 600,
'height': 300,
));
$qc.setConfig('{
type: "bar",
data: {
labels: ["Hello world", "Test"],
datasets: [{
label: "Foo",
data: [1, 2]
}]
}
}');
// Print the chart URL
echo $qc->getUrl();
See the PHP QuickChart client at the quickchart-php repository.
Add the QuickChart package from NuGet. Then use the Chart
object provided by the QuickChart
namespace:
namespace QuickChartExample
{
public class SimpleExample
{
static void Main(string[] args) {
Chart qc = new Chart();
qc.Width = 500;
qc.Height = 300;
qc.Config = @"{
type: 'bar',
data: {
labels: ['Hello world', 'Test'],
datasets: [{
label: 'Foo',
data: [1, 2]
}]
}
}"
Console.WriteLine(qc.GetUrl());
}
}
}
The C# QuickChart client is available on NuGet and at the quickchart-csharp repository.
Add the QuickChart package from Maven Central. If you use Maven or Gradle, you can add it to your config (view details).
This library provides an io.quickchart
package that contains a QuickChart
class:
import io.quickchart.QuickChart;
public class PrintUrlExample {
public static void main(String[] args) {
QuickChart chart = new QuickChart();
chart.setWidth(500);
chart.setHeight(300);
chart.setConfig("{"
+ " type: 'bar',"
+ " data: {"
+ " labels: ['Q1', 'Q2', 'Q3', 'Q4'],"
+ " datasets: [{"
+ " label: 'Users',"
+ " data: [50, 60, 70, 180]"
+ " }]"
+ " }"
+ "}"
);
System.out.println(chart.getUrl());
}
}
The Java library is open-source and accessible on Github.
QuickChart is not limited to the listed libraries. You can create a QuickChart URL in any language by building a URL string. Because building a URL string is a matter of string concatenation, this can be done in any language.
See the API Parameters documentation to learn how to build a URL that renders a chart image. If you need help, please reach out and we will help you implement in your preferred programming language.
We've created dozens of examples of different charts that you can edit interactively.
For a variety of useful editable examples, see the chart gallery.
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]}]}}">
Set type
to horizontalBar
for a horizontal bar chart. Bar Chart documentation
<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'}]}}">
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]}]}}">
Pie Chart documentation. You can also use options for the Chart.js datalabels plugin.
Learn how to customize pie chart labels.
<img src="https://quickchart.io/chart?c={type:'doughnut',data:{labels:['January','February','March','April','May'],datasets:[{data:[50,60,70,180,190]}]},options:{plugins:{doughnutlabel:{labels:[{text:'550',font:{size:20}},{text:'total'}]}}}}">
Doughnut Chart documentation. You can also use options from the Chart.js doughnutlabel plugin.
Learn how to customize doughnut chart labels.
<img src="https://quickchart.io/chart?c={type:'polarArea',data:{labels:['January','February', 'March','April', 'May'], datasets:[{data:[50,60,70,180,190]}]}}">
Polar charts are like pie and doughnut charts, except each segment has the same angle and the radius of the segments varies based on the value. Polar Area Chart documentation
<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}]}]}}">
<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
<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:'violin', data:{labels:[2012,2013,2014,2015], datasets:[{label:'Data',data:[[12,6,3,4], [1,8,8,15],[1,1,1,2,3,5,9,8], [19,-3,18,8,5,9,9]], backgroundColor:'rgba(56,123,45,0.2)', borderColor:'rgba(56,123,45,1.9)'}]}}">
You can use violin
, boxplot
, horizontalBoxPlot
, and horizontalViolin
chart types. View the options at chartjs-chart-box-and-violin-plot for customization details. For best results, add it with a scatter plot!
<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. Read more about the sparkline API.
<img src="https://quickchart.io/chart?c={type:'progressBar',data:{datasets:[{data:[50]}]}}">
A progress bar is a special case of a horizontal bar chart with axes and other labeling removed. All bar options can be applied.
The first dataset specifies the number shown. By default, this number is a percentage and the total value is 100. If your data is not out of 100, add a second dataset to override the total.
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]}]}}">
This web service supports QR code generation. You may 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
determines the pixel dimensions of the 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
Use our interactive QR code generator to preview API behavior and test things out.
Customize your chart title by providing an options.title object.
You may specify a list of strings to show a multi-line title or subtitle. You may also set position, fontSize, fontFamily, fontColor, padding, and other attributes. See full Chart.js title documentation for more.
The example below sets options.title.display to true and options.title.text to "Basic chart title" in order to show a title at the top of the chart.
Chart gridlines are customizable by setting attributes on options.scales.<xAxes/yAxes>.gridLines. This configuration is very flexible. For example, you can change the color, size, and style of gridlines (e.g. making them dotted or dashed). See full Gridlines documentation for more.
The example below removes gridlines by setting gridLines.display to false.
There are several types of chart axes: Linear, Logarithmic, Time, Categorical, and Radial. If you are looking to create a standard chart, chances are you want to use a linear or time axis.
Axes are configured in the options.scales object. Learn more about chart axes, including attributes to customize those axes, here. Because a wide variety of customizations are possible, we've prepared a number of examples. Head over to the gallery to see some examples of custom axes and scales.
To set the range of chart values, use axis.ticks.min and axis.ticks.max. Use axis.ticks.stepSize to control how many tick marks appear in between. For more information, see Chart.js ticks.
This example sets the start value to 0 and the end value to 100, with tick marks every 20:
{
// ...
options: {
yAxes: [{
ticks: {
min: 0,
max: 100,
stepSize: 20
}
}]
}
}
You can also use the axis object to create a stacked bar chart by setting stacked to true on each axis. Read more here.
The example below includes a stacked bar chart.
It is possible to create two or more X or Y axes by providing multiple objects in the options.scales.xAxes or options.scales.yAxes lists. For each axis, set display to true and give it an id. Each dataset should reference this id as yAxisID or xAxisID. See below for an example.
There are a couple of ways that labels appear on charts.
X axis labels come from the "labels" property on the data.datasets object. See an example here. Y axis labels are automatically generated unless you are using a categorical axis. See an example here.
To format axis labels, use the options.scales.<xAxes/yAxes>.ticks property. Learn more about configuring ticks.
Here's an example that formats Y axis ticks as currency. The callback
function localizes the currency, adding commas (or other delimeter) to the thousands place. You can use this same technique to add percentage symbols and other label formatting rules to your chart:
See below for information on labeling data points and other areas of the graph.
In order to extend annotation and labeling capabilities beyond Chart.js defaults, we provide three additional Chart.js plugins: 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:
The chart legend can be customized via the options.legend property (more information on chart legend).
In the example below, we choose to show the legend by setting display to true, and then set the position and align properties to move it where we want to see it.
QuickChart supports all Google Noto fonts. Custom fonts are available upon request.
To change font size and style, you may set values for each component of the graph:
The example below displays a number of chart font size, style, and color customizations for each component of the chart:
Every aspect of chart coloration is customizable. All colors are taken as strings, in either hex, RGB, or by specifying a color name. To adjust opacity, set an RGBA value.
To color the chart background, set the backgroundColor
query parameter to fill the entire chart background. See API parameters.
To color data series, set the borderColor
and backgroundColor
properties on each dataset in your chart (datasets defined in data.datasets
in the chart configuration object).
The default color palette is based on Tableau's and is carefully designed to work well together yet remain distinct and friendly to conditions such as color blindness. You may specify select color schemes from the Chart.js colorschemes plugin, which offers predefined and well-known color schemes.
To customize font and label colors, see font customization.
To customize gridline and axis colors, reference gridlines documentation.
For advanced coloration and backgrounds, have a look at the chart gallery - patterns and fills for colorful examples, including examples of gradients, patterns, background images, and image fills.
Points may appear in a line, sparkline, radar, or bubble chart. Point style can be configured globally using the options.elements.point object. See Chart.js point configuration for more details. You may configure the following properties on the options.elements.point
object:
Name | Description |
---|---|
backgroundColor |
Fill color for points with inner space (e.g. circle, triangle) |
borderColor |
Color for points without inner space (e.g. star), border color for points with inner space (e.g. circle, triangle) |
borderWidth |
Border width in pixels. Defaults to 1 |
radius |
Point radius in pixels |
rotation |
Rotation of point shape, in degrees |
pointStyle |
Determines the shape of the point. One of the following values: circle, cross, crossRot, dash, line, rect, rectRounded, rectRot, star, triangle . Paid accounts may also use a custom image as a point.
|
To configure only the points for a specific data series, have a look at the Chart.js documentation for individual dataset properties. In particular, lines and radar charts can customize their points by setting the following. You may configure the following properties on the datasets
object.
Name | Description |
---|---|
pointBackgroundColor |
Fill color for points with inner space (e.g. circle, triangle) |
pointBorderColor |
Color for points without inner space (e.g. star), border color for points with inner space (e.g. circle, triangle) |
pointBorderWidth |
Border width in pixels. Defaults to 1 |
pointRadius |
Point radius in pixels |
pointRotation |
Rotation of point shape, in degrees |
pointStyle |
Determines the shape of the point. One of the following values: circle, cross, crossRot, dash, line, rect, rectRounded, rectRot, star, triangle . Paid accounts may also use a custom image as a point.
|
For live examples of charts with different point styles, see the chart gallery.
You can style lines by setting properties on the data.dataset object that defines your line series. See Chart.js line styling documentation for full details.
The following are useful styling properties that are available on the line object:
Name | Description |
---|---|
backgroundColor |
The color of area filled under the chart. |
borderCapStyle |
Cap style of the line. See MDN. |
borderColor |
The line color. |
borderDash |
Length and spacing of line dashes. Use this to create dashed or dotted lines. For example, a simple dashed line would be [2, 2]. See MDN. |
borderDashOffset |
Offset for line dashes. See MDN. |
borderJoinStyle |
Line joint style. See MDN. |
borderWidth |
The line width, in pixels. |
clip |
How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0} |
fill |
Set true to fill in area under the chart. |
lineTension |
Bezier curve tension of the line. Set to 0 to draw straightlines. Set 0.4 for line smoothing. |
showLine |
If false, the line is not drawn for this dataset. |
spanGaps |
If true, lines will be drawn between points with no or null data. If false, points with NaN data will create a break in the line. |
steppedLine |
If true, draw line as a stepped line. Other valid values include before for step-before interpolation, after for step-after interpolation, and middle for step-middle interpolation.
|
Line charts can be smoothed by setting the lineTension attribute on the dataset. For example:
{
data: {
datasets: [{
// ...
lineTension: 0.4
}]
}
}
A built-in plugin is available to users who want to round the corners of their bar charts. To round corners, set options.plugins.roundedBars to true:
{
// ...
options: {
plugins: {
roundedBars: true
}
}
}
You may also specify the pixel radius of the rounded corners using the cornerRadius property:
{
// ...
options: {
plugins: {
roundedBars: {
cornerRadius: 20
}
}
}
}
QuickChart provides retina support by default. To disable retina support set the devicePixelRatio to 1.0 (query parameters documentation). devicePixelRatio acts as a multiplier on the width and height of your chart. You will notice that by default, chart sizes are 2x the actual size requested.
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.
You may POST the following data. Note that this payload is valid JSON and the chart
object is a string containing Javascript or JSON:
{
"backgroundColor": "transparent",
"width": 500,
"height": 300,
"format": "png",
"chart": "{type:'bar',data:{labels:['January','February','March','April','May'],datasets:[{label:'Dogs',data:[50,60,70,180,190]}]},options:{scales:{yAxes:[{ticks:{callback:function(value){return'$'+value;}}}]}}}"
}
Put the above JSON in a file called chart_request.json
and send it via curl:
$ curl -X POST \
-H "Content-Type: application/json" \
-d @chart_request.json \
'https://quickchart.io/chart' > chart.png
Or use any other programming language's ability to send an HTTP POST request.
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.
const chartStr = `{
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [{
label: 'Dogs',
data: [ 50, 60, 70, 180, 190 ]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
callback: function(value) {
return '$' + value;
}
}
}],
},
},
}`;
console.log(encodeURIComponent(chartStr));
Option 2: Construct your chart as a JSON object. Later, substitute your Javascript function.
const chartObj = {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [{
label: 'Dogs',
data: [ 50, 60, 70, 180, 190 ]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
callback: '',
}
}],
},
},
};
const myFormatterFunction = function(value) {
return "$" + value
};
const chartStr = JSON.stringify(chartObj).replace('""', myFormatterFunction.toString());
console.log(encodeURIComponent(chartStr));
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.
const { stringify } = require('javascript-stringify');
const chartObj = {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [{
label: 'Dogs',
data: [ 50, 60, 70, 180, 190 ]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
callback: function(value) {
return '$' + value;
}
}
}],
},
},
};
console.log(encodeURIComponent(stringify(chartObj)));
QuickChart comes with several Chart.js plugins pre-installed. They are:
Use these plugins as you please in your chart config - no need to import anything extra.
As with any Chart.js chart, it's possible to add custom inline plugins by setting the plugins
attribute in your chart config.
Setting a custom plugins
object will override the plugins built into QuickChart.
Here's an example that adds some extra space between a pie chart and its legend. Note that the global Chart
object is available to the plugin:
{
"type": "pie",
"data": {
"labels": ["Yes", "No", "Maybe"],
"datasets": [{
"backgroundColor": ["#FF3784", "#36A2EB", "#4BC0C0"],
"data": [3, 24, 12]
}]
},
"plugins": [{
"beforeInit": function(chart, options) {
Chart.Legend.prototype.afterFit = function() {
// Add 50 pixels of height below the legend.
this.height = this.height + 50;
};
}
}]
}
It is also possible to add a logo to charts or watermark a chart. For more information, see our Watermark API.
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?
Users of QuickChart's paid versions retain full copyright to images they generate. Charts generated by QuickChart's free version are public domain.
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. It is hosted on a large cluster of redundant servers. 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.