DevExtreme React - 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 ], // ... })
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.