[Chartjs]-Angular 6: chartjs value not updating with dynamic value update

by

1👍

✅

Extended @Mehmet answer and this fixed my issue.

this.lineBigDashboardChartLabels.length = 0;
this.lineBigDashboardChartLabels.push(...label_data);

1👍

Please try adding ChartType like this ; [chartType]="'line'"
And you should not change labels original array reference.
Try this one for creating dynamic labels;

this.lineBigDashboardChartLabels.length = 0;
this.lineBigDashboardChartLabels = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];

0👍

What happens if you move this.initializeGraph() to just below the console.log statement you have inside of ngOnInit

this.graphDataService.get_data(this.contact_id).subscribe(
  res => {
    const data = [];
    res.forEach(e => {
      data.push(e.total);
    });
    this.graph_data_year = data;
    console.log(this.graph_data_year);
    this.initializeGraph();
  }
);

0👍

Canvas is loading the chart first before the data is initialized.
Add an *ngIf (data has a value) to the parent div.

This ensures the data is updated before chart is loaded.

Leave a comment