You are currently offline, serving cached version

Usage

The chart module allows to replace data from an existing chart.

To use the module, you need to create a chart inside your Word document.

The paragraph after the chart should contain a tag starting with a $ sign, such as {$chart1}

Then, in your code, you can write :

{
  "title": "The lorem chart",
  "chart1": {
    "categories": [
      "5th Qtr",
      "6th Qtr",
      "7th Qtr",
      "8th Qtr"
    ],
    "series": [
      {
        "data": [
          100,
          5,
          45,
          40
        ]
      }
    ]
  }
}

For bar charts, area charts, radar charts, it can make sense to have multiple series.

Changing chart styles

You can also change the style of the generated charts.

At the current time, you can change the color of the title of the chart like this :

doc.render({
    chart: {
        styles: {
            title: {
                color: "#df3fd3",
            },
        },
        categories: ["A1", "B2", "C3", "D4"],
        data: [100, 200, 45, 40],
    },
});

CHANGELOG

3.4.0

Allow to change title color of charts by using the styles property.

Make module compatible with docxtemplater@3.28.0. Please make sure to update docxtemplater to 3.28.0 at the same time you update this module. The internal change made is the use of the new matchers API which fixes bugs that were triggered depending on the order of the modules that are attached to the instance. Now the order of the modules should not matter as expected.

3.3.0

Make module compatible with docxtemplater@3.27.0. Please make sure to update docxtemplater to 3.27.0 at the same time you update this module

3.2.1

Bugfix to avoid corruption when looping over slide that has a chart

3.2.0

Bugfix to avoid corruptions when having 7 or more dataseries.

The coloring of the series now will use the accents/modifiers defined in the chart data.

3.1.1

Fix bug when using {$chart} tag in slide title : when the "{" and the "$chart" are internally not inside the same <w:t>, previously, the chart tag would go undetected (and the chart unreplaced).

First use the scope of the "chart" to set the title, instead of using the scope outside of the chart.

Meaning you can now write :

{$chart1}{title}

And in your data :

const data = {
    chart1: {
        title: "My custom title"
        categories: ["5th Qtr", "6th Qtr", "7th Qtr", "8th Qtr"],
        series: [{ data: [130, 20, 40, 10] }],
    }
}

(Previously the title would then resolve to undefined.)

3.1.0

Make it possible to have multiple charts in one pptx slide.

Make it possible to put the {$chart} tag in the title of the chart

3.0.2

Use @xmldom/xmldom instead of xmldom, see this github issue

3.0.1

Generate files in built with correct filename In previous versions, the filename was always build/docxtemplater.js. Now the filename is build/chart-module.js The .min.js file is also created now.

3.0.0

  • Initial version of the Chart module