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, chart.js@4.4.4, ng2-charts@4.1.1

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?

Continue reading...