Insert a line chart into a document

Step 1: Insert a picture

In a template, insert a picture as a reference slot.

Step 2: Insert a tag

Place a tag in the alternative text of the picture {d.chartOptions:chart} with the formatter :chart. Without :chart, the attribute {d.chartOptions} is considered as an image.

Step 3: Prepare JSON data

Design your JSON dataset by adding an object named chartOptions. The object must contain ECharts options and your data.
Use the following configuration for a line chart:
"chartOptions" : {
"type" : "echarts@v5", // Carbone Option - REQUIRED: Carbone supports only "echarts@v5" but we may support newer versions and other libraries in the future.
"width" : 600, // Carbone Option - OPTIONAL: Image width
"height" : 400, // Carbone Option - OPTIONAL: Image Height
"theme" : null, // Carbone Option - OPTIONAL: default or object `theme` generated by
"option" : { // Echart options - REQUIRED
"xAxis": {
"type": "category",
"data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
"yAxis": {
"type": "value"
"series": [{
"data": [150, 230, 224, 218, 135, 147, 260],
"type": "line"

Step 4: Generate the report

Generate the PDF report.
PDF report with a chart
Build any type of chart, following the documentation below: