Chart.js is not rendered until zoom in in angular 8

Question

i have an angular 8 application, and i'm using primeng-lts 8.2.5 components, i'm trying to use chart.js version 2.9.3 in my application, but the pie chart doesn't show up until i zoom in, also the labels.

in my pie chart i'm displaying counts by status, as in the code below, i'm loading status[] from an http call, then for each status, i'm calling an http method that return the counts :

HTML :

TS :

  numberByStatus : any;
  labelsByStatus: String[] = [];
  countsByStatus: number[] = [];


this.service.getStatus()
  .subscribe((res: status[]) => {


    res.forEach(element => {         
    this.service.getCountByStatus(element.id)
        .subscribe((count: number) => {
          this.countsByStatus.push(count);
          this.labelsByStatus.push(element.designation)
        }, (err) => {
          alert('Faild to load counts');
        });
    });


  }, (err) => {
    alert('Faild to load data');
  });


this.numberByStatus = {
  labels: this.labelsByStatus,
  datasets: [
    {
      data: this.countsByStatus,
      backgroundColor: [
        "#FF6384",
        "#36A2EB",
        "#FFCE56"
      ],
      hoverBackgroundColor: [
        "#FF6384",
        "#36A2EB",
        "#FFCE56"
      ]
    }]
};

user_11769164 · Answer

look the problem is that your numberByStatus object reference doesn't change when you are trying to push the items into labelsByStatus or countsByStatus arrays

try like this.

**at first import all of these items for both solutions

import { forkJoin } from 'rxjs/internal/observable/forkJoin';
import { map } from 'rxjs/operators';

and

numberByStatus : any;
labelsByStatus: String[] = [];
countsByStatus: number[] = [];


this.service.getStatus()
  .subscribe((res: status[]) => {

    const requestsList = [];   // define the request list property and store all of the requests here
    res.forEach(element => {  
    // push the request into the array
    requestsList.push(
       this.service.getCountByStatus(element.id).pipe(
          map(count => {   
              // push the count into countsByStatus
              this.countsByStatus.push(count);
              // push the element.designation into labelsByStatus
              this.labelsByStatus.push(element.designation);
              // return the count and the corresponding element
              // I think this can be helpfull. if you will need to know the count for the each element
              return { element: element, count: count }
          }))
       );

    });  
       // send all of the requests
       forkJoin(requestsList).subscribe(
             (response: {element: status, count: number}[]) => {
               // and now this line will work only once
                this.numberByStatus = { ...this.numberByStatus };
             },
             (err) => {
                alert('Faild to load data');
             }
        );

  }, (err) => {
    alert('Faild to load data');
  });

 this.numberByStatus = {
    labels: this.labelsByStatus,
    datasets: [
       {
           data: this.countsByStatus,
           backgroundColor: [
              "#FF6384",
              "#36A2EB",
              "#FFCE56"
           ],
           hoverBackgroundColor: [
              "#FF6384",
              "#36A2EB",
              "#FFCE56"
           ]
       }
    ]

 };

or

numberByStatus : any;
labelsByStatus: String[] = [];
countsByStatus: number[] = [];


this.service.getStatus()
  .subscribe((res: status[]) => {

    const requestsList = [];   // define the request list property and store all of the requests here
    res.forEach(element => {  
    // push the request into the array
    requestsList.push(
       this.service.getCountByStatus(element.id).pipe(
          map(count => {   
               // push the count into countsByStatus
              this.countsByStatus.push(count);
              // push the element.designation into labelsByStatus
              this.labelsByStatus.push(element.designation);
              // return the count and the corresponding element
              // I think this can be helpfull. if you will need to know the count for the each element
              return { element: element, count: count }
          }))
       );
    });  
    
       forkJoin(requestsList).subscribe(
             (response: {element: status, count: number}[]) => {
              // and now this line will work only once
               this.numberByStatus = {
                   labels: this.labelsByStatus,
                   datasets: [
                      {
                         data: this.countsByStatus,
                         backgroundColor: [
                             "#FF6384",
                             "#36A2EB",
                             "#FFCE56"
                         ],
                         hoverBackgroundColor: [
                             "#FF6384",
                             "#36A2EB",
                             "#FFCE56"
                         ]
                     }
                 ]

             };
    
             },
             (err) => {
                alert('Faild to load data');
             }
          );

  }, (err) => {
    alert('Faild to load data');
  });

user_2358409 · Answer

The problem is due to the asynchronous nature of Angular. The chart is created before its labels and the data have been defined inside this.numberByStatus.

There are basically two solutions to solve this issue.

Make sure the chart is created only once this.numberByStatus is fully furnished.
Update the chart programmatically after this.numberByStatus is completely defined.

Without seeing more of your code, its hard to provide the best solution however. I also don't know primeng-lts.

You could try to only conditionally include the chart in your HTML template using *ngIf. It should evaluate to true only once this.numberByStatus is ready to be used (solution 1).
In case you can obtain a reference to the chart object, invoke its update() method after you redefined this.numberByStatus (solution 2).

Chart.js is not rendered until zoom in in angular 8

2 Answers