Primeng line chart not updating automatically,only update on window refresh-CodePudding

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

onclick

 <button  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
                    
                })
                       }

CodePudding user response：

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
}

CodePudding user response：

As stated change detection is not getting triggered since you are updating inside the object, and it only tracks if the whole object (object reference) changes.

Go() { 
this.renewData1 =  {...this.renewData1, datasets: <*ASSING DYNAMIC DATA*> }
}

Here you can create and replace just the dataSets directly in the new object created.