Angular PieChart - Selection

API

The selection capability is not provided out of the box, but it can be implemented using the pointClick event. The following code gives an example of a scenario when clicking on a point selects it, and clicking on it again clears the selection. Call a point's isSelected() method to check whether it is selected.

HTML
TypeScript
  • <dx-pie-chart
  • (onPointClick)="onPointClick($event)">
  • </dx-pie-chart>
  • import { DxPieChartModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • onPointClick (e) {
  • let point = e.target;
  • if (point.isSelected()) {
  • point.clearSelection();
  • } else {
  • point.select();
  • }
  • };
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxPieChartModule
  • ],
  • // ...
  • })

In the previous code example, a specific point's selection was cleared. Call a series' clearSelection() method if you need to clear all the selected points in that series.

HTML
TypeScript
  • <dx-pie-chart
  • (onPointClick)="onPointClick($event)">
  • </dx-pie-chart>
  • import { DxPieChartModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • onPointClick (e) {
  • let series = e.target.series;
  • if (series.isSelected()) {
  • series.clearSelection();
  • } else {
  • series.select();
  • }
  • };
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxPieChartModule
  • ],
  • // ...
  • })

In a multi-series PieChart, you can clear the entire selection at once by calling the PieChart instance's clearSelection() method.

TypeScript
  • import { ..., ViewChild } from "@angular/core";
  • import { DxPieChartModule, DxPieChartComponent } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • @ViewChild(DxPieChartComponent, { static: false }) pieChart: DxPieChartComponent;
  • // Prior to Angular 8
  • // @ViewChild(DxPieChartComponent) pieChart: DxPieChartComponent;
  • clearSelection() {
  • this.pieChart.instance.clearSelection();
  • }
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxPieChartModule
  • ],
  • // ...
  • })
See Also

User Interaction

When a user selects a series point, its style changes to the one specified by the series.selectionStyle object.

HTML
TypeScript
  • <dx-pie-chart>
  • <dxi-series>
  • <dxo-selection-style>
  • <!-- ...-->
  • </dxo-selection-style>
  • </dxi-series>
  • </dx-pie-chart>
  • import { DxPieChartModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxPieChartModule
  • ],
  • // ...
  • })

You can disable the selection capability by settings the series.selectionMode property to "none".

HTML
TypeScript
  • <dx-pie-chart>
  • <dxi-series
  • selectionMode="none">
  • </dxi-series>
  • </dx-pie-chart>
  • import { DxPieChartModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxPieChartModule
  • ],
  • // ...
  • })

Only a single point can be in the selected state at a time by default. If you need to allow multiple points to be in this state, assign "multiple" to the pointSelectionMode property.

HTML
TypeScript
  • <dx-pie-chart
  • pointSelectionMode="multiple"> <!-- or 'single' -->
  • </dx-pie-chart>
  • import { DxPieChartModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxPieChartModule
  • ],
  • // ...
  • })

View Demo

Events

When a user selects a series point, the PieChart fires the pointSelectionChanged event that you can handle with a function. Assign this function to the onPointSelectionChanged property when you configure the UI component if it is going to remain unchanged during the UI component's lifetime. Call the point's isSelected() method to check whether it was selected or the selection was cleared.

HTML
TypeScript
  • <dx-pie-chart
  • (onPointSelectionChanged)="onPointSelectionChanged($event)">
  • </dx-pie-chart>
  • import { DxPieChartModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • onPointSelectionChanged (e) {
  • let point = e.target;
  • if (point.isSelected()) {
  • // Commands to execute when the point is selected
  • } else {
  • // Commands to execute when the selection is cleared
  • }
  • };
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxPieChartModule
  • ],
  • // ...
  • })
See Also