DevExtreme DataSource
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
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
- ],
- // ...
- })
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.