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

Question

I am trying to use ng2-charts in my angular 4 project

HTML:

 <canvas baseChart
            [datasets]="customerBarChartData"
            [colors]="barChartColors"
            [options]="customerBarChartOptions"
            [legend]="barChartLegend"
            [chartType]="barChartType"
            ></canvas>

TS:

  geochatArry: Array<any> = [];
  ....
  public customerBarChartData:any[] = this.geochatArry;
  .... 
  /// Service
   this.geochatArry=data.json();
   console.log(this.geochatArry);

but i am getting ng-charts configuration error,data or datasets field are required to render char bar. Kindly tell me where is my mistake.

Thanks.

Answer 1

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>

Answer 2

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.