[Chartjs]-Angular 4:PrimeNg DoughnutChart dynamic data issue.

by

1👍

✅

The problem is probably that you set your invoiceData before your service call is finished. Since, you will have to wait for a while to populate invoiceData, you may want to delay primeng chart initialization too. You can achieve this with *ngIf.

So, you can do something like this

Your.component.ts

 @Component({
     selector: 'your-comp',
     template: `
         <p-chart *ngIf="invoiceData" type="doughnut" [data]="invoiceData">
         </p-chart>
     `
 })
 export class YourComponent implements OnInit {
     invoiceData;

     constructor(private someService: SomeService) {}

     ngOnInit() {
         this.getData();
     }

     getData() {
         this.someService
             .getData()
             .subscribe(resp => {
                 // here you can set your data the way you want.
                 this.invoiceData = resp;
             })
     }

 }

Leave a comment