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​
ECharts 5 charts
Colors
Last modified 1yr ago