Added new chart option "showLeaderLines" (Pull #642)

CHANGELOG.md

@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Ability to rotate image [\#639](https://github.com/gitbrent/PptxGenJS/pull/639) ([alabaki](https://github.com/alabaki))
 - Include types in package.json files [\#641](https://github.com/gitbrent/PptxGenJS/pull/641) ([cronin4392](https://github.com/cronin4392))
 - New demo Image slide for Image Rotation ([gitbrent](https://github.com/gitbrent))
+- Added new chart option `showLeaderLines` [\#642](https://github.com/gitbrent/PptxGenJS/pull/642) ([cronin4392](https://github.com/cronin4392))
 ### Changed
 - Fixed: Add missing margin type from ITextOpts [\#643](https://github.com/gitbrent/PptxGenJS/pull/643) ([cronin4392](https://github.com/cronin4392))
 ### Removed

demos/common/demos.js

@@ -638,8 +638,8 @@ function genSlides_Chart(pptx) {
 	var dataChartPieStat = [
 		{
 			name  : 'Project Status',
-			labels: ['Red', 'Amber', 'Green', 'Unknown'],
-			values: [8, 20, 30, 2]
+			labels: ['Red', 'Amber', 'Green', 'Complete', 'Cancelled', 'Unknown'],
+			values: [25, 5, 5, 5, 5, 5]
 		}
 	];
 	var dataChartPieLocs = [
@@ -1522,30 +1522,39 @@ function genSlides_Chart(pptx) {
 		slide.addText( '.', {x:0.5, y:0.5, w:4.2, h:3.2, fill:'F1F1F1', color:'F1F1F1'} );
 		slide.addChart(
 			pptx.charts.PIE, dataChartPieStat,
-			{x:0.5, y:0.5, w:4.2, h:3.2, showLegend:true, legendPos:'left', legendFontFace:'Courier New'}
+			{
+				x:0.5, y:0.5, w:4.2, h:3.2,
+				legendPos:'left',
+				legendFontFace:'Courier New',
+				showLegend : true,
+				showLeaderLines: true,
+				showPercent: false,
+				showValue  : true,
+			}
 		);
 
-		// TOP-RIGHT
+		// TOP-MIDDLE
 		slide.addText( '.', {x:5.6, y:0.5, w:3.2, h:3.2, fill:'F1F1F1', color:'F1F1F1'} );
-		slide.addChart( pptx.charts.PIE, dataChartPieStat, {x:5.6, y:0.5, w:3.2, h:3.2, showLegend:true, legendPos:'t'} );
+		slide.addChart( pptx.charts.PIE, dataChartPieStat, {x:5.6, y:0.5, w:3.2, h:3.2, showLegend:true, legendPos:'t' } );
 
 		// BTM-LEFT
 		slide.addText( '.', {x:0.5, y:4.0, w:4.2, h:3.2, fill:'F1F1F1', color:'F1F1F1'} );
 		slide.addChart( pptx.charts.PIE, dataChartPieLocs, {x:0.5, y:4.0, w:4.2, h:3.2, showLegend:true, legendPos:'r'} );
 
-		// BTM-RIGHT
+		// BTM-MIDDLE
 		slide.addText( '.', {x:5.6, y:4.0, w:3.2, h:3.2, fill:'F1F1F1', color:'F1F1F1'} );
 		slide.addChart( pptx.charts.PIE, dataChartPieLocs, {x:5.6, y:4.0, w:3.2, h:3.2, showLegend:true, legendPos:'b'} );
 
 		// BOTH: TOP-RIGHT
-		slide.addText( '.', {x:9.8, y:0.5, w:3.2, h:3.2, fill:'F1F1F1', color:'F1F1F1'} );
 		// DEMO: `legendFontSize`, `titleAlign`, `titlePos`
+		slide.addText( '.', {x:9.8, y:0.5, w:3.2, h:3.2, fill:'F1F1F1', color:'F1F1F1'} );
 		slide.addChart( pptx.charts.PIE, dataChartPieLocs,
 		{
 			x:9.8, y:0.5, w:3.2, h:3.2, dataBorder:{pt:'1',color:'F1F1F1'},
 			showLegend: true,
 			legendPos: 't',
 			showTitle: true,
+			showLeaderLines: true,
 			title:'Left Title & Large Legend',
 
 			legendFontSize: 14,
@@ -1565,7 +1574,7 @@ function genSlides_Chart(pptx) {
 		slide.addTable( [ [{ text:'Chart Examples: Doughnut Chart', options:gOptsTextL },gOptsTextR] ], gOptsTabOpts );
 
 		var optsChartPie1 = { x:0.5, y:1.0, w:6.0, h:6.0,
-			chartColors: ['FC0000','FFCC00','009900','6600CC'],
+			chartColors: ['FC0000','FFCC00','009900','0088CC','696969','6600CC'],
 			dataBorder       : { pt:'2', color:'F1F1F1' },
 			dataLabelColor   : 'FFFFFF',
 			dataLabelFontSize: 14,

src/core-interfaces.ts

@@ -165,6 +165,7 @@ export interface IChartOpts extends PositionOptions, OptsChartGridLine {
 	showDataTableOutline?: boolean
 	showDataTableVertBorder?: boolean
 	showLabel?: boolean
+	showLeaderLines?: boolean
 	showLegend?: boolean
 	showPercent?: boolean
 	showSerAxisTitle?: boolean

src/gen-charts.ts

@@ -752,7 +752,7 @@ function makeChartType(chartType: CHART_TYPE_NAMES, data: OptsChartData[], opts:
 					strXml += '    <c:showSerName val="0"/>'
 					strXml += '    <c:showPercent val="0"/>'
 					strXml += '    <c:showBubbleSize val="0"/>'
-					strXml += '    <c:showLeaderLines val="0"/>'
+					strXml += `    <c:showLeaderLines val="${opts.showLeaderLines ? '1' : '0'}"/>`
 					strXml += '  </c:dLbls>'
 				}
 
@@ -889,7 +889,7 @@ function makeChartType(chartType: CHART_TYPE_NAMES, data: OptsChartData[], opts:
 				strXml += '    <c:showSerName val="0"/>'
 				strXml += '    <c:showPercent val="0"/>'
 				strXml += '    <c:showBubbleSize val="0"/>'
-				strXml += '    <c:showLeaderLines val="0"/>'
+				strXml += `    <c:showLeaderLines val="${opts.showLeaderLines ? '1' : '0'}"/>`
 				strXml += '  </c:dLbls>'
 			}
 
@@ -1442,7 +1442,7 @@ function makeChartType(chartType: CHART_TYPE_NAMES, data: OptsChartData[], opts:
 			obj.labels.forEach((_label, idx) => {
 				strXml += '<c:dLbl>'
 				strXml += '  <c:idx val="' + idx + '"/>'
-				strXml += '    <c:numFmt formatCode="' + opts.dataLabelFormatCode + '" sourceLinked="0"/>'
+				strXml += `    <c:numFmt formatCode="${opts.dataLabelFormatCode||'General'}" sourceLinked="0"/>`
 				strXml += '    <c:txPr>'
 				strXml += '      <a:bodyPr/><a:lstStyle/>'
 				strXml += '      <a:p><a:pPr>'
@@ -1464,7 +1464,7 @@ function makeChartType(chartType: CHART_TYPE_NAMES, data: OptsChartData[], opts:
 				strXml += '    <c:showBubbleSize val="0"/>'
 				strXml += '  </c:dLbl>'
 			})
-			strXml += `<c:numFmt formatCode="${opts.dataLabelFormatCode}" sourceLinked="0"/>`
+			strXml += ` <c:numFmt formatCode="${opts.dataLabelFormatCode||'General'}" sourceLinked="0"/>`
 			strXml += '	<c:txPr>'
 			strXml += '	  <a:bodyPr/>'
 			strXml += '	  <a:lstStyle/>'
@@ -1483,7 +1483,7 @@ function makeChartType(chartType: CHART_TYPE_NAMES, data: OptsChartData[], opts:
 			strXml += '	<c:showSerName val="0"/>'
 			strXml += '	<c:showPercent val="1"/>'
 			strXml += '	<c:showBubbleSize val="0"/>'
-			strXml += '	<c:showLeaderLines val="0"/>'
+			strXml += ` <c:showLeaderLines val="${opts.showLeaderLines ? '1' : '0'}"/>`
 			strXml += '</c:dLbls>'
 
 			// 2: "Categories"

src/gen-objects.ts

@@ -231,6 +231,7 @@ export function addChartDefinition(target: ISlide, type: CHART_TYPE_NAMES | ICha
 	options.showPercent = options.showPercent === true || options.showPercent === false ? options.showPercent : true
 	options.showTitle = options.showTitle === true || options.showTitle === false ? options.showTitle : false
 	options.showValue = options.showValue === true || options.showValue === false ? options.showValue : false
+	options.showLeaderLines = options.showLeaderLines === true || options.showLeaderLines === false ? options.showLeaderLines : false
 	options.catAxisLineShow = typeof options.catAxisLineShow !== 'undefined' ? options.catAxisLineShow : true
 	options.valAxisLineShow = typeof options.valAxisLineShow !== 'undefined' ? options.valAxisLineShow : true
 	options.serAxisLineShow = typeof options.serAxisLineShow !== 'undefined' ? options.serAxisLineShow : true
@@ -261,12 +262,8 @@ export function addChartDefinition(target: ISlide, type: CHART_TYPE_NAMES | ICha
 		options.dataBorder.color = 'F9F9F9'
 	//
 	if (!options.dataLabelFormatCode && options.type === CHART_TYPES.SCATTER) options.dataLabelFormatCode = 'General'
-	options.dataLabelFormatCode =
-		options.dataLabelFormatCode && typeof options.dataLabelFormatCode === 'string'
-			? options.dataLabelFormatCode
-			: options.type === CHART_TYPES.PIE || options.type === CHART_TYPES.DOUGHNUT
-			? '0%'
-			: '#,##0'
+	options.dataLabelFormatCode = options.dataLabelFormatCode && typeof options.dataLabelFormatCode === 'string' ? options.dataLabelFormatCode : '#,##0'
+	if (options.type === CHART_TYPES.PIE || options.type === CHART_TYPES.DOUGHNUT) options.dataLabelFormatCode = options.showPercent ? '0%' : 'General'
 	//
 	// Set default format for Scatter chart labels to custom string if not defined
 	if (!options.dataLabelFormatScatter && options.type === CHART_TYPES.SCATTER) options.dataLabelFormatScatter = 'custom'

types/index.d.ts

@@ -202,140 +202,143 @@ declare namespace PptxGenJS {
 
 	export interface IChartOpts extends PositionOptions, OptsChartGridLine {
 		type: CHART_TYPE_NAMES | IChartMulti[]
-		layout?: PositionOptions
+		axisPos?: string
+		bar3DShape?: string
 		barDir?: string
-		barGrouping?: string
-		barGapWidthPct?: number
 		barGapDepthPct?: number
-		bar3DShape?: string
+		barGapWidthPct?: number
+		barGrouping?: string
+		border?: IBorderOptions
+		catAxes?: Array<number>
+		catAxisBaseTimeUnit?: string
+		catAxisHidden?: boolean
+		catAxisLabelColor?: string
+		catAxisLabelFontBold?: boolean
+		catAxisLabelFontFace?: string
+		catAxisLabelFontSize?: number
+		catAxisLabelFrequency?: string
+		catAxisLabelPos?: 'none' | 'low' | 'high' | 'nextTo'
+		catAxisLabelRotate?: number
 		catAxisLineShow?: boolean
+		catAxisMajorTickMark?: ChartAxisTickMark
+		catAxisMajorTimeUnit?: string
+		catAxisMajorUnit?: string
 		catAxisMaxVal?: number
+		catAxisMinorTickMark?: ChartAxisTickMark
+		catAxisMinorTimeUnit?: string
+		catAxisMinorUnit?: string
 		catAxisMinVal?: number
-		catAxisHidden?: boolean
 		catAxisOrientation?: 'minMax' | 'minMax'
-		catAxisLabelRotate?: number
-		catAxisLabelFontBold?: boolean
+		catAxisTitle?: string
 		catAxisTitleColor?: string
 		catAxisTitleFontFace?: string
 		catAxisTitleFontSize?: number
 		catAxisTitleRotate?: number
-		catAxisTitle?: string
-		catAxisLabelFontSize?: number
-		catAxisLabelColor?: string
-		catAxisLabelFontFace?: string
-		catAxisLabelFrequency?: string
-		catAxisBaseTimeUnit?: string
-		catAxisMajorTimeUnit?: string
-		catAxisMinorTimeUnit?: string
-		catAxisMajorUnit?: string
-		catAxisMinorUnit?: string
-		catAxisMajorTickMark?: ChartAxisTickMark
-		catAxisMinorTickMark?: ChartAxisTickMark
 		catGridLine?: OptsChartGridLine
-		valGridLine?: OptsChartGridLine
+		catLabelFormatCode?: string
 		chartColors?: Array<string>
 		chartColorsOpacity?: number
-		showLabel?: boolean
-		lang?: string
-		dataNoEffects?: string
-		dataLabelFormatScatter?: string
-		dataLabelFormatCode?: string
+		dataBorder?: IBorderOptions
 		dataLabelBkgrdColors?: boolean
-		dataLabelFontSize?: number
 		dataLabelColor?: string
+		dataLabelFontBold?: boolean
 		dataLabelFontFace?: string
+		dataLabelFontSize?: number
+		dataLabelFormatCode?: string
+		dataLabelFormatScatter?: string
 		dataLabelPosition?: string
+		dataNoEffects?: string
+		dataTableFontSize?: number
 		displayBlanksAs?: string
 		fill?: string
-		border?: IBorderOptions
 		hasArea?: boolean
-		catAxes?: Array<number>
-		valAxes?: Array<number>
+		holeSize?: number
+		invertedColors?: string
+		lang?: string
+		layout?: PositionOptions
+		legendColor?: string
+		legendFontFace?: string
+		legendFontSize?: number
+		legendPos?: string
+		lineDash?: 'dash' | 'dashDot' | 'lgDash' | 'lgDashDot' | 'lgDashDotDot' | 'solid' | 'sysDash' | 'sysDot'
 		lineDataSymbol?: string
-		lineDataSymbolSize?: number
 		lineDataSymbolLineColor?: string
 		lineDataSymbolLineSize?: number
-		showLegend?: boolean
-		showCatAxisTitle?: boolean
-		legendPos?: string
-		legendFontFace?: string
-		legendFontSize?: number
-		legendColor?: string
+		lineDataSymbolSize?: number
+		lineSize?: number
 		lineSmooth?: boolean
-		invertedColors?: string
-		serAxisOrientation?: string
+		radarStyle?: string
+		serAxisBaseTimeUnit?: string
 		serAxisHidden?: boolean
-		serGridLine?: OptsChartGridLine
-		showSerAxisTitle?: boolean
-		serLabelFormatCode?: string
-		serAxisLabelPos?: 'none' | 'low' | 'high' | 'nextTo'
-		serAxisLineShow?: boolean
-		serAxisLabelFontSize?: string
 		serAxisLabelColor?: string
 		serAxisLabelFontFace?: string
+		serAxisLabelFontSize?: string
 		serAxisLabelFrequency?: string
-		serAxisBaseTimeUnit?: string
+		serAxisLabelPos?: 'none' | 'low' | 'high' | 'nextTo'
+		serAxisLineShow?: boolean
 		serAxisMajorTimeUnit?: string
-		serAxisMinorTimeUnit?: string
 		serAxisMajorUnit?: number
+		serAxisMinorTimeUnit?: string
 		serAxisMinorUnit?: number
+		serAxisOrientation?: string
+		serAxisTitle?: string
 		serAxisTitleColor?: string
 		serAxisTitleFontFace?: string
 		serAxisTitleFontSize?: number
 		serAxisTitleRotate?: number
-		serAxisTitle?: string
+		serGridLine?: OptsChartGridLine
+		serLabelFormatCode?: string
+		shadow?: IShadowOptions
+		showCatAxisTitle?: boolean
 		showDataTable?: boolean
 		showDataTableHorzBorder?: boolean
-		showDataTableVertBorder?: boolean
-		showDataTableOutline?: boolean
 		showDataTableKeys?: boolean
+		showDataTableOutline?: boolean
+		showDataTableVertBorder?: boolean
+		showLabel?: boolean
+		showLeaderLines?: boolean
+		showLegend?: boolean
+		showPercent?: boolean
+		showSerAxisTitle?: boolean
+		showTitle?: boolean
+		showValAxisTitle?: boolean
+		showValue?: boolean
 		title?: string
-		titleFontSize?: number
+		titleAlign?: string
 		titleColor?: string
 		titleFontFace?: string
-		titleRotate?: number
-		titleAlign?: string
+		titleFontSize?: number
 		titlePos?: { x: number; y: number }
-		dataLabelFontBold?: boolean
-		valueBarColors?: Array<string>
-		holeSize?: number
-		showTitle?: boolean
-		showValue?: boolean
-		showPercent?: boolean
-		catLabelFormatCode?: string
-		dataBorder?: IBorderOptions
-		lineSize?: number
-		lineDash?: 'dash' | 'dashDot' | 'lgDash' | 'lgDashDot' | 'lgDashDotDot' | 'solid' | 'sysDash' | 'sysDot'
-		radarStyle?: string
-		shadow?: IShadowOptions
-		catAxisLabelPos?: 'none' | 'low' | 'high' | 'nextTo'
-		valAxisOrientation?: 'minMax' | 'minMax'
+		titleRotate?: number
+		v3DPerspective?: number
+		v3DRAngAx?: boolean
+		v3DRotX?: number
+		v3DRotY?: number
+		valAxes?: Array<number>
 		valAxisCrossesAt?: string | number
-		valAxisMaxVal?: number
-		valAxisMinVal?: number
+		valAxisDisplayUnit: 'billions' | 'hundredMillions' | 'hundreds' | 'hundredThousands' | 'millions' | 'tenMillions' | 'tenThousands' | 'thousands' | 'trillions'
 		valAxisHidden?: boolean
-		valAxisTitleColor?: string
-		valAxisTitleFontFace?: string
-		valAxisTitleFontSize?: number
-		valAxisTitleRotate?: number
-		valAxisTitle?: string
+		valAxisLabelColor?: string
+		valAxisLabelFontBold?: boolean
+		valAxisLabelFontFace?: string
+		valAxisLabelFontSize?: number
 		valAxisLabelFormatCode?: string
-		valAxisLineShow?: boolean
 		valAxisLabelPos?: 'none' | 'low' | 'high' | 'nextTo'
 		valAxisLabelRotate?: number
-		valAxisLabelFontSize?: number
-		valAxisLabelFontBold?: boolean
-		valAxisLabelColor?: string
-		valAxisLabelFontFace?: string
-		valAxisMajorUnit?: number
+		valAxisLineShow?: boolean
 		valAxisMajorTickMark?: ChartAxisTickMark
+		valAxisMajorUnit?: number
+		valAxisMaxVal?: number
 		valAxisMinorTickMark?: ChartAxisTickMark
-		showValAxisTitle?: boolean
-		axisPos?: string
-		v3DRotX?: number
-		v3DRotY?: number
-		v3DRAngAx?: boolean
-		v3DPerspective?: number
+		valAxisMinVal?: number
+		valAxisOrientation?: 'minMax' | 'minMax'
+		valAxisTitle?: string
+		valAxisTitleColor?: string
+		valAxisTitleFontFace?: string
+		valAxisTitleFontSize?: number
+		valAxisTitleRotate?: number
+		valGridLine?: OptsChartGridLine
+		valueBarColors?: Array<string>
 	}
 	export interface IImageOpts extends PositionOptions, OptsDataOrPath {
 		type?: 'audio' | 'online' | 'video'