cant change the color fill for radial bars on Angular 14

[Senyeki01]

import { Component, Input, ViewChild } from "@angular/core";

import {
ChartComponent,
ApexNonAxisChartSeries,
ApexChart,
ApexPlotOptions,
ApexOptions,
ApexFill
} from "ngx-apexcharts";

export type ChartOptions = {
series: ApexNonAxisChartSeries;
chart: ApexChart;
plotOptions: ApexPlotOptions;
options: ApexOptions;
labels: string[];
fill: ApexFill;
};

@component({
selector: 'ovation-radial-chart',
templateUrl: './radial-chart.component.html',
styleUrls: ['./radial-chart.component.scss'],
})

export class RadialChartComponent {
@input() chartValue: any = 10;
@ViewChild("chart") chart: ChartComponent | undefined;
public chartOptions: Partial & { colors?: string[] };

constructor() {
this.chartOptions = {
colors: ['#F44336', '#E91E63', '#9C27B0'],
series: [0],
chart: {
height: 250,
type: "radialBar",
toolbar: {
show: false
},
foreColor: '#333' // Optionally set the color of the text and lines
},
plotOptions: {
radialBar: {
hollow: {
size: "80%"
},
dataLabels: {
name: {
show: false
},
value: {
color: (this.chartValue < 20) ? 'red' : (this.chartValue < 40) ? 'indianred' : (this.chartValue < 60) ? 'orange' : (this.chartValue < 80) ? 'lightgreen' : 'green'
}
}
}
},
labels: [],
fill: {
type: "solid",
colors: [(this.chartValue < 20) ? '#F44336' : (this.chartValue < 40) ? '#E91E63' : (this.chartValue < 60) ? 'orange' : (this.chartValue < 80) ? 'lightgreen' : '#E91E63']
},
};
}

ngOnChanges() {
this.chartOptions.series = [this.chartValue];

this.chart?.updateOptions(this.chartOptions, true);

}
}

[SenyekiMaroga]

Any update on the above.. It is rather urgent please.

[OndraRehounek]

This is Vue repo, I guess this is not the place to ask Angular related questions