Including charts in your PDF
External services
For simple charts, the fastest way to insert charts is to use external tools that will do the work for you.
Here we will provide an example using QuickChart but the same principles apply to any online service.
<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] }
]
}
}">
Using dynamic data
You can use your dynamic data to generate the chart URL.
Using the example above, let’s move the series to the template’s sample data.
{
"labels": ["January", "February", "March", "April", "May"],
"series": [
{ "label": "Dogs", "data": [50, 60, 70, 180, 190] },
{ "label": "Cats", "data": [100, 200, 300, 400, 500] }
]
}
We can now use those data in our HTML. In order to get the data formatted as expected we will leverage the json custom filter:
<img
src="https://quickchart.io/chart?width=500&height=300&c={
type: 'bar',
data: {
labels: {{labels | json | url_encode}},
datasets: {{series | json | url_encode}}
}
}">
Notice we also use the url_encode filter since the data will be inserted directly in a URL.
Custom charts
For more complex scenarios you can use any JS library that can be accessed using an URL. Most of the libraries you can use provide a CDN version.
The following example will use ApexCharts as it’s free. Alternatives like uvCharts, Chart.js or D3.js are completely fine too.
<div id="chart"></div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script type="text/javascript">
let options = {
chart: {
type: 'bar',
height: 380,
width: '100%',
animations: { enabled: false },
toolbar: { show: false }
},
series: [
{ name: 'Dogs', data: [50, 60, 70, 180, 190] },
{ name: 'Cats', data: [100, 200, 300, 400, 500] }
],
axis: {
categories: ['January', 'February', 'March', 'April', 'May']
}
};
let chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();
</script>
Using dynamic data
The dynamic data passed to your document at generation will be avaiable in JavaScript using the $docPayload variable. You can use it to make your chart dynamic:
<div id="chart"></div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script type="text/javascript">
let options = {
chart: {
type: 'bar',
height: 380,
width: '100%',
animations: { enabled: false },
toolbar: { show: false }
},
series: $docPayload.series,
axis: { categories: $docPayload.labels }
};
let chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();
</script>
Legacy charts
The legacy PDF rendering engine included a superset of Chart.js v2.3 named monkeyCharts. The new rendering engine does not as it created confusion and did not offer much more than services like QuickChart.
PDFMonkey