[FIXED] Primeng line chart not updating automatically,only update on window refresh

Issue

 <p-chart *ngIf="renewData1" type="line"  [data]="renewData1" [options]="lineOptions"></p-chart>

onclick

 <button class="goBtn btnText" style="width: 100%;" pButton type="button" label="GO"
                (click)="Go()" icon="filter-icon"></button>

here data is visible only after resizing the window.

ts File

on intial this data will load on chart

 this.renewData1 = {

        labels: ['2017', '2018', '2019', '2020'],
        datasets: [
            {

                label: 'Average',
                data: [81, 83, 82, 86],
                fill: false,
                borderColor: '#40B870',
                tension: .4,
                backgroundColor: '#40B870',
                datalabels: {
                    align: 'end',
                    anchor: 'end',
                }
            }
        ]
    }

new data creating

after click button it will create a datamodal. allcode are working file because the chart is redraw only after window resize

    Go() {
        this.renewData1.datasets = []
              
               for(loop){
                   this.renewData1.datasets.push({
                               dynamic data
                    
                })
                       }

Solution

Your change detection is not triggered when you update the datasetvalues, You can try this,

    Go() {
           this.renewData1.datasets = []
                  
           for(loop){
             this.renewData1.datasets.push({dynamic data});
           }
           this.renewData1 = {...this.renewData1}; // Do this in the end
}

Answered By – Deepak Jha

Answer Checked By – Senaida (Easybugfix Volunteer)

Leave a Reply

(*) Required, Your email will not be published