-
Notifications
You must be signed in to change notification settings - Fork 790
Description
When creating charts using pptxgenjs, the initial slide renders correctly with proper formatting for both currency and percentage values.
However, the problem appears in the attached table (the embedded Excel-style worksheet linked to the chart). After opening the PPTX in PowerPoint and editing the chart’s data table:
-
Currency formatting is lost.
-
Percentage formatting is removed.
-
Zero (0) values appear blank/empty in the worksheet.
This makes the editable data table inaccurate and confusing for end users.
Steps to Reproduce:
-
Generate a chart using pptxgenjs with:
(A). dataLabelFormatCode: '₹#,##0' or $#,##0
(B). valAxisFormatCode: '0%', #,##0%, etc.
-
Include data points that contain 0 values.
-
Export the PPTX.
-
Open the file in PowerPoint.
-
Edit the chart’s attached data table (embedded worksheet).
-
Observe loss of formatting and blank zero cells.
Kindly find my code snippet attached
const PptxGenJS = require("pptxgenjs");
const pptx = new PptxGenJS();
const COLORS_SPECTRUM = ["56B4E4", "126CB0"];
let slide = pptx.addSlide();
const comboProps = {
x: 0.8,
y: 0.9,
w: "84%",
h: "66.2%",
chartArea: { fill: { color: "F1F1F1" } },
barDir: "col",
barGrouping: "clustered",
showDataTable: true,
showDataTableKeys: true,
showDataTableHorzBorder: true,
showDataTableVertBorder: true,
showDataTableOutline: true,
//
showLegend: true,
legendPos: "b",
//
valAxes: [
{
showValAxisTitle: true,
valAxisTitle: "Cars Produced (m)",
valAxisLabelFormatCode: "₹#,##0",
},
{
showValAxisTitle: true,
valAxisTitle: "Global Market Share (%)",
valGridLine: { style: "none" },
},
],
//
catAxes: [{ catAxisTitle: "Year" }, { catAxisHidden: true }],
};
const comboTypes = [
{
type: pptx.charts.BAR,
data: [
{
name: "ABC",
labels: ["2012", "2013", "2014"],
values: [100000, 380000, 458000],
},
{
name: "XYZ",
labels: ["2012", "2013", "2014"],
values: [104000, 230000, 345000],
},
],
options: {
chartColors: COLORS_SPECTRUM,
barGrouping: "clustered",
dataTableFormatCode: "₹#,##0",
dataLabelFormatCode: "₹#,##0",
},
},
{
type: pptx.charts.LINE,
data: [
{
name: "Global Market Share (%)",
labels: ["2012", "2013", "2014"],
values: [0.17, 0.27, 0.41],
},
],
options: {
chartColors: ["F38940"],
secondaryValAxis: true,
secondaryCatAxis: true,
valAxisLabelFormatCode: "0%",
dataTableFormatCode: "0%",
plotArea: { fill: { transparency: 100 } },
},
},
];
slide.addChart(comboTypes, comboProps);
pptx.writeFile("combo-chart.pptx");