Angular Sankey - Update Data

DevExtreme DataSource

NOTE
This technique requires the key specified in the store.

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

App.js
  • import { useRef } from 'react';
  • import Sankey from 'devextreme-react/sankey';
  •  
  • export default function App() {
  • const sankey = useRef(null);
  • const getDataSource = () => {
  • return sankey.current.instance().getDataSource();
  • }
  •  
  • return (
  • <Sankey ref={sankey}>
  • {/* ... */}
  • </Sankey>
  • );
  • }

Then, access the underlying store with the store() method, and call the store's push(changes) method to modify data. The Sankey will be updated automatically.

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

JavaScript Array

Bind the dataSource property to an array using one-way binding. Now, whenever an item is added or removed from the array, the Sankey is updated accordingly.