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