Chartjs-The dataset in ng2 charts for bar graph is not setting properly

by

0👍

✅

The problem is related to Angular change detection that runs constantly and has to evaluate the datasets property of the canvas again and again. This way the chart is constantly updated and Chart.js can no longer draw it correctly.

Avoid using the function getBarChartData() directly in the HTML but create a barChartData property in the component class instead.

<canvas baseChart 
  [datasets]="barChartData"
  ...

This barChartData property could be furnished in the ngOnInit method as follows:

barChartData: ChartDataSets[] = [];
  
ngOnInit() {
  this.barChartData = this.getBarChartData();
}

Please take a look at the following StackBlitz and see how it works.

Leave a comment