Skip to content

Including charts

One of the most common elements to include in a PDF report is a chart. Currently, we support two libraries to include charts in a PDF report:

  1. ApexCharts.js
  2. Chart.js

Both libraries are similar in terms of functionality and usage. The main difference is the way the chart is rendered. ApexCharts.js uses SVG to render the chart, while Chart.js uses the HTML5 canvas element. They both use a configuration object to define the chart properties.

We provide a way to include charts in your report by adding a JSON configuration object in a chart-config tag. This tag has two attributes:

  1. target: The ID of the element where the chart will be rendered.
  2. class: The class of the chart library to use.

Danger

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

Using ApexCharts.js

To add an ApexCharts.js chart to your report, you need to include the JSON configuration object in a chart-config tag.

The chart-config should target the ID of the div element where the chart will be rendered. The class attribute should be set to apex.

You can load data from a variable in your payload by referencing the $payload (as a string) object in the JSON configuration object (see the example below).

<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>


<div id="myChart"></div>
<chart-config target="myChart" class="apex">
{ 
  "chart": {
    "type": "line",
    "animations": {
            "enabled": false
    },
    "toolbar": {
      "show": false
    }
  },
  "series": "$payload.series",
  "xaxis": "$payload.xaxis"
}
</chart-config>
For this to work, your payload object should include the series and xaxis properties. Here is an example of how the payload should look: 
{
  // other data...
  "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"]
  }
  // more data...
}

Tip

This is just an example, and you can customize the chart configuration object to fit your needs, such as changing the chart type, adding more series, or changing the appearance of the chart.

You can, of course, load any other data from the payload to customize the chart configuration object, in any way you see fit.

You can learn more about the ApexCharts.js configuration options in their official documentation, in the Options (Reference) section.

Using Chart.js

To add a Chart.js chart to your report, you need to include the JSON configuration object in a chart-config tag.

The chart-config should target the ID of the canvas element where the chart will be rendered. The class attribute should be set to chartjs.

You can load data from a variable in your payload by referencing the $payload (as a string) object in the JSON configuration object (see the example below).

Here is an example of how to include a Chart.js chart in your report:

<canvas id="myChart"></canvas>
<chart-config target="myChart" class="chartjs">
{
    "type": "bar",
    "data": {
      "labels": ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
      "datasets": [{
        "label": "# of Votes",
        "data": [12, 19, 3, 5, 2, 3],
        "borderWidth": 1
      }]
    },
    "options": {
      "scales": {
        "y": {
          "beginAtZero": true
      }
    }
  }
}
</chart-config>

<canvas id="myChart"></canvas>
<chart-config target="myChart" class="chartjs">
{
    "type": "bar",
    "data": {
      "labels": "$payload.labels",
      "datasets": [{
        "label": "# of Votes",
        "data": "$payload.data",
        "borderWidth": 1
      }]
    },
    "options": {
      "scales": {
        "y": {
          "beginAtZero": true
      }
    }
  }
}
</chart-config>

For this to work, your payload object should include the labels and data properties. Here is an example of how the payload should look: 

{
  // other data...
  "labels": ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
  "data": [12, 19, 3, 5, 2, 3]
  // more data...
}

Tip

This is just an example, and you can customize the chart configuration object to fit your needs, such as changing the chart type, adding more datasets, or changing the appearance of the chart.

You can, of course, load any other data from the payload to customize the chart configuration object, in any way you see fit.

You can learn more about the Chart.js configuration options in their official documentation, in the Configuration section.