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) {
        const 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(e) {
            const points = e.points;
            // for a single-series PieChart
            points[0].isVisible() ? points[0].hide() : points[0].show();

            /* for a multi-series PieChart
            points.forEach(point => point.isVisible() ? point.hide() : point.show());
            */
        }
    }
}
</script>
React
App.js
import React from 'react';
import PieChart from 'devextreme-react/pie-chart';

class App extends React.Component {
    render() {
        return (
            <PieChart ...
                onLegendClick={onLegendClick}>
            </PieChart>
        );
    }
}

function onLegendClick(e) {
    const points = e.points;
    // for a single-series PieChart
    points[0].isVisible() ? points[0].hide() : points[0].show();

    /* for a multi-series PieChart
    points.forEach(point => point.isVisible() ? point.hide() : point.show());
    */
}