score:0

Accepted answer

This issue was happening on Firefox but not on Chrome,

In any case i am displaying the chart only when the data is ready

<p-chart *ngIf="data" type="line" [data]="data" [options]="options"></p-chart>

Note: p-chart is a component from Prime NG that wraps Chart.js

score:0

The references to these 3 arrays

allTitles = [];
allSets = [];
allColors = [];

which are used in the chart are not update when getExercisesByPlan happens and the ANgular ChangeDetector does not know grasp that it need to detect changes and possibly update the markup.You change the elements of arrays, but the properties still have the same references inside.

Don't worry much if it is hard to understand - back then, c++ references and pointers were the main reasons why students decided to change their's career path and gave up software development :D you will get it from the solutions below.

Possible solution is to create a new array:

this.allTitles = [...this.neighbourCounter, plan.title];
this.allSets = [...this.neighbourCounter, this.neighbourSetsCounter];
this.allColors = [...this.neighbourCounter, plan.color];

You also can trigger change detection manually: Triggering change detection manually in Angular

score:0

After you've finished updating the data in the arrays, call this.chart.update();

https://www.chartjs.org/docs/latest/developers/updates.html

score:0

I found the same issue.

I solved it like this:

myChart.update();

myChart.updateDataset();

So, basically, update() method is not triggering updateDataset() and you have to do it manually.

Francesc Manresa

score:1 

//Fix by setting the time function

setTimeout(() => {
  //charts data  here
 }, 1000);


Related Query

More Query from same tag