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