chart not refresh after change value

1 Answer 1508 Views
Charts
Masip
Top achievements
Rank 1
Iron
Masip asked on 26 Jan 2022, 01:32 PM | edited on 26 Jan 2022, 05:44 PM

Hi

 

I have an Line Chart and i change value in data but chart is not refreshed ?

How could i refresh it ?

I Could click and on "plotArea" method i show new value in console , but chart don't move !!

 

Regards

 

i have tried without succes

[code]

<kendo-chart [style.height.px]="150"
                 [categoryAxis]="{ categories: categories2 }"
                 (plotAreaClick)="onPlotAreaClick2($event)"
                 [transitions]="false"
    >
        <kendo-chart-series>
            <kendo-chart-series-item type="line" name="second" [data]="this.getData2() | async" [color]="colorFn">
            </kendo-chart-series-item>
        </kendo-chart-series>
    </kendo-chart>



export class AppComponent implements OnInit{


  public data2 = [];
  public categories2: number[] = [2002, 2003, 2004, 2005, 2006, 2007, 2008];

    getData2():Observable<any[]>{
        return of(this.data2);
    }

    ngOnInit(): void {
        this.data2 = [10, 40, 19, 6, 70,20,120];
}


    public onPlotAreaClick2(e): void {

        let id=this.categories2.indexOf(e.category);
        let prop=(Math.round(e.value / 5) * 5);
        this.data2[id]=prop //Ok but not Chart Refresh WHY ??
}
}

[/code]

1 Answer, 1 is accepted

Sort by
0
Valentin
Telerik team
answered on 27 Jan 2022, 01:10 PM

Hi Masip,

Thank you for the provided code.

The Chart uses the OnPush change-detection strategy. Having said that the component doesn't detect changes to the array instance.

In order to trigger the Angular change detection mechanism, the collection needs to be bound to a new instance, as documented in the following article on how to update the Chart data:

https://www.telerik.com/kendo-angular-ui/components/charts/chart/data-binding/#toc-updating-data

The following example demonstrates the suggested approach:

https://stackblitz.com/edit/angular-jvemuf?file=app/app.component.ts

I hope the provided information helps.

Regards,
Valentin
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Charts
Asked by
Masip
Top achievements
Rank 1
Iron
Answers by
Valentin
Telerik team
Share this question
or