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

JavaScript Array