My Angular HTML Page doesn't load after populating ng2-chart datasets' data

I'm currently working on an Angular project to develop a dashboard of sorts.

public donutChartData: any = {
    labels: [],
    datasets: [
      {
        data: [1, 1, 1],
        backgroundColor: [
          'rgba(0, 153, 0, 0.8)',
          'rgba(255, 128, 0, 0.8)',
          'rgba(255, 0, 0, 0.8)',
        ],
        hoverBackgroundColor: [
          'rgba(0, 153, 0, 1)',
          'rgba(255, 128, 0, 1)',
          'rgba(255, 0, 0, 1)',
        ],
      },
    ],
  };

copylistOfData1: Hardware_Ariel[] = [];
copylistOfData2: Hardware_Bastet[] = [];
copylistOfData3: Hardware_Carmen[] = [];
copylistOfData4: Hardware_Dread[] = [];
copylistOfData5: Hardware_Elias[] = [];

getTotalNumberOfDevicesIn(country: string): number {
    // Your existing method remains the same
    const dataSources = [
      this.copylistOfData1,
      this.copylistOfData2,
      this.copylistOfData3,
      this.copylistOfData4,
      this.copylistOfData5,
    ];

const totalDevices = dataSources.reduce((total, dataSource) => {
      const deviceCount = dataSource.filter(
        (device) => device.COUNTRY === country
      ).length;
      return total + deviceCount;
    }, 0);

    return totalDevices;

My HTML:

<div class="donuts">
  <canvas 
    baseChart
    [data]="donutChartData"
    [type]="donutChartType"
    [options]="donutChartOptions">
  </canvas>
</div>

I am using Angular@17, [email protected], [email protected]

I've tried initializing it in ngOnInit() but the chart does not render I've also tried using a @if to load the data within the .html file to make sure the method has been run and check if the number wasn't the default 1 but that was in vain as well.

Initially, I tried using:

data: [this.getTotalNumberOfDevicesIn("VN"), 1, 1]

I am hoping to find a way to use the method to load/change the data for the doughnut. Can someone point me in the right direction or tell me what could I be doing wrong?