Issue
I have added ng2-charts to my project and display 2 charts - donut & barchart. both are displayed in gray since I added
<base-chart class="chart"
[colors]="chartColors"
...
</base-chart>
to the component.template.html
, and
public chartColors:Array<any> =[
{
fillColor:'rgba(225,10,24,0.2)',
strokeColor:'rgba(11,255,20,1)',
pointColor:'rgba(111,200,200,1)',
pointStrokeColor:'#fff',
pointHighlightFill:'#fff',
pointHighlightStroke:'rgba(200,100,10,0.8)'
}, ... (3x)
to the component.ts
.
Are any other package imports necessary to change the color or is the setup wrong?
Chromes html inspector shows the following html output rendered:
ng-reflect-colors="[object Object],[object Object],[object Object]"
Solution
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:
@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', ...]
}
]
Answered By - ulou
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.