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.
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()); */ }
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.