How do I change the color for ng2-charts?

edamerau picture edamerau · Oct 3, 2016 · Viewed 42.1k times · Source

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

Answer

Jorge Casariego picture Jorge Casariego · Feb 23, 2017

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