ApexCharts TypeError: Cannot read properties of undefined (reading 'length') Fill Property

I am developing an app using Angular, the case is that when I want to put the fill property inside the ApexChartsOptions it throws an "TypeError: Cannot read properties of undefined (reading 'length')" but I dont know why.

HTML:

<apx-chart
class="chart"
[series]="emodChartConfig.routingOverviewSeries"
[chart]="emodChartConfig.routingOverviewChartOptions.chart"
[stroke]="emodChartConfig.routingOverviewChartOptions.stroke"
[tooltip]="emodChartConfig.routingOverviewChartOptions.tooltip"
[fill]="emodChartConfig.routingOverviewChartOptions.fill"
[legend]="emodChartConfig.routingOverviewChartOptions.legend"
[xaxis]="emodChartConfig.overviewXAxis"
[yaxis]="emodChartConfig.routingOverviewChartOptions.yaxis"
[plotOptions]="emodChartConfig.routingOverviewChartOptions.plotOptions"
[dataLabels]="emodChartConfig.routingOverviewChartOptions.dataLabels"
></apx-chart>


TS(Angular):

async loadOverviewData() {
this.monthlyEMODService.getOverviewMonthlyEMOD().subscribe({
next: (data) => {
const categories = data.map((item) => IdToUn[item.departmentId]);
const routingData = data.map((item) => item.emod);
const totalData = data.map((item) => item.pureEMOD);
const totalBudget = data.map((item) => item.totalBudget);
const routingBudget = data.map((item) => item.routingBudget);

this.routingOverviewSeries = [
{
name: 'EMOD',
type: 'column',
data: [...routingData],
},
{
name: 'Objetivo',
type: 'line',
data: [...routingBudget],
},
];

this.routingOverviewChartOptions = {

dataLabels: {
enabled: true,
enabledOnSeries: [0],
style: {
fontSize: '14px',
fontWeight: 'bold',
colors: [
function (opts: any) {

const routingBudget = opts.w.config.series[1].data; // Asumiendo que 'Objetivo' es la segunda serie
const routingData = opts.w.config.series[0].data; // Asumiendo que 'EMOD' es la primera serie

if (routingData[opts.dataPointIndex] > routingBudget[opts.dataPointIndex])
return '#00FF00'; // Verde
else
return '#FF0000'; // Rojo

},
],
},
},
plotOptions: {
bar: {
distributed: true,
},
},
fill: {
colors: [function(opts:any) {
const routingBudget = opts.w.config.series[1].data; // Asumiendo que 'Objetivo' es la segunda serie
const routingData = opts.w.config.series[0].data; // Asumiendo que 'EMOD' es la primera serie

if (routingData[opts.dataPointIndex] > routingBudget[opts.dataPointIndex]) {
return '#00FF00'; // Verde
} else {
return '#FF0000'; // Rojo
}
}]
},
}

}


As you can see, i have the exact same thing in dataLabels and in the Fill property, however in the Fill property is not working but in the datalabels property it is.

I´ve tried doing a console.log(opts.dataPointIndex); for example and it only gives me: 0 and 1 and then it fails and displays the error in the console, like if the array only had 2 elements. I want to know what am i doing wrong if im literally doing the same thing in both properties.

This is the fetched data:

[
{
"departmentId": 1,
"emod": 64.24,
"pureEMOD": 59.59,
"noCEDISEMOD": null,
"noCEDISPureEMOD": null,
"totalBudget": 82,
"routingBudget": 70
},
{
"departmentId": 2,
"emod": 84.25,
"pureEMOD": 73.05,
"noCEDISEMOD": null,
"noCEDISPureEMOD": null,
"totalBudget": 82,
"routingBudget": 86
},
{
"departmentId": 3,
"emod": 90.32,
"pureEMOD": 79.77,
"noCEDISEMOD": null,
"noCEDISPureEMOD": null,
"totalBudget": 85,
"routingBudget": 87
},
{
"departmentId": 4,
"emod": 75.61,
"pureEMOD": 67.6,
"noCEDISEMOD": null,
"noCEDISPureEMOD": null,
"totalBudget": 82,
"routingBudget": 87
},
{
"departmentId": 5,
"emod": 89.03,
"pureEMOD": 81.18,
"noCEDISEMOD": null,
"noCEDISPureEMOD": null,
"totalBudget": 82,
"routingBudget": 85
},
{
"departmentId": 6,
"emod": 87.12,
"pureEMOD": 70.93,
"noCEDISEMOD": null,
"noCEDISPureEMOD": null,
"totalBudget": 82,
"routingBudget": 82
},
{
"departmentId": 7,
"emod": 79.66,
"pureEMOD": 70.91,
"noCEDISEMOD": 91.23,
"noCEDISPureEMOD": 70.91,
"totalBudget": 82,
"routingBudget": 82
}
]


ApexCharts Fill Documentation

Continue reading...