Angular 2 ng2-charts donut change segment color

Question

This is question related to link

I am trying to create component with donut chart and pass input parameter color to set the segment of donut color. I am doing initialization of chart in ngOnInit(). Color is changed for hover(hoverBackgroundColor) but not for backgroundColor. Am I missing something?

    import {Component, OnInit, Input} from '@angular/core';

@Component({
    selector: 'donut-medium',
    templateUrl: './donut-medium.component.html',
    styleUrls: ['./donut-medium.component.css']
})
export class DonutMediumComponent implements OnInit {

    @Input() color: any;
    @Input() percentage: number;
    @Input() text1: string;
    @Input() text2: string;
    colors: any[]=[];

    // Doughnut
    public doughnutChartLabels: string[] = [];
    //public doughnutChartData: number[] = [];
    public doughnutChartType: string ;



    public doughnutChartOptions: any;
    public doughnutChartDatasets: any[];

    // events
    public chartClicked(e: any): void {
        console.log(e);
    }

    public chartHovered(e: any): void {
        console.log(e);
    }


    ngOnInit() {
        console.log('color', this.color);
        console.log('percentage', this.percentage);
        console.log('text1', this.text1);
        console.log('text2', this.text2);

        //this.colors = [];
        this.doughnutChartLabels = [];
       // this.doughnutChartData= [];
        this.doughnutChartType = 'doughnut';
        this.doughnutChartDatasets = [
            {
                data: [this.percentage, 100-this.percentage],
                options: this.doughnutChartOptions,
                borderColor: [],
                backgroundColor: [
                    this.color,
                    "#FFCE56"
                ],
                hoverBackgroundColor: [
                    this.color,
                    "#dadada"
                ]
            }
        ]

        this.doughnutChartOptions = {
            tooltips: {
                enabled: false
            },
            cutoutPercentage: 85,
            elements: {
                center: {
                    text: this.text1,
                    text2: this.text2 ,
                    text3: "RANK",
                    fontColor: '#000',
                    fontFamily: "CalibreWeb, 'Helvetica Neue', Arial ",
                    fontSize: 36,
                    fontStyle: 'normal'
                }
            }
        };


    }


    constructor() {

    }

    ngAfterViewInit() {
        Chart.pluginService.register({
            afterDraw: function (chart) {

                if (chart.config.options.elements.center) {
                    var helpers = Chart.helpers;
                    var centerX = (chart.chartArea.left + chart.chartArea.right) / 2;
                    var centerY = (chart.chartArea.top + chart.chartArea.bottom) / 2;

                    var ctx = chart.chart.ctx;
                    ctx.save();
                    var fontSize = helpers.getValueOrDefault(chart.config.options.elements.center.fontSize, Chart.defaults.global.defaultFontSize);
                    var fontStyle = helpers.getValueOrDefault(chart.config.options.elements.center.fontStyle, Chart.defaults.global.defaultFontStyle);
                    var fontFamily = helpers.getValueOrDefault(chart.config.options.elements.center.fontFamily, Chart.defaults.global.defaultFontFamily);
                    var font = helpers.fontString(fontSize * 2, fontStyle, fontFamily);
                    ctx.font = font;
                    ctx.fillStyle = helpers.getValueOrDefault("#ff8900", Chart.defaults.global.defaultFontColor);
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    ctx.fillText(chart.config.options.elements.center.text, centerX, centerY - 45);

                    // draw horizontal line
                    ctx.fillStyle = "#dadada";
                    ctx.fillRect(centerX - chart.innerRadius / 2, centerY, chart.innerRadius, 1);

                    //draw text second line
                    font = helpers.fontString(fontSize, fontStyle, fontFamily);
                    ctx.fillStyle = 'black';
                    ctx.font = font;
                    ctx.fillText(chart.config.options.elements.center.text2, centerX, centerY + 35);

                    //draw text 3rd line
                    // font = helpers.fontString(10, fontStyle, fontFamily);
                    // ctx.font = font;
                    // ctx.fillText(chart.config.options.elements.center.text3, centerX, centerY+60);

                    ctx.restore();
                }
            },
        })
    }


}
declare var Chart: any;

Answer 1

// typescript

public doughnutChartColors: Color[] = [{
  backgroundColor: ['#f1c40f', '#2ecc71', '#e74c3c']
 }];

// html

<canvas baseChart 
 [data]="doughnutChartData" [labels]="doughnutChartLabels
 [chartType]="doughnutChartType" [colors]="doughnutChartColors"
 height="200">
</canvas>

Answer 2

Pass in a colors object into the canvas directive:

<div style="display: block">
    <canvas baseChart
            [data]="doughnutChartData"
            [labels]="doughnutChartLabels"
            [colors]="doughnutChartColors"
            [chartType]="doughnutChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
</div>

In the TypeScript:

public doughnutChartColors: any[] = 
[
    {
        backgroundColor: 'rgba(177,200,84,0.2)',
        borderColor: 'rgba(106,185,236,1)'
    }
]