Vue 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" }
  • ]);
See Also

JavaScript Array