How do I change the color for ng2-charts?

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:

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', ...]
    }
]

Answered By - ulou