Bar chart with one series displays broken if chartColors argument is given

[andrei-cs]

Creating a bar chart with one series and providing a chartColors array seems results in a graph looking like this:

Removing the chartColors param displays it correctly but I can't find another way of setting the color.

The problem is exactly as in this issue - #225

Providing a single element in the chartColors array solves the color problem but still creates a legend with all the values in the labels array.

Looking through the code it seems like it is somewhat of an intended behaviour:

PptxGenJS/dist/pptxgen.js

Lines 2691 to 2695 in e4c4602

	// Color chart bars various colors
	// Allow users with a single data set to pass their own array of colors (check for this using != ours)
	if ( chartType == 'bar' && ( data.length === 1 || opts.valueBarColors ) && opts.chartColors != BARCHART_COLORS ) {
	// Series Data Point colors
	obj.values.forEach(function(value,index){

How would one set a custom color for a bar chart ?

[gitbrent]

Hi @andrei-cs,

I'm not quite sure what the chart you're trying to produce would look like, but chartColors is the way to pass colors.

Using an array of colors with a single array is a specialized feature, any "normal" chart would just use something like this:

chartColors: ['0088CC', '99FFCC'],

Have you looked through the chart code in examples/pptxgenjs-demo.html ?

[andrei-cs]

Maybe I wasn't clear enough explaining my problem.

The following code:

var slide = pptx.addNewSlide();
	var opts = { x:1.0, y:1.0, font_size:42, color:'00FF00' };
 	var data = [ { name: 'Sample',
    labels: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23 ],
    values: [ 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 2, 1, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0 ] } 
];

  slide.addChart(pptx.charts.BAR, data, {showLegend:true});
	pptx.save(); 

generates the graph below with the correct legend being the Series name

Adding chartColors to it:

var pptx = new PptxGenJS();
	var slide = pptx.addNewSlide();
	var opts = { x:1.0, y:1.0, font_size:42, color:'00FF00' };
 	var data = [ { name: 'Sample',
    labels: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23 ],
    values: [ 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 2, 1, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0 ] } 
];

  slide.addChart(pptx.charts.BAR, data, {showLegend:true, chartColors:['0000FF']});
	pptx.save();

Generates it like in the picture below - with the legend not being correct

[andrei-cs]

@gitbrent Have you had time to look this over ?

[RokasDie]

Any news on this issue? Seems like if you add chartColors array (for chart with single item) with single color, it creates totally different layout (years in the legend):

Instead of this layout, with correct legend:

Here is the options variable:

const dataChartColumn = [
    {
      name: "Single item",
      labels: labels,
      values: returns,
    }
  ];
  const multiOpts = {
    x: 0.472441, y: 1.61417, w: 5.826772, h: 1.318898,
    showPercent: false,
    chartColors: ['003755'],
    barDir: "col",
    
    shadow: "none",
    valAxisLabelFormatCode: '0%',
    showLegend: true,
    legendPos: "b",
    legendFontSize: 8,
    legendFontFace: "Danske Text",

    catAxisLabelFontSize: 8,
    catAxisLabelFontFace: 'Danske Text',
    valAxisLabelFontFace: 'Danske Text',
    valAxisLabelFontSize: '8',
    valGridLine: {
      color: "EFF0F1",
    }
  }

  slide.addChart(pptx.charts.BAR, dataChartColumn, multiOpts);

[gitbrent]

Not really. I've looked through the code a few times and while i intuitively understand that the use of this color array must be creating new series or something, i'm not seeing it.

The Legend is a straight toggle in XML. It's there or it isn't - i'm not adding "rows" or items to, therefore, the chartColors must be doing something to affect the data series...?

[Slidemagic]

I experienced the same issue: in my case I am not using a legend, but negative values in a bar or column chart product different colours.

One possible source of this could be in the chart styles that PowerPoint is using. Have a look at the attached screen shot. In the bar above, you see suggested layouts: some of them have different colours for negative values, others not.

Selecting the entire data series in PowerPoint and applying a different colour to them, only changes the positive bars. Opening the data in Excel shows just one data series. Selecting the data series in PowerPoint activates all the bars, not just the positive ones.

Selecting a different chart style, gets you the same colour initially, but as soon as you apply a new series colour, then you are back to the old same problem. (I thought this could be possible fix in the code, by setting the chart style somehow before applying formatting)

@gitbrent I think the only solution is to expose PowerPoint's feature to colour individual data points in the API?

A temporary workout is to render these type of charts as stacked bar or column charts, and split data series with negative numbers into 2: one positive, one negative, and apply colours to them separately.

[kupkama2]

Any update on this? I am unable to correctly display legend for barchart with just one series + set chartColors. If I don't set the chartColor legend displays correctly.

[kupkama2]

@gitbrent is anyone looking into this? It's exactly the same problem as solved in #225, but for bar charts
Thanks for your response.

[gitbrent]

I'll look into it for 3.1

[gitbrent]

Hi @andrei-cs

What's happening is that PowerPoint creates this unique "1 legend item for every category" legend when you use different colors for the bars.

Here is PowerPoint 2019 creating a bar chart from scratch and adding distinct colors:

Basic legend

When using a custom bar color:

[gitbrent]

@Slidemagic - thanks for the details. This issue is fixed in master; target v3.1.0

[pinakipatrapro]

Same issue in 3.12.0.
Workaround :
chartColors: chartColors.splice(0,data.length)