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:

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
jQuery
Angular
Vue
React

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
    ],
    // ...
})