Introduction

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.

Getting started

QuickChart works by taking Chart.js configurations and rendering them as images. 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 the Chart.js object into the /chart URL endpoint:

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

The URL generates this chart image, a rendering of the Chart.js config above:

Loading...

Try making adjustments to the example above!

1. Edit the chart and replace bar with line or pie to get a different type of chart.
2. Change the legend labels.
3. 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. Keep on reading to learn more or view more chart examples.

Using the API

The https://quickchart.io/chart endpoint supports both GET and POST methods. These parameters provide control over dimensions, resolution, background, and Chart.js version of your chart:

Parameter	Type	Description
chart	string	Chart.js configuration object to render. This is the definition of the chart in Javascript or JSON format.
width	integer	Width of image in pixels. Defaults to 500
height	integer	Height of image in pixels. Defaults to 300
devicePixelRatio	number	Device pixel ratio of output. Set to 1 for normal resolution, 2 for retina. Defaults to 2
backgroundColor	string	RGB, HEX, HSL, or color name. Defaults to transparent
version	string	Chart.js major version: 2, 3, or 4. Defaults to 2.
format	string	png, jpg, webp, svg, pdf, or base64. Defaults to png
encoding	string	url or base64. Defaults to url

info

Learn more about API parameters and the POST endpoint.

Most examples in these docs use Chart.js v2, the default. If you are using a Chart.js v3 or v4 configuration, set version in your request. See Chart.js versions for details.

Customization

Because QuickChart is built on the open-source Chart.js library, charts are flexible and highly customizable. To learn more, view our examples gallery or see the reference section to learn how to use Chart.js.

Loading...

QR codes

To learn more about generating QR codes, follow this link. To create QR codes you can edit after printing and track scans, see dynamic QR codes.

Other APIs

QuickChart also generates barcodes, word clouds, tables, and GraphViz diagrams. You can read QR codes or add a watermark to an image.

For OpenAPI metadata and JSON validation responses, see the agent-friendly API.

Need help?

If you have questions, please don't hesitate to ask in our community or send us a message.