Chartjs-PrimeNG pie chart randomly displays, and displays on change of resolution

by

0👍

I remember facing the similar issues. It’s related to the change detection. The screen resolution change triggers the change detection. As well as some event like mouse movement if you have some handlers for this events anywhere.

Considering I don’t see the code, I imagine there might be two solutions:

  • The data binding could be done without changing the reference to the variable with data. e.g. using push method to update the data source.
// this is not recognized by the change detection mechanism as update because the reference to this.data is not updated
this.resourceService.getResources().subscribe( data => { 
  var counts1 = {};
  this.chartHistory.forEach((x) => {
    counts1[x] = (counts1[x] || 0)+1; 
  });
  for (let i = 0; i < Object.keys(counts1).length; i++) {
    this.chartHistoryData.push(Object.keys(counts1)[i]);
    this.chartHistoryVal.push(Object.values(counts1)[i]);
  }
});

// this would be recognized
this.resourceService.getResources().subscribe( data => { 
  var counts1 = {};
  this.chartHistory.forEach((x) => {
    counts1[x] = (counts1[x] || 0)+1; 
  });
  Object.entries(counts1).forEach(([key, value]) => {
    this.chartHistoryData = [...this.chartHistoryData, key];
    this.chartHistoryVal = [...this.chartHistoryVal, value];
  });
});

Leave a comment