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 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++;
      });
    });
  });

• javascript
• angular
• typescript
• chart.js

Share Improve this question Follow edited Sep 25, 2021 at 22:38 General Grievance 5,0433838 gold badges3737 silver badges5656 bronze badges asked May 2, 2020 at 19:17 Graf-JGraf-J 9111 silver badge55 bronze badges 1

• 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 ponent might be rendering before the GET request is done. – Nick Kinlen Commented May 2, 2020 at 20:54

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

//Fix by setting the time function

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

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 ponent from Prime NG that wraps Chart.js

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

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

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

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