React PieChart - Show and Hide a Point

The PieChart provides an API for showing and hiding a series point at runtime. This API is commonly used to show or hide a series point when a user clicks the chart legend. You need to handle the legendClick event as shown below to implement this scenario. The isVisible(), hide() and show() are Point object methods.

App.vue
  • <template>
  • <DxPieChart
  • @legend-click="onLegendClick">
  • </DxPieChart>
  • </template>
  •  
  • <script>
  • import DxPieChart from 'devextreme-vue/pie-chart';
  •  
  • export default {
  • components: {
  • DxPieChart
  • },
  •  
  • methods: {
  • onLegendClick({ points }) {
  • // for a single-series PieChart
  • points[0].isVisible() ? points[0].hide() : points[0].show();
  •  
  • /* for a multi-series PieChart
  • points.forEach(function (point) {
  • point.isVisible() ? point.hide() : point.show();
  • });
  • */
  • }
  • }
  • }
  • </script>