Ng2-charts: Changing Default Background Colors for Bar Chart

Created on 23 Feb 2017  路  7Comments  路  Source: valor-software/ng2-charts

What is the best way to change the global default color for a bar chart using multiple datasets?

Most helpful comment

Attribute [colors]="myColors" where
myColors = [{ backgroundColor: ['#firstBarColor', '#secondBarColor', '#thirdBarColor']}];

All 7 comments

Attribute [colors]="myColors" where
myColors = [{ backgroundColor: ['#firstBarColor', '#secondBarColor', '#thirdBarColor']}];

Thanks @dowrow !

thank you @dowrow however, that just sets the colors for each bar, what if I have multiple datasets and I want all the bars of each dataset to have the same color.

For instance if I have a bar chart with 1 dataset, I want all the bars on that chart to be the same color. If I have 2 data sets, I want the first bar in each group to be the same color, then the second bar in each set to be the same color and so on and so forth.

Does that make sense?

Note that, in my example, myColors is an array where each object element applies to a different dataset. So, if you want to style different sets just use more objects:
myColorsForMultipleDatasets = [{ backgroundColor: [...] }, { backgroundColor: [...] }];

@dowrow Thanks for the clarification, I tried that and the result I get is the following:

image

[colors] = [{ backgroundColor: ['rgba(8, 123, 180, 1)'] }, { backgroundColor: ['rgba(113, 24, 255, 1)'] }, { backgroundColor: ['rgba(223, 0, 145, 1)'] }];`

The array works for the first set of bars (the colors are correct, even though it's hard to see there are any "Open" but it doesn't work for the rest. If make each array have n number of items in them, it will work for up to n number of items. Is there a way to just make { backgroundColor: ['rgba(8, 123, 180, 1)'] } work for any number of bar sets?

I hope that makes sense.

Thank you for your help!

@blubberbo maybe I can help with that. If you have 2 datasets with 2 bars each, you want to set the value for colors as:

[colors] = [
    { //first dataset colors, for each bar
      backgroundColor: [
        'rgba(255, 0, 0, 0.8)',
        'rgba(255, 0, 0, 0.8)',
      ]},
    { //second dataset colors, for each bar
      backgroundColor: [
        'rgba(0, 0, 255, 0.8)',
        'rgba(0, 0, 255, 0.8)',
      ]
    }
];

Can't find a way to set 1 value for all the bars in a dataset, sorry.

This issue could be closed now.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

shenriksen4 picture shenriksen4  路  3Comments

shyamal890 picture shyamal890  路  4Comments

hggeorgiev picture hggeorgiev  路  4Comments

mrpotato3 picture mrpotato3  路  5Comments

tssobe picture tssobe  路  4Comments