Angular PieChart - Update Data

To get the DataSource instance, call the PieChart's getDataSource() method:

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.

getDataSource().store().push([
    { type: "update", key: "Oranges", data: { count: 10 } },
    { type: "remove", key: "Apples" }
]);

See Also

• Data Layer - Overview
• Data Layer - DataSource Examples

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.

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