Ng2-charts: Second chart colors are all grey!!

[dj-techs]

I placed two doughnut chart.
First one has colors but second one's colors are all grey.
please check the screenshot.

here's code for this issue.

<div class="col-xs-12 col-md-6">
        <div class="col-xs-12 text-center"> Your answer </div>
        <canvas baseChart
            [data]="localValues"
            [labels]="names"
            [chartType]="'doughnut'"></canvas>
</div>
<div class="col-xs-12 col-md-6">
        <div class="col-xs-12 text-center"> Average answer </div>
        <canvas baseChart
            [data]="avgValues"
            [labels]="names"
            [chartType]="'doughnut'"></canvas>
</div> 

I tried with changing second chart's label variable, but not working.
why is this happening?

[immohammadjaved]

you have to use color option

HTML
<canvas baseChart [data]="avgValues" [labels]="names" [colors]="doughnutChartColors" [chartType]="'doughnut'"></canvas>

in .ts File
public doughnutChartColors: Array<any> = [ { backgroundColor: ['#01dd93', '#4ce7b3', '#99f1d3'], borderColor: 'transparent' } ];

[paviad]

See this stackblitz for an example: https://stackblitz.com/edit/ng2-charts-multiple-charts-aor8tt

[tiagoriba]

See this stackblitz for an example: https://stackblitz.com/edit/ng2-charts-multiple-charts-aor8tt

Even that example when you press "Update" it only gets grey color, is there an option to put colors automatically?