Need permenant solution on "Cannot read property 'nativeElement' of undefined"

56 views Asked by At

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

0

There are 0 answers