Ng2-charts: bar chart - colors issue

[Viktor-Bredihin]

I can't change colors for 'bar' type using the same dataset, but it's possible with chart.js using backgroundColor within dataset http://plnkr.co/edit/felAUi?p=preview

[gwsampso]

you will need to include [colors]

<base-chart class="chart" [datasets]="datasets" [colors]="colors" [labels]="labels" [options]="options" [chartType]="'bar'"> </base-chart>

and then

private colors = [
{
  backgroundColor: [
    'rgba(255, 99, 132, 0.2)',
    'rgba(54, 162, 235, 0.2)',
    'rgba(255, 206, 86, 0.2)',
    'rgba(0, 255, 0, 0.2)',
    'rgba(102, 0, 204, 0.2)',
    'rgba(255, 128, 0, 0.2)'
  ]
}

];

http://plnkr.co/edit/0lxpDg?p=preview

[Viktor-Bredihin]

@gwsampso thanks, works perfect

[SergeyKuryatnick]

@Viktor-Bredihin issue can be closed?

[pratik-trianz]

this is for a single bar data, i need for three bars

public barChartData:any[] = [
{data: [65, 59, 80, 81, 56], label: 'Design'},
{data: [28, 48, 40, 19, 86], label: 'Developement'},
{data: [25, 40, 45, 16, 76], label: 'Effects'}
];

what will be the trick?

[simipannian]

@pratik-trianz ... Did you manage to get three bars with different colors?

[pratik-trianz]

@simipannian yes, as follow

public barChartData:any[] = [
{data: [65, 59, 80, 81, 56], label: 'User Experience', backgroundColor:'rgba(238, 83, 79, 1)'},
{data: [28, 48, 40, 19, 86], label: 'Visual Design', backgroundColor:'rgba(112, 190, 78, 1)'},
{data: [25, 40, 45, 16, 76], label: 'Story Boarding', backgroundColor:'rgba(255, 168, 39, 1)'}
];

[Deilan]

In addition to @gwsampso's comment.

Even just:

private colors = [undefined];

works.

But this:

private colors = [];

doesn't work.

This is definitely a bug.

[FahadAlanazi]

Old issue but,

I tried
[colors]="colors" ( in the template) )
private colors = [{}]; ( in the component)

the ChartData
{data: [2, 2, 2, 2, 2, 2],backgroundColor: 'rgba(255, 0, 0, 1)', label: 'Bar1'},

[ShawnMercado]

I still don't understand how to do this. The answers from @pratik-trianz and @FahadAlanazi don't alter the colors for me. Although I can put a prop like borderWidth: 2 where they have put backgroundColor: ..., and that renders, I cannot alter either the borderColor or the backgroundColor. Adding those properties in this manner have no effect.

How to do things like this really need to be documented.

[gwsampso]

Do you have example code? Does your code look similar to the plnk?

[VhMuzini]

+1 on this

[mikedemarco]

I needed to show bars from one dataset in different colors. this worked for me:

set [colors]="[undefined]" in the template

this.barChartDatasets = [
      {
        data: [150,20,120],       
        backgroundColor: ['rgba(76,175,80,1)', 'rgba(255,152,0,1)', 'rgba(76,175,80,1)']
       }
]

bars over 100 will be green. bar under 100 will be orange

[paviad]

Please see this stackblitz for example on how to bind bar chart colors: https://stackblitz.com/edit/angular-abcjsd

[am-awais]

can we set these colors according to the values of y-axis