[Chartjs]-How to init elements after data is loaded?

by

1👍

✅

In your component.ts declare a flag 

private isDataAvailable:boolean=false;

And in the template in your subscribe method make this flag true when the data arrives

this.dashboardService.filesPerWeek(this.currentAccount.login).subscribe(data => {
    data.forEach(el => {
      this.barChartLabels.push(new Date(el.week).toDateString());
      this.barChartData[0].data.push(el.files);
      this.isDataAvailable=true;

    })

and in your template use ngIf

    <div *ngIf="isDataAvailable">
    <canvas
    baseChart class="chart"
    [datasets]="barChartData"
    [labels]="barChartLabels"
    [options]="barChartOptions"
    [legend]="barChartLegend"
    [chartType]="barChartType"
    [colors]="barChartColors"
    (chartHover)="chartHovered($event)"
    (chartClick)="chartClicked($event)"></canvas>

   </div>

This should probably work.You can also use async pipe for the same

Leave a comment