How do I change the color for ng2-charts?
You should do this like:
public chartColors: Array<any> = [
{ // first color
backgroundColor: 'rgba(225,10,24,0.2)',
borderColor: 'rgba(225,10,24,0.2)',
pointBackgroundColor: 'rgba(225,10,24,0.2)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(225,10,24,0.2)'
},
{ // second color
backgroundColor: 'rgba(225,10,24,0.2)',
borderColor: 'rgba(225,10,24,0.2)',
pointBackgroundColor: 'rgba(225,10,24,0.2)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(225,10,24,0.2)'
}];
Gray color is set by default, which means your color options don't work, because of wrong properties names.
Here you have an example, how colors properties are called:
ng2-charts-github-source-code
@UPDATE:
If there is a need to update just backgroundColor and nothing else, code below will work too.
public chartColors: Array<any> = [
{ // all colors in order
backgroundColor: ['#d13537', '#b000b5', '#c0ffee', ...]
}
]
Also you can do it in this way:
<base-chart class="chart"
[colors]="chartColors"
...
</base-chart>
and
public chartColors: any[] = [
{
backgroundColor:["#FF7360", "#6FC8CE", "#FAFFF2", "#FFFCC4", "#B9E8E0"]
}];