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]"
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"]
}];