Adding Bar Chart and Line Chart Objects in ppt exports — Javascript

If you wish to build the feature of exporting ppt with your custom dynamic content in your javascript app , I recommend using the library pptxgen.js. In this blog I will be discussing the way to add line chart and bar chart objects into the ppt with some of the limitations that I fave faced .I will be using the version pptxgen#2.1.0 .

Note : some of the versions have breaking changes and may not be backward compatible.

If you are using this library for the first time , you may like my following post which covers the basics and some helpful tips w.r.t to this library.

Adding ppt Export in your Javascript App

Lets add line chart and bar chart for the following sample data :

average monthly temperature of some random city

Our aim is to render an editable and responsive line and bar chart in the ppt file using this javascript library. Below is the sample output :

line chart for the avg temp city data

bar chart for the avg temp city data

Requirements :

• The colour of each data line/bar should not be dynamic and must be user defined.
• The marker shapes should be user defined.
• We should have a defined axis and title for the chart.

Procedure :

Below is the self explanatory config option for the chart .You may find a detailed explanation in the documentation of the pptxgen library.

Challenge faced in rendering Line chart :

• Giving predefined colour to each line is not possible directly but there is a trick to it which I found while experimenting with the library and would love to share with you.

Below is the data format you must supply for the line chart with predefined colours.

Note : The option chartColors should be an array with only one colour, which you want the line to give.This is the simple trick to give predefined colours to the lines.

Challenge faced in rendering Bar chart :

• Giving predefined colour to each bar is not the same as giving colours to the line chart.

Below is the data format you must supply for the bar chart with predefined colours.

Note:

• The colours should be in the same order as that of the lines/bars.
• Format is different for bar chart and line chart.

You may a live demo of the implementation in the link below:

React App

You may find the implementation in a react app at my github repository.

anandujjwal13/linechart-barchart-in-ppt-export-js

You may also take a glance at the App.js file for a better understanding.

Limitations

I found the following two limitations with this library for line chart and bar charts.

• lines with dashStyle in the line charts is not possible however, you may control the thickness/weight of the line.
• Passing additional data to data points so that appear in the tooltip is not possible.

If you liked this post, please share, comment and give few 👏 😊