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

jQuery
JavaScript
$(function() {
    $("#pieChartContainer").dxPieChart({
        onLegendClick: function (e) {
            var points = e.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();
            });
            */
        }
    });
});
Angular
HTML
TypeScript
<dx-pie-chart
    (onLegendClick)="onLegendClick($event)">
</dx-pie-chart>
import { DxPieChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    onLegendClick (e) {
        let points = e.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();
        });
        */
    };
}
@NgModule({
    imports: [
        // ...
        DxPieChartModule
    ],
    // ...
})
Vue
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>
React
App.js
import React from 'react';
import PieChart from 'devextreme-react/pie-chart';

const 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();
    });
    */
};

const App = () => {
    return (
        <PieChart
            onLegendClick={onLegendClick}>
        </PieChart>
    );
};

export default App;