All docs
V21.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

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;