Apex Charts server-side image rendering

This post describes our API for rendering Apex Charts as images. Use this method to render Apex Charts as images on the server-side.

This functionality is useful if you can’t create the chart in a browser, for example if you intend to embed these charts in emails or PDF reports.

Apex Chart rendered to image using the QuickChart API.

Usage

Rendering a chart is straightforward:

  1. Create a Javascript/JSON Apex Charts configuration object.
  2. URL-encode the configuration.
  3. Send the configuration to the API endpoint.

API endpoint:

https://quickchart.io/apex-charts/render

Basic Usage:

https://quickchart.io/apex-charts/render?width=500&height=300&config={apex chart config...}

API parameters

The following parameters are accepted by the render function:

  • config: Apex Charts configuration in Javascript or JSON format (required)
  • width: Image width in pixels. Defaults to 800.
  • height: Image height in pixels. If not specified, will default to golden ratio (roughly 16:10 aspect ratio)

Example

Let’s take a simple Apex Chart configuration:

{
chart: {
type: 'line'
},
series: [{
name: 'sales',
data: [31,40,35,50,49,60,70,91,125]
}],
xaxis: {
categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
}
}

We send it as a config query parameter to the API endpoint:

https://quickchart.io/apex-charts/render?config={ chart: { type: 'line' }, series: [{ name: 'sales', data: [31,40,35,50,49,60,70,91,125] }], xaxis: { categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999] } }

If your chart contains special characters like # or %, you will have to URL encode it. Most programming languages have built-in URL encoding capabilities:

https://quickchart.io/apex-charts/render?config={%20chart:%20{%20type:%20%27line%27%20},%20series:%20[{%20name:%20%27sales%27,%20data:%20[31,40,35,50,49,60,70,91,125]%20}],%20xaxis:%20{%20categories:%20[1991,1992,1993,1994,1995,1996,1997,%201998,1999]%20}%20}

The above URL produces this image when loaded in the browser, email, chat apps, and other formats:

POST request

For complex charts or larger charts, you’ll want to send a POST request because URLs can get messy. POST the parameters to the endpoint in JSON format.

A request in Python would look like this:

resp = requests.post('https://quickchart.io/apex-charts/render', json={
'width': 600,
'height': 300,
'config': '{...}',
})

with open('chart.png', 'wb') as f:
f.write(resp.content)

Need help?

Apex Charts is one of several chart formats that we support. Feel free to reach out about rendering charts.


Ian Webster

About the author

Ian Webster is a software engineer and former Googler based in San Mateo, California. He has helped Google, NASA, and governments around the world improve their data pipelines and visualizations. In 2018, Ian created QuickChart, a collection of open-source APIs that support data visualization efforts.

Email · LinkedIn · Twitter