DevExtreme DataSource
To get the DataSource instance, call the PieChart's getDataSource() method:
jQuery
index.js
function getDataSource() { return $("#pieChartContainer").dxPieChart("getDataSource"); }
Angular
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 { }
Vue
App.vue
<template> <DxPieChart :ref="pieChartRefKey"> <!-- ... --> </DxPieChart> </template> <script> import DxPieChart from 'devextreme-vue/pie-chart'; const pieChartRefKey = "my-pie-chart"; export default { components: { DxPieChart }, data() { return { pieChartRefKey } }, methods: { getDataSource: function() { return this.pieChart.getDataSource(); } }, computed: { pieChart: function() { return this.$refs[pieChartRefKey].instance; } } } </script>
React
App.js
import { useRef } from 'react'; import PieChart from 'devextreme-react/pie-chart'; export default function App() { const pieChart = useRef(null); const getDataSource = () => { return pieChart.current.instance.getDataSource(); } return ( <PieChart ref={pieChart}> {/* ... */} </PieChart> ); }
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
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.