Add ability to add custom data labels to charts.

dist/pptxgen.cjs.js

@@ -1,4 +1,4 @@
-/* PptxGenJS 3.13.0-beta.0 @ 2023-05-17T03:15:58.384Z */
+/* PptxGenJS 3.13.0-beta.1 @ 2024-06-30T19:00:38.411Z */
 'use strict';
 
 var JSZip = require('jszip');
@@ -3769,7 +3769,35 @@ function makeChartType(chartType, data, opts, valAxisId, catAxisId, isMultiTypeC
                 // NOTE: [20190117] Adding these to RADAR chart causes unrecoverable corruption!
                 if (chartType !== CHART_TYPE.RADAR) {
                     strXml += '<c:dLbls>';
-                    strXml += "<c:numFmt formatCode=\"".concat(encodeXmlEntities(opts.dataLabelFormatCode) || 'General', "\" sourceLinked=\"0\"/>");
+                    if (obj.dataLabels) {
+                        obj.dataLabels.forEach(function (value, i) {
+                            strXml += '  <c:dLbl>';
+                            strXml += "    <c:idx val=\"".concat(i, "\"/>");
+                            strXml += '    <c:tx>';
+                            strXml += '      <c:rich>';
+                            strXml += '        <a:bodyPr/>';
+                            strXml += '        <a:lstStyle/>';
+                            strXml += '        <a:p>';
+                            strXml += '          <a:r>';
+                            strXml += '            <a:rPr lang="en-US"/>';
+                            strXml += "            <a:t>".concat(encodeXmlEntities(value), "</a:t>");
+                            strXml += '          </a:r>';
+                            strXml += '        </a:p>';
+                            strXml += '      </c:rich>';
+                            strXml += '    </c:tx>';
+                            strXml += '    <c:dLblPos val="ctr"/>';
+                            strXml += '    <c:showLegendKey val="0"/>';
+                            strXml += '    <c:showVal val="1"/>';
+                            strXml += '    <c:showCatName val="0"/>';
+                            strXml += '    <c:showSerName val="0"/>';
+                            strXml += '    <c:showPercent val="0"/>';
+                            strXml += '    <c:showBubbleSize val="0"/>';
+                            strXml += '  </c:dLbl>';
+                        });
+                    }
+                    else {
+                        strXml += "<c:numFmt formatCode=\"".concat(encodeXmlEntities(opts.dataLabelFormatCode) || 'General', "\" sourceLinked=\"0\"/>");
+                    }
                     if (opts.dataLabelBkgrdColors)
                         strXml += "<c:spPr><a:solidFill>".concat(createColorElement(seriesColor), "</a:solidFill></c:spPr>");
                     strXml += '<c:txPr><a:bodyPr/><a:lstStyle/><a:p><a:pPr>';
@@ -4390,9 +4418,26 @@ function makeChartType(chartType, data, opts, valAxisId, catAxisId, isMultiTypeC
             // 3: "Data Label" block for every data Label
             strXml += '<c:dLbls>';
             optsChartData.labels[0].forEach(function (_label, idx) {
+                var _a, _b;
                 strXml += '<c:dLbl>';
                 strXml += " <c:idx val=\"".concat(idx, "\"/>");
-                strXml += "  <c:numFmt formatCode=\"".concat(encodeXmlEntities(opts.dataLabelFormatCode) || 'General', "\" sourceLinked=\"0\"/>");
+                if ((_a = optsChartData === null || optsChartData === void 0 ? void 0 : optsChartData.dataLabels) === null || _a === void 0 ? void 0 : _a.at(idx)) {
+                    strXml += '    <c:tx>';
+                    strXml += '      <c:rich>';
+                    strXml += '        <a:bodyPr/>';
+                    strXml += '        <a:lstStyle/>';
+                    strXml += '        <a:p>';
+                    strXml += '          <a:r>';
+                    strXml += '            <a:rPr lang="en-US"/>';
+                    strXml += "            <a:t>".concat(encodeXmlEntities((_b = optsChartData.dataLabels) === null || _b === void 0 ? void 0 : _b.at(idx)), "</a:t>");
+                    strXml += '          </a:r>';
+                    strXml += '        </a:p>';
+                    strXml += '      </c:rich>';
+                    strXml += '    </c:tx>';
+                }
+                else {
+                    strXml += "  <c:numFmt formatCode=\"".concat(encodeXmlEntities(opts.dataLabelFormatCode) || 'General', "\" sourceLinked=\"0\"/>");
+                }
                 strXml += '  <c:spPr/><c:txPr>';
                 strXml += '   <a:bodyPr/><a:lstStyle/>';
                 strXml += '   <a:p><a:pPr>';

dist/pptxgen.es.js

@@ -1,4 +1,4 @@
-/* PptxGenJS 3.13.0-beta.0 @ 2023-05-17T03:15:58.392Z */
+/* PptxGenJS 3.13.0-beta.1 @ 2024-06-30T19:00:38.416Z */
 import JSZip from 'jszip';
 
 /******************************************************************************
@@ -3763,7 +3763,35 @@ function makeChartType(chartType, data, opts, valAxisId, catAxisId, isMultiTypeC
                 // NOTE: [20190117] Adding these to RADAR chart causes unrecoverable corruption!
                 if (chartType !== CHART_TYPE.RADAR) {
                     strXml += '<c:dLbls>';
-                    strXml += "<c:numFmt formatCode=\"".concat(encodeXmlEntities(opts.dataLabelFormatCode) || 'General', "\" sourceLinked=\"0\"/>");
+                    if (obj.dataLabels) {
+                        obj.dataLabels.forEach(function (value, i) {
+                            strXml += '  <c:dLbl>';
+                            strXml += "    <c:idx val=\"".concat(i, "\"/>");
+                            strXml += '    <c:tx>';
+                            strXml += '      <c:rich>';
+                            strXml += '        <a:bodyPr/>';
+                            strXml += '        <a:lstStyle/>';
+                            strXml += '        <a:p>';
+                            strXml += '          <a:r>';
+                            strXml += '            <a:rPr lang="en-US"/>';
+                            strXml += "            <a:t>".concat(encodeXmlEntities(value), "</a:t>");
+                            strXml += '          </a:r>';
+                            strXml += '        </a:p>';
+                            strXml += '      </c:rich>';
+                            strXml += '    </c:tx>';
+                            strXml += '    <c:dLblPos val="ctr"/>';
+                            strXml += '    <c:showLegendKey val="0"/>';
+                            strXml += '    <c:showVal val="1"/>';
+                            strXml += '    <c:showCatName val="0"/>';
+                            strXml += '    <c:showSerName val="0"/>';
+                            strXml += '    <c:showPercent val="0"/>';
+                            strXml += '    <c:showBubbleSize val="0"/>';
+                            strXml += '  </c:dLbl>';
+                        });
+                    }
+                    else {
+                        strXml += "<c:numFmt formatCode=\"".concat(encodeXmlEntities(opts.dataLabelFormatCode) || 'General', "\" sourceLinked=\"0\"/>");
+                    }
                     if (opts.dataLabelBkgrdColors)
                         strXml += "<c:spPr><a:solidFill>".concat(createColorElement(seriesColor), "</a:solidFill></c:spPr>");
                     strXml += '<c:txPr><a:bodyPr/><a:lstStyle/><a:p><a:pPr>';
@@ -4384,9 +4412,26 @@ function makeChartType(chartType, data, opts, valAxisId, catAxisId, isMultiTypeC
             // 3: "Data Label" block for every data Label
             strXml += '<c:dLbls>';
             optsChartData.labels[0].forEach(function (_label, idx) {
+                var _a, _b;
                 strXml += '<c:dLbl>';
                 strXml += " <c:idx val=\"".concat(idx, "\"/>");
-                strXml += "  <c:numFmt formatCode=\"".concat(encodeXmlEntities(opts.dataLabelFormatCode) || 'General', "\" sourceLinked=\"0\"/>");
+                if ((_a = optsChartData === null || optsChartData === void 0 ? void 0 : optsChartData.dataLabels) === null || _a === void 0 ? void 0 : _a.at(idx)) {
+                    strXml += '    <c:tx>';
+                    strXml += '      <c:rich>';
+                    strXml += '        <a:bodyPr/>';
+                    strXml += '        <a:lstStyle/>';
+                    strXml += '        <a:p>';
+                    strXml += '          <a:r>';
+                    strXml += '            <a:rPr lang="en-US"/>';
+                    strXml += "            <a:t>".concat(encodeXmlEntities((_b = optsChartData.dataLabels) === null || _b === void 0 ? void 0 : _b.at(idx)), "</a:t>");
+                    strXml += '          </a:r>';
+                    strXml += '        </a:p>';
+                    strXml += '      </c:rich>';
+                    strXml += '    </c:tx>';
+                }
+                else {
+                    strXml += "  <c:numFmt formatCode=\"".concat(encodeXmlEntities(opts.dataLabelFormatCode) || 'General', "\" sourceLinked=\"0\"/>");
+                }
                 strXml += '  <c:spPr/><c:txPr>';
                 strXml += '   <a:bodyPr/><a:lstStyle/>';
                 strXml += '   <a:p><a:pPr>';

package.json

@@ -35,7 +35,7 @@
     "@types/node": "^18.7.3",
     "https": "^1.0.0",
     "image-size": "^1.0.0",
-    "jszip": "^3.10.1"
+    "jszip": "3.1.5"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^21.0.2",

src/core-interfaces.ts

@@ -1181,6 +1181,7 @@ export interface OptsChartData {
 // Used internally, probably shouldn't be used by end users
 export interface IOptsChartData extends OptsChartData {
 	labels?: string[][]
+	dataLabels?: string[]
 }
 export interface OptsChartGridLine {
 	/**

src/gen-charts.ts

@@ -876,7 +876,34 @@ function makeChartType (chartType: CHART_NAME, data: IOptsChartData[], opts: ICh
 				// NOTE: [20190117] Adding these to RADAR chart causes unrecoverable corruption!
 				if (chartType !== CHART_TYPE.RADAR) {
 					strXml += '<c:dLbls>'
-					strXml += `<c:numFmt formatCode="${encodeXmlEntities(opts.dataLabelFormatCode) || 'General'}" sourceLinked="0"/>`
+					if (obj.dataLabels) {
+						obj.dataLabels.forEach((value, i) => {
+							strXml += '  <c:dLbl>'
+							strXml += `    <c:idx val="${i}"/>`
+							strXml += '    <c:tx>'
+							strXml += '      <c:rich>'
+							strXml += '        <a:bodyPr/>'
+							strXml += '        <a:lstStyle/>'
+							strXml += '        <a:p>'
+							strXml += '          <a:r>'
+							strXml += `            <a:rPr lang="en-US" sz="${opts.fontSize * 100}"/>`
+							strXml += `            <a:t>${encodeXmlEntities(value)}</a:t>`
+							strXml += '          </a:r>'
+							strXml += '        </a:p>'
+							strXml += '      </c:rich>'
+							strXml += '    </c:tx>'
+							strXml += '    <c:dLblPos val="ctr"/>'
+							strXml += '    <c:showLegendKey val="0"/>'
+							strXml += '    <c:showVal val="1"/>'
+							strXml += '    <c:showCatName val="0"/>'
+							strXml += '    <c:showSerName val="0"/>'
+							strXml += '    <c:showPercent val="0"/>'
+							strXml += '    <c:showBubbleSize val="0"/>'
+							strXml += '  </c:dLbl>'
+						})
+					} else {
+						strXml += `<c:numFmt formatCode="${encodeXmlEntities(opts.dataLabelFormatCode) || 'General'}" sourceLinked="0"/>`
+					}
 					if (opts.dataLabelBkgrdColors) strXml += `<c:spPr><a:solidFill>${createColorElement(seriesColor)}</a:solidFill></c:spPr>`
 					strXml += '<c:txPr><a:bodyPr/><a:lstStyle/><a:p><a:pPr>'
 					strXml += `<a:defRPr b="${opts.dataLabelFontBold ? 1 : 0}" i="${opts.dataLabelFontItalic ? 1 : 0}" strike="noStrike" sz="${Math.round(
@@ -1542,7 +1569,22 @@ function makeChartType (chartType: CHART_NAME, data: IOptsChartData[], opts: ICh
 			optsChartData.labels[0].forEach((_label, idx) => {
 				strXml += '<c:dLbl>'
 				strXml += ` <c:idx val="${idx}"/>`
-				strXml += `  <c:numFmt formatCode="${encodeXmlEntities(opts.dataLabelFormatCode) || 'General'}" sourceLinked="0"/>`
+				if (optsChartData?.dataLabels?.at(idx)) {
+					strXml += '    <c:tx>'
+					strXml += '      <c:rich>'
+					strXml += '        <a:bodyPr/>'
+					strXml += '        <a:lstStyle/>'
+					strXml += '        <a:p>'
+					strXml += '          <a:r>'
+					strXml += '            <a:rPr lang="en-US"/>'
+					strXml += `            <a:t>${encodeXmlEntities(optsChartData.dataLabels?.at(idx))}</a:t>`
+					strXml += '          </a:r>'
+					strXml += '        </a:p>'
+					strXml += '      </c:rich>'
+					strXml += '    </c:tx>'
+				} else {
+					strXml += `  <c:numFmt formatCode="${encodeXmlEntities(opts.dataLabelFormatCode) || 'General'}" sourceLinked="0"/>`
+				}
 				strXml += '  <c:spPr/><c:txPr>'
 				strXml += '   <a:bodyPr/><a:lstStyle/>'
 				strXml += '   <a:p><a:pPr>'

src/slide.ts

@@ -153,7 +153,7 @@ export default class Slide {
 		return this._slideNumberProps
 	}
 
-	public get newAutoPagedSlides(): PresSlide[] {
+	public get newAutoPagedSlides (): PresSlide[] {
 		return this._newAutoPagedSlides
 	}
 

types/index.d.ts

@@ -2586,6 +2586,40 @@ declare namespace PptxGenJS {
 		title: string
 	}
 
+export interface OptsChartData {
+	/**
+	 * category labels
+	 * @example [['Year 2000', 'Year 2010', 'Year 2020'], ['Decades', '', '']] // multi-level category axes labels
+	 * @since `labels` string[][] type added v3.11.0
+	 */
+	labels?: string[][]
+	/**
+	 * series name
+	 * @example 'Locations'
+	 */
+	name?: string
+	/**
+	 * bubble sizes
+	 * @example [5, 1, 5, 1]
+	 */
+	sizes?: number[]
+	/**
+	 * category values
+	 * @example [2000, 2010, 2020]
+	 */
+	values?: number[]
+	/**
+	 * Override `chartColors`
+	 */
+
+	/**
+	 * Custom text that show on top of data points
+	 * @example ['Q1', 'Q2', 'Q3', 'Q4']
+	 */
+	dataLabels?: string[]
+
+	// color?: string // TODO: WIP: (Pull #727)
+}
 	// LAST: Slide
 	/**
 	 * `slide.d.ts`