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.

Build any type of chart, following the documentation below:

• ECharts examples

• ECharts configuration

Provide the chart configuration within a JSON dataset. The dataset should include:

• the chart format

• numerical values

• extra options

After configuring, the chart is injected as an SVG image into the document. Refer to the Apache ECharts library for more details.

Compatibility

• supported file formats: PDF, ODT, ODS, ODP, ODG, DOCX, XLSX

  • ODT to DOCX/ODT/PDF or ODS to XLSX/ODS/PDF

  • DOCX to DOCX/ODT/PDF or XLSX to XLSX/ODS/PDF with the option "hardRefresh": true, such as { "convertTo": "docx", "hardRefresh": true }

  • DOCX to DOCX or XLSX to XLSX without the option "hardRefresh": true

• translations are supported: cs, de, en, es, fi, fr, it, ja, ko, pl, pt-br, ro, ru, si, th, zh

• chart configuration doesn't support external dependencies (maps, JS scripts)

• chart styling (titles, colors, captions, etc.) can only be defined within the JSON dataset

  • the generated chart is an image, so it's not possible to edit the styling within the template, unlike Native charts