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.
Usage
Rendering a chart is straightforward:
- Create a Javascript/JSON Apex Charts configuration object.
- URL-encode the configuration.
- 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).
- apexChartsVersion: Which version of the Apex Charts library to use. If not specified, will default to the latest version.
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:
Here's a direct link to the image URL.
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.
