cant change the color fill for radial bars on Angular 14

[SenyekiMaroga]

image
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;
};

https://github.com/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: 'apexcharts/vue-apexcharts#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);
}
}

[bastianremo]

Any updates of this? I'm facing problems with the dependencies when I deploy my proyect, the render of the colorstop in the line chart doesn't work properly

[filipagh]

hi a mange to change colors by

  ngAfterViewInit() {
    this.chart.fill = {colors: ['#d5074e', '#546E7A']};
  }

but yes ng wrapper missing option to set fill in ChartOptions