data or datasets field are required to render char bar in angular 4

Use *ngIf when the dynamic data comes in "customerBarChartData" array then it will work.

<div style="display: block" *ngIf="customerBarChartData">
   <canvas baseChart
   [datasets]="customerBarChartData"
   [colors]="barChartColors"
   [options]="customerBarChartOptions"
   [legend]="barChartLegend"
   [chartType]="barChartType">
</canvas>
</div>

One solution is to create the chart after you have received your data.

When you've built your chart, assign a variable like

chartReady = true;

In your HTML, wrap the chart with a

*ngIf="chartReady"

so you can hide it until you have build your chart.

Tags:

Charts

Angular