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

Created on 10 Feb 2018 · 11Comments · Source: gitbrent/PptxGenJS

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

screen shot 2018-02-10 at 20 36 16

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 - https://github.com/gitbrent/PptxGenJS/issues/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:

https://github.com/gitbrent/PptxGenJS/blob/e4c46021f91deb4b34be9043e72d5f5ae37ab391/dist/pptxgen.js#L2691-L2695

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

bug

Source

andrei-cs

Most helpful comment

I'll look into it for 3.1

gitbrent on 21 Sep 2019

👍2

All 11 comments

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'],

screen shot 2018-02-11 at 18 42 19

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

gitbrent on 12 Feb 2018

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

screen shot 2018-02-12 at 13 07 20

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

screen shot 2018-02-12 at 13 07 02

andrei-cs on 12 Feb 2018

@gitbrent Have you had time to look this over ?

andrei-cs on 15 Feb 2018

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);

RokasDie on 7 Feb 2019

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...?

gitbrent on 8 Feb 2019

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.

Screenshot 2019-05-21 07 34 36

Slidemagic on 21 May 2019

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.