I am trying to use the doughnut chart in my ionic but it is giving me the error "Cannot read property 'nativeElement' of undefined"
<ion-card *ngFor="let plan of plans" class="active-plans-sec">
<ion-card-header>
<ion-card-title>{{plan.domain_name}}</ion-card-title>
</ion-card-header>
<ion-card-content>
<ion-grid>
<ion-row>
<ion-col col-4 class="description">
<div class="active-plans-list">
<img src="../assets/images/server.png" alt="server">
<h2>{{plan.domain_name}}</h2>
<p>plan.status</p>
<p class="view-more">View More</p>
</div>
</ion-col>
<ion-col col-4 class="info">
<canvas #doughnutCanvas></canvas>
</ion-col>
<ion-col col-4 class="info">
<canvas #daysremained></canvas>
</ion-col>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
Here is the sample of ts file from which I am trying to plot a graph:
export class DahsboardPage implements OnInit {
pie: any;
@ViewChild('doughnutCanvas', { static: true }) doughnutCanvas: ElementRef;
ionViewDidEnter() {
this.Storage();
}
Storage(){
this.doughnutChart = new Chart(this.doughnutCanvas.nativeElement, {
type: 'doughnut',
data: {
labels: ['Free Storage', 'Used Storage'],
datasets: [
{
label: 'Storage',
data: [500, 300],
backgroundColor: [
'rgb(38, 173, 26)',
'rgb(255, 15, 26)'
],
hoverBackgroundColor: ['rgb(38, 173, 26)', 'rgb(255, 15, 26)']
}
]
}
});
}
*PS: It was working before I use ngFor