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.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>

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" }
]);

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

Was this topic helpful?

Thank you!

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!

Angular PieChart - Update Data

DevExtreme DataSource

See Also

JavaScript Array

Angular