0👍
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
1👍
//Fix by setting the time function
setTimeout(() => {
//charts data here
}, 1000);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 😀 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
0👍
After you’ve finished updating the data in the arrays, call this.chart.update();
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