Chart.js Chart in Angular does not load until resizing browser window

Question

I'm working currently on a hobby-project, where I load some data from a MongoDB Database, GET the data from node.js backend into my frontend, there I manipulate my data and finally I want to show the data in my Angular frontend in a Chart.js chart.

There is the problem: I am getting the data without any problems and if I load the Chart with some mock-data everything works perfectly, but when I try to load the real data in my Chart it does not show until I resize the window or for example press f12 to inspect my website.

Thanks in advance!

Here a simplified code snipped:

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

// OnInit:

this.chart = new Chart('myChart', {
  type: 'doughnut',
  options: {
    responsive: true,
  },
  data: {
    labels: this.allTitles,
    datasets: [
      {
        label: 'My First dataset',
        data: this.allSets,
        backgroundColor: this.allColors,
        borderColor: '#000000'
      }
    ]
  }
});

// A Function to get the Data from my Service:

this.parseService.getPlans().subscribe((plans: any) => {
    plans.forEach(plan => {
      this.parseService.getExercisesByPlan(plan._id).subscribe((exercises: any) => {
        this.neighbourSetsCounter = 0;
        exercises.forEach(exercise => {
          this.neighbourSetsCounter += exercise.sets;
        });
        this.allTitles[this.neighbourCounter] = plan.title;
        this.allSets[this.neighbourCounter] = this.neighbourSetsCounter;
        this.allColors[this.neighbourCounter] = plan.color;

        this.neighbourCounter++;
      });
    });
  });

I'm not familiar with Chart.js or Angular, but are you trying to display the data before the data is retrieved? That might be your problem. Your component might be rendering before the GET request is done. — Nick Kinlen, May 02 '20 at 20:54

score 1 · Answer 1 · answered May 22 '21 at 17:24

1

//Fix by setting the time function

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

answered May 22 '21 at 17:24

Jeff Nyak

493
1
5
6

Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes. – Tyler2P May 22 '21 at 20:06

score 0 · Answer 2 · answered May 02 '20 at 19:26

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 · Accepted Answer · answered Jul 29 '20 at 08:50

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 · Answer 4 · edited Dec 01 '20 at 13:14

0

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

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

edited Dec 01 '20 at 13:14

Salma Elshahawy

1,112
2
11
21

answered Nov 30 '20 at 23:03

chris

1

score 0 · Answer 5 · edited Jan 05 '21 at 23:32

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

edited Jan 05 '21 at 23:32

Dhrumil shah

611
4
23

answered Jan 05 '21 at 16:03

user14945905

1

Chart.js Chart in Angular does not load until resizing browser window

5 Answers5