Angular 2 ng2-charts donut change segment color

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; ```