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 https://echarts.apache.org/en/theme-builder.html
    "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:

• ECharts examples

• ECharts configuration