How to Guides

Overview

For security reasons, we don't allow our users to include JavaScript code in their HTML templates.

However, we provide a way to include different types of elements that are commonly used in reports, such as charts and QR codes.

These elements are generated with popular open-source JavaScript libraries, and loaded from a trusted source. You only need to supply the a JSON configuration object, so you are in full control of the appearance of the element and the data that it displays.

If you want to make a quick test, you can add the following code snippet to include a chart in your template:

<div id="myChart"></div>
<chart-config target="myChart" class="apex">
{ 
    "chart": {
        "type": "line",
        "animations": {
                "enabled": false
        },
        "toolbar": {
        "show": false
        }
    },
    "series": [
        {
        "name": "Series 1",
        "data": [30, 40, 45, 50, 49, 60, 70, 91, 125]
        }
    ],
    "xaxis": {
        "categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"]
    }
}
</chart-config>

Of course, you can load the data from a variable in your payload. This is covered in the Including charts section of this documentation.

Danger

You cannot add comments inside the chart-config tag, as this will break the JSON configuration object and the element will not be displayed.

Info

If you are interested in including an unsupported type of element in your report, please let us know by sending an email to suggestions@app.pdferret.dev. This will help us understand the use cases for this feature, solve it in the best way possible, and prioritize it in our roadmap.