[Chartjs]-Chart js with angular2 loading dynamic data only after zoomin

by

3👍

✅

I have come across this problem with Angular 2 and many charting packages and generally what I have had to do is along the following lines:

(1) Bind to a collection that has not been instantiated 

HTML: [data]="doughnutChartData" ; TS: doughnutChartData:number[]

(2) add an ngif to your chart markup e.g. 

<canvas baseChart  *ngIf="doughnutChartData && doughnutChartData.length > 0" ....>

(3) On ng init run your getDoughnutChartData function. use a local collection in you getDoughnutChartData function to collect the data. when the data has returned/completed do doughnutChartData = localDoughnutChartData

Using the ngif means no attempt is made to render the chart until you have the data

You can add a DIV above it which contains a spinner and has the opposite ngif so a spinner is shown while the chart data is made e.g. *ngIf="!doughnutChartData || doughnutChartData.length < 1"

0👍

This works like a charm

  <canvas *ngIf="doughnutChartData && doughnutChartData.length > 0" baseChart
  [data]="doughnutChartData"
  [labels]="doughnutChartLabels"
  [chartType]="doughnutChartType"
  [options]="barChartOptions"></canvas>

Leave a comment