I am creating an Apexchart using Angular that is supposed to populate a dataset dynamically. When there is 3 data sets for the series and label, it loads just fine. When I add 5+ it randomly starts throwing the following error:

Error: Uncaught (in promise): TypeError: Cannot read properties of null (reading 'length')
TypeError: Cannot read properties of null (reading 'length')

Loading the chart partially.
I understand that this error would show up when the series data has null values (which again I think should be handled differently rather then throwing an error). But in my scenario I have 44 data sets that I need to load in my donut chart.

prepareDataForChart(data: any) {
    this.filteredProjects = data.projects.map((item) => {
      return {
        id: item.id,
        name: item.name,
        scope_cost: item.scope_cost,
        color: this.randomColor(),
      };
    });
  
    this.labels = this.filteredProjects.map(project [![enter image description here](https://i.sstatic.net/6gl4EXBM.png)](https://i.sstatic.net/6gl4EXBM.png)=> project.name);
    this.colors = this.filteredProjects.map(project => project.color);
    this.series = this.filteredProjects.map(project => Math.ceil(project.scope_cost));
    
    console.log('Series:', this.series);
    if(this.labels.length == 0){
      this.series = [0];
      this.labels = ['No Data'];
      this.colors = ['#000000'];
    }
    
    setTimeout(() => {
      this.createChart();
      setTimeout(() => {
        this.modifyLegendText();
      }, 1000);
    }, 1000);
    
  }

I added some timeouts in case it was an async issue. But it seems not to be that.

This is the chart settings, maybe I messed something here:

createChart() {
    this.chartOptions = {
      series: this.series,
      chart: {
        type: "donut",
        height: 270,
        events: {
          updated: (chartContext, config) => {
            this.zone.run(() => {
              this.modifyLegendText();
            });
          }        
        }
      },
      plotOptions: {
        pie: {
          expandOnClick: false,
          donut: {
            size: "86%",
            labels: {
              show: true,
              name: {
                offsetY: 4,
              },
              total: {
                show: true,
                fontSize: "14px",
                fontFamily: "Outfit', sans-serif",
                fontWeight: 600,
                label: '$' + this.formatTotalForDisplay(this.calculateTotal()),
                formatter: () => "Total Probabilites",
              },
            },
          },
        },
      },
      fill: {
        type: 'gradient',
      },
      labels: this.labels,
      responsive: [
        {
          breakpoint: 480,
          options: {
            chart: {
              width: 200
            },
            legend: {
              position: "bottom"
            }
          }
        }
      ],
      stroke: {
        width: 6,
      },
      colors: this.colors,
      dataLabels: {
        enabled: false,
      },
      legend: {
        show: false,
      },
      states: {
        normal: {
          filter: {
            type: "none",
          },
        },
        hover: {
          filter: {
            type: "none",
          },
        },
        active: {
          allowMultipleDataPointsSelection: false,
          filter: {
            type: "none",
          },
        },
      },
    };
  }

Let me know what you think! Issues that come 1 day before the release are the greatest!

I tried with hard-coded series array. When doing [1,2,3] it works. If I go over to [4,3,5,6,82,245] it throws the error. I think it’s just a simple array and I do not see why it would throw this error.