Fix for empty color negative values on barchart (Issue #285)

CHANGELOG.md

@@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - 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: Empty color negative values on barchart [\#285](https://github.com/gitbrent/PptxGenJS/issue/285) ([andrei-cs](https://github.com/andrei-cs)) ([Slidemagic](https://github.com/Slidemagic))
 - Fixed: Add missing margin type from ITextOpts [\#643](https://github.com/gitbrent/PptxGenJS/pull/643) ([cronin4392](https://github.com/cronin4392))
 - Fixed: Scatter plot `dataLabelPosition` [\#644](https://github.com/gitbrent/PptxGenJS/issue/644) ([afarghaly10](https://github.com/afarghaly10))
 - Fixed: Added new babel polyfill for IE11; other IE11 fixes in demo, etc. [\#648](https://github.com/gitbrent/PptxGenJS/issue/648) ([YakQin](https://github.com/YakQin))

demos/common/demos.js

@@ -4,7 +4,7 @@
 * DESC: Common test/demo slides for all library features
 * DEPS: Used by various demos (./demos/browser, ./demos/node, etc.)
 * VER.: 3.1.0
-* BLD.: 20200112
+* BLD.: 20200117
 */
 
 // Detect Node.js (NODEJS is ultimately used to determine how to save: either `fs` or web-based, so using fs-detection is perfect)
@@ -1163,18 +1163,20 @@ function genSlides_Chart(pptx) {
 				{
 					name  : 'Two Color Series',
 					labels: ['Jan', 'Feb','Mar', 'Apr', 'May', 'Jun'],
-					values: [.20, .30, .10, .25, .15, .05]
+					values: [.20, -.30, -.10, .25, .15, .05]
 				}
 			],
 			{  x:0.5, y:4.0, w:'45%', h:3,
-				barDir: 'bar',
+				barDir: 'col', // `col`(vert) | `bar`(horiz)
 				showValue: true,
 				dataLabelPosition: 'outEnd',
 				dataLabelFormatCode: '#%',
 				valAxisLabelFormatCode: '0.#0',
-				chartColors: ['0077BF','4E9D2D','ECAA00'],
+				chartColors: ['0077BF','4E9D2D','ECAA00','5FC4E3','DE4216','154384', '7D666A','A3C961','EF907B','9BA0A3'],
 				valAxisMaxVal: .40,
-				barGapWidthPct: 50
+				barGapWidthPct: 50,
+				showLegend : true,
+	            legendPos  :  'r',
 			}
 		);
 

src/gen-charts.ts

@@ -786,11 +786,11 @@ function makeChartType(chartType: CHART_TYPE_NAMES, data: OptsChartData[], opts:
 				if ((chartType === CHART_TYPES.BAR || chartType === CHART_TYPES.BAR3D) && (data.length === 1 || opts.valueBarColors) && opts.chartColors !== BARCHART_COLORS) {
 					// Series Data Point colors
 					obj.values.forEach((value, index) => {
-						let arrColors = value < 0 ? opts.invertedColors || BARCHART_COLORS : opts.chartColors || []
+						let arrColors = value < 0 ? opts.invertedColors || opts.chartColors || BARCHART_COLORS : opts.chartColors || []
 
 						strXml += '  <c:dPt>'
 						strXml += '    <c:idx val="' + index + '"/>'
-						strXml += '      <c:invertIfNegative val="' + (opts.invertedColors ? 0 : 1) + '"/>'
+						strXml += '      <c:invertIfNegative val="0"/>'
 						strXml += '    <c:bubble3D val="0"/>'
 						strXml += '    <c:spPr>'
 						if (opts.lineSize === 0) {
@@ -1124,7 +1124,7 @@ function makeChartType(chartType: CHART_TYPE_NAMES, data: OptsChartData[], opts:
 
 						strXml += '  <c:dPt>'
 						strXml += '    <c:idx val="' + index + '"/>'
-						strXml += '      <c:invertIfNegative val="' + (opts.invertedColors ? 0 : 1) + '"/>'
+						strXml += '      <c:invertIfNegative val="0"/>'
 						strXml += '    <c:bubble3D val="0"/>'
 						strXml += '    <c:spPr>'
 						if (opts.lineSize === 0) {