JavaScript/jQuery 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

jQuery

Make changes to the array using standard methods. Then, reassign the updated array to the PieChart using the option(optionName, optionValue) method.

JavaScript
var fruits = [
    { fruit: 'Apples', count: 10 },
    { fruit: 'Oranges', count: 12 },
    { fruit: 'Lemons', count: 15 }
];

fruits.push({ fruit: 'Pineapples', count: 3 });
// Reassigns the "fruits" array to the PieChart 
$("#pieChartContainer").dxPieChart("option", "dataSource", fruits);
See Also