Angular PieChart - Update Data

DevExtreme DataSource

NOTE
This technique requires the key specified in the store.

To get the DataSource instance, call the PieChart's getDataSource() method:

app.component.ts
app.module.ts
  • import { Component, ViewChild } from '@angular/core';
  • import { DxPieChartComponent } from 'devextreme-angular';
  •  
  • @Component({
  • selector: 'app-root',
  • templateUrl: './app.component.html',
  • styleUrls: ['./app.component.css']
  • })
  • export class AppComponent {
  • @ViewChild(DxPieChartComponent, { static: false }) pieChart: DxPieChartComponent;
  • // Prior to Angular 8
  • // @ViewChild(DxPieChartComponent) pieChart: DxPieChartComponent;
  • getDataSource() {
  • return this.pieChart.instance.getDataSource();
  • }
  • }
  • import { BrowserModule } from '@angular/platform-browser';
  • import { NgModule } from '@angular/core';
  • import { AppComponent } from './app.component';
  •  
  • import { DxPieChartModule } from 'devextreme-angular';
  •  
  • @NgModule({
  • declarations: [
  • AppComponent
  • ],
  • imports: [
  • BrowserModule,
  • DxPieChartModule
  • ],
  • providers: [ ],
  • bootstrap: [AppComponent]
  • })
  • export class AppModule { }

Then, access the underlying store with the store() method, and call the store's push(changes) method to modify data. The PieChart will be updated automatically.

JavaScript
  • getDataSource().store().push([
  • { type: "update", key: "Oranges", data: { count: 10 } },
  • { type: "remove", key: "Apples" }
  • ]);
See Also

JavaScript Array

Angular

Enclose the dataSource property in square brackets to bind it to an array using one-way binding. Now, whenever an item is added or removed from the array, the PieChart will be updated accordingly.

HTML
TypeScript
  • <dx-pie-chart [dataSource]="fruits"></dx-pie-chart>
  • import { DxPieChartModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • fruits = [
  • { fruit: 'Apples', count: 10 },
  • { fruit: 'Oranges', count: 12 },
  • { fruit: 'Lemons', count: 15 }
  • ];
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxPieChartModule
  • ],
  • // ...
  • })