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,
    ];

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?