ngx pie chart not showing chart in the browser in Angular app

I have been trying to display a chart in my angular app but for some reason it is not displaying in the browser. My package.json looks like this.

"dependencies": {
"@angular/animations": "~13.1.1",
"@angular/common": "~13.1.1",
"@angular/compiler": "~13.1.1",
"@angular/core": "~13.1.1",
"@angular/fire": "^7.2.0",
"@angular/forms": "~13.1.1",
"@angular/material": "^13.1.1",
"@angular/platform-browser": "~13.1.1",
"@angular/platform-browser-dynamic": "~13.1.1",
"@angular/router": "~13.1.1",
"@swimlane/ngx-charts": "^20.0.1",
"@swimlane/ngx-datatable": "^20.0.0",

},


home.component.html:

<div class="card">
<ngx-charts-pie-chart
[view]="view"
[scheme]="colorScheme"
[results]="arr"
[gradient]="gradient"
[legend]="showLegend"
[legendPosition]="legendPosition"
[labels]="showLabels"
[doughnut]="isDoughnut"
(select)="onSelect($event)"
(activate)="onActivate($event)"
(deactivate)="onDeactivate($event)"
>

</ngx-charts-pie-chart>
</div>


home.component.ts:

export class HomeComponent implements OnInit {
arr = [
{"name": "Male", "value": 101},
{"name": "Female", "value": 99}
]
view: any[] = [200, 400];

// options
gradient: boolean = true;
showLegend: boolean = true;
showLabels: boolean = true;
isDoughnut: boolean = true;
legendPosition: string = 'below';

colorScheme = {
domain: ['#5AA454', '#A10A28']
};

constructor(

) { }

ngOnInit(): void {}

onSelect(data:any): void {
console.log('Item clicked', JSON.parse(JSON.stringify(data)));
}

onActivate(data:any): void {
console.log('Activate', JSON.parse(JSON.stringify(data)));
}

onDeactivate(data:any): void {
console.log('Deactivate', JSON.parse(JSON.stringify(data)));
}
}


When I inspect the page, I can see the the chart element like below But I don't see anything on the browser. Am I missing something?

Continue reading...