Design

Charts

How to create charts in documents
ENTERPRISE FEATURE Available for:
Carbone Cloud
Carbone On-premise
Embedded Carbone JS   v4.0+ 

Overview

Generate dynamic charts in documents using two solutions:

The second solution is more powerful but requires a specific JSON structure.

Native Charts

This method is straightforward, like most other features:

Important Notes:

Compatible with ODT, DOCX, ODP, PPTX, and PDF files. Limited compatibility with XLSX and ODS files.

List of supported charts

In Microsoft Office:

Format Types Supported
2D/3D Column clustered, stacked, percent stacked
2D/3D Bar clustered, stacked, percent stacked
2D/3D Line line, stacked, percent stacked, line with markers, stacked line with markers, percent stacked line with markers
2D/3D Area area, stacked, percent stacked
2D/3D Pie pie
2D/3D Pie pie of pie, bar of pie
Doughnut doughnut
Combo clustered column/line, stacked area
Hierarchy sunburst chart, treemap chart
Statistical histogram, box and whisker
Waterfall waterfall, funnel, stock, surface, radar
Scatter scatter, bubbles
Map map

In LibreOffice:

Format Types Supported
Column normal, stacked, percent stacked
Bar normal, stacked, percent stacked
Pie normal, exploded, donut, exploded donut
Area normal, stacked, percent stacked
Line point only, points and lines, lines only, 3D lines
Scatter point only, points and lines, lines only, 3D lines
Net point only, points and lines, lines only, filled
Column and Line normal, stacked
Stock 1, 2, 3, 4
Bubble normal

DOCX Example

This example demonstrates how to create a line chart within a DOCX or PDF document to represent weather temperatures over a short period.

  1. Prepare a JSON dataset by grouping temperature history by dates (minimum, maximum, average):

    {
 "temps": [
   { "date": "01/07/2022", "min": 13, "max": 28, "avg": 20.5 },
   { "date": "02/07/2022", "min": 13, "max": 29, "avg": 21   },
   { "date": "03/07/2022", "min": 14, "max": 31, "avg": 22.5 },
   { "date": "04/07/2022", "min": 16, "max": 32, "avg": 24   }
 ]
}

  2. Create a new DOCX template on MS Word. Insert a line chart: click on the Insert tab > Chart Menu > Line > 2D Line. Tutorial insert charts with MS Word

  3. As soon as the chart is created, Word opens an Excel spreadsheet to edit charts values. Tutorial insert charts with MS Word

  4. Delete default values, and insert temperature values by looping through the temps list. Each loop expression that contains [i] on the first row must be followed on the next line by the expression [i+1]. Dynamic charts do not support having only one [i+1] for multiple [i] expressions. Tutorial insert charts with MS Word

  5. Generate the report as PDF or DOCX, and the chart is filled! Tutorial insert charts with MS Word

ODT Example

The tutorial shows how to create a pie chart within an ODT document. It will represent the quantity of cheese purchased by french households in 2019.

  1. Prepare a JSON data-set by grouping values by cheese types:

    {
 "cheeses": [
   { "type": "Camembert"       , "purchasedTonnes": 47503  },
   { "type": "Emmental"        , "purchasedTonnes": 152468 },
   { "type": "Compté"          , "purchasedTonnes": 32925  },
   { "type": "Goat's Buchette" , "purchasedTonnes": 32095  },
   { "type": "Mozzarella"      , "purchasedTonnes": 31066  }
 ]
}

  2. Create a new ODT template in LibreOffice. To insert a chart, click on the Home tab and select the Chart button. A column chart will appear by default. To change the chart format, click on the Chart Type button in the chart toolbar. Tutorial insert charts with LibreOffice

  1. Inject the data dynamically using a loop and the bindChart formatter:

    On the chart toolbar, click on Data Table. A popup will appear allowing you to edit chart values.

    The process of injecting dynamic data differs in LibreOffice: it is impossible to directly inject the {d.value} tag inside table cells. However, you can do this in the first column, Categories. This is why the category name is written first, followed by bindChart tags.

    The {bindChart} formatter is used to bind a variable to a reference in the table cell. In other words, "the value X in the chart must be replaced by the tag Y."

    Tutorial insert charts with LibreOffice

    Screenshot explanations:

    In the first cell, the following expression is written: {d.cheeses[i].type} {bindChart(3)=d.cheeses[i].purchasedTonnes}. The cheese type is displayed using {d.cheeses[i].type}, and then bindChart is used to bind the variable d.cheeses[i].purchasedTonnes to the cell that initially contains the value 3. This means the purchasedTonnes value will be printed instead of 3.

    In the first cell of the second row, the expression {d.cheeses[i+1].type} {bindChart(4)=d.cheeses[i+1].purchasedTonnes} is written. Here, bindChart will replace the value 4 with the d.cheeses[i+1].purchasedTonnes variable.

  1. Generate the report as PDF or DOCX, and the Pie is filled! Tutorial insert charts with LibreOffice

Advanced Echarts

Carbone embeds Apache Echarts: a rich, elegant, and powerful visualization library.

A chart configuration must be provided within your JSON dataset. This configuration should include the chart format, numerical values, and additional options. Carbone will inject the chart as an SVG image into the document.

Important Notes:

Compatible with all documents that support SVG images: ODT, ODS, ODP, ODG, DOCX, PPTX, XLSX, and PDF files.

ECharts offers a wide range of options, so we may not be able to answer all questions about your chart configuration through our chat support.

Supported Echarts version :

DOCX Echart

  1. In your template, insert a picture as a reference slot. Template with chart

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

  3. Design your JSON data by adding an object with the following structure. The object must include ECharts options and your data. Here’s the configuration for a line chart:

    {
 "chartOptions" : {
   "type"    : "echarts@v5a",
   "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"
     }]
   }
 }
}

  4. PDF generated with the chart: PDF report with a chart

The report is generated 🥳 Now, you can build any type of charts:

If you experience any limitations, please contact us on the chat.