ERROR type Error: ctx.list is undefined

Hi;
I have a problem that persists and I can not understand
I always get the following error : ERROR type Error: ctx.list is undefined

chart-model.ts

export class ListCandidats {
dataLabels: string[]
labels: string[]
dataSet1: number[]
dataSet2: number[]

constructor(
    dataLabels: string[] = ['A','AAA'],
    labels: string[] = Array.from({length:30}).map(x=>''),
    dataSet1: number[] = Array.from({length:30}).map(x=>0),
    dataSet2: number[] = Array.from({length:30}).map(x=>0)
) {
    this.dataLabels = dataLabels;
    this.labels = labels;
    this.dataSet1 = dataSet1;
    this.dataSet2 = dataSet2;
}

}

charts.service.ts

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { ListCandidats } from '../models/chart-model';

const API_URL = ${environment.apiUrl}

@Injectable({
providedIn: 'root'
})
export class ChartsService {

constructor(
private http : HttpClient
) { }

private authLocalStorageToken = ${environment.appVersion}-${environment.USERDATA_KEY}
lsValue: string = localStorage.getItem(this.authLocalStorageToken) || ""
authData = JSON.parse(this.lsValue)
httpHeaders = new HttpHeaders({
Authorization: Bearer ${this.authData.accessToken},
})

getListCandidats(): Observable {
return this.http.get(${API_URL}/admin/dashboard/listCandidats, {headers: this.httpHeaders})
}

}

chart.component.ts

import { Component, OnInit } from '@angular/core';
import { getCSSVariableValue } from 'src/app/_metronic/kt/_utils';
import { ChartsService } from '../services/charts.service';
import { ListCandidats } from '../models/chart-model';

@Component({
selector: 'app-chart-inscription',
templateUrl: './chart-inscription.component.html',
styleUrls: ['./chart-inscription.component.scss']
})
export class ChartInscriptionComponent implements OnInit {

list: ListCandidats

chartOptions: any = {}

constructor(
public services: ChartsService
) {

}

ngOnInit() {

this.services.getListCandidats().subscribe(data => 
  {
    this.list= data
    this.chartOptions = this.getChartOptions(350,  this.list)
  })

}

getChartOptions(height: number, list: ListCandidats) {

const labelColor = getCSSVariableValue('--bs-gray-500')
const borderColor = getCSSVariableValue('--bs-gray-200')
const baseColor = getCSSVariableValue('--bs-primary')
const secondaryColor = getCSSVariableValue('--bs-gray-300')

return {
series: [
{
name: list.dataLabels[0],
data: list.dataSet1
},
{
name: list.dataLabels[1],
data: list.dataSet2,
},
],
chart: {
fontFamily: 'inherit',
type: 'bar',
height: height,
toolbar: {
show: false,
},
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '50%',
borderRadius: 0,
},
},
legend: {
show: false,
},
dataLabels: {
enabled: false,
},
stroke: {
show: true,
width: 2,
colors: ['transparent'],
},
xaxis: {
categories: list.labels,
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
style: {
colors: labelColor,
fontSize: '12px',
},
},
},
yaxis: {
labels: {
style: {
colors: labelColor,
fontSize: '12px',
},
},
},
fill: {
opacity: 1,
},
states: {
normal: {
filter: {
type: 'none',
value: 0,
},
},
hover: {
filter: {
type: 'none',
value: 0,
},
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0,
},
},
},
tooltip: {
style: {
fontSize: '12px',
},
y: {
formatter: function (val: number) {
return '$' + val + ' thousands'
},
},
},
colors: [baseColor, secondaryColor],
grid: {
borderColor: borderColor,
strokeDashArray: 4,
yaxis: {
lines: {
show: true,
},
},
},
}

}

}