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.
jQuery
$(function() { $("#pieChartContainer").dxPieChart({ // ... onPointClick: function (e) { var point = e.target; if (point.isSelected()) { point.clearSelection(); } else { point.select(); } } }); });
Angular
<dx-pie-chart (onPointClick)="onPointClick($event)"> </dx-pie-chart>
import { DxPieChartModule } from "devextreme-angular"; // ... export class AppComponent { onPointClick (e) { const point = e.target; if (point.isSelected()) { point.clearSelection(); } else { point.select(); } }; } @NgModule({ imports: [ // ... DxPieChartModule ], // ... })
Vue
<template> <DxPieChart ... @point-click="onPointClick"> </DxPieChart> </template> <script> import DxPieChart from 'devextreme-vue/pie-chart'; export default { components: { DxPieChart }, methods: { onPointClick(e) { const point = e.target; if(point.isSelected()) { point.clearSelection(); } else { point.select(); } } } } </script>
React
import React from 'react'; import PieChart from 'devextreme-react/pie-chart'; class App extends React.Component { render() { return ( <PieChart ... onPointClick={onPointClick}> </PieChart> ); } } function onPointClick(e) { const point = e.target; if(point.isSelected()) { point.clearSelection(); } else { point.select(); } }
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.
jQuery
$(function() { $("#pieChartContainer").dxPieChart({ // ... onPointClick: function (e) { var series = e.target.series; if (series.isSelected()) { series.clearSelection(); } else { series.select(); } } }); });
Angular
<dx-pie-chart (onPointClick)="onPointClick($event)"> </dx-pie-chart>
import { DxPieChartModule } from "devextreme-angular"; // ... export class AppComponent { onPointClick (e) { const series = e.target.series; if (series.isSelected()) { series.clearSelection(); } else { series.select(); } }; } @NgModule({ imports: [ // ... DxPieChartModule ], // ... })
Vue
<template> <DxPieChart ... @point-click="onPointClick"> </DxPieChart> </template> <script> import DxPieChart from 'devextreme-vue/pie-chart'; export default { components: { DxPieChart }, methods: { onPointClick(e) { const series = e.target.series; if(series.isSelected()) { series.clearSelection(); } else { series.select(); } } } } </script>
React
import React from 'react'; import PieChart from 'devextreme-react/pie-chart'; class App extends React.Component { render() { return ( <PieChart ... onPointClick={onPointClick}> </PieChart> ); } } function onPointClick(e) { const series = e.target.series; if(series.isSelected()) { series.clearSelection(); } else { series.select(); } }
In a multi-series PieChart, you can clear the entire selection at once by calling the PieChart instance's clearSelection() method.
jQuery
$("#pieChartContainer").dxPieChart("clearSelection");
Angular
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 ], // ... })
Vue
<template> <DxPieChart ... ref="pieChart"> </DxPieChart> </template> <script> import DxPieChart from 'devextreme-vue/pie-chart'; export default { components: { DxPieChart }, methods: { clearSelection() { this.$refs.pieChart.instance.clearSelection(); } } } </script>
React
import React from 'react'; import PieChart from 'devextreme-react/pie-chart'; class App extends React.Component { constructor(props) { super(props); this.pieChartRef = React.createRef(); this.clearSelection = () => { this.pieChart.clearSelection(); }; } render() { return ( <PieChart ... ref={this.pieChartRef}> </PieChart> ); } get pieChart() { return this.pieChartRef.current.instance; } }
See Also
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- Access a Point Using the API
User Interaction
When a user selects a series point, its style changes to the one specified by the series.selectionStyle object.
jQuery
$(function() { $("#pieChartContainer").dxPieChart({ // ... series: { selectionStyle: { // ... } } }); });
Angular
<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 ], // ... })
Vue
<template> <DxPieChart ... > <DxSeries> <DxSelectionStyle> <!-- ... --> </DxSelectionStyle> </DxSeries> </DxPieChart> </template> <script> import DxPieChart, { DxSeries, DxSelectionStyle } from 'devextreme-vue/pie-chart'; export default { components: { DxPieChart, DxSeries, DxSelectionStyle } } </script>
React
import React from 'react'; import PieChart, { Series, SelectionStyle } from 'devextreme-react/pie-chart'; class App extends React.Component { render() { return ( <PieChart ... > <Series> <SelectionStyle> {/* ... */} </SelectionStyle> </Series> </PieChart> ); } }
You can disable the selection capability by settings the series.selectionMode property to "none".
jQuery
$(function() { $("#pieChartContainer").dxPieChart({ series: { selectionMode: "none" } }); });
Angular
<dx-pie-chart> <dxi-series selectionMode="none"> </dxi-series> </dx-pie-chart>
import { DxPieChartModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxPieChartModule ], // ... })
Vue
<template> <DxPieChart ... > <DxSeries ... selection-mode="none" /> </DxPieChart> </template> <script> import DxPieChart, { DxSeries } from 'devextreme-vue/pie-chart'; export default { components: { DxPieChart, DxSeries } } </script>
React
import React from 'react'; import PieChart, { Series } from 'devextreme-react/pie-chart'; class App extends React.Component { render() { return ( <PieChart ... > <Series ... selectionMode="none" /> </PieChart> ); } }
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.
jQuery
$(function() { $("#pieChartContainer").dxPieChart({ // ... pointSelectionMode: 'multiple' // or 'single' }); });
Angular
<dx-pie-chart pointSelectionMode="multiple"> <!-- or 'single' --> </dx-pie-chart>
import { DxPieChartModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxPieChartModule ], // ... })
Vue
<template> <DxPieChart ... point-selection-mode="multiple"> <!-- or "single" --> </DxPieChart> </template> <script> import DxPieChart from 'devextreme-vue/pie-chart'; export default { components: { DxPieChart } } </script>
React
import React from 'react'; import PieChart from 'devextreme-react/pie-chart'; class App extends React.Component { render() { return ( <PieChart ... pointSelectionMode="multiple"> {/* or "single" */} </PieChart> ); } }
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.
jQuery
$(function() { $("#pieChartContainer").dxPieChart({ // ... onPointSelectionChanged: function (e) { var point = e.target; if (point.isSelected()) { // Commands to execute when the point is selected } else { // Commands to execute when the selection is cleared } } }); });
Angular
<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 ], // ... })
Vue
<template> <DxPieChart ... @point-selection-changed="onPointSelectionChanged"> </DxPieChart> </template> <script> import DxPieChart from 'devextreme-vue/pie-chart'; export default { components: { DxPieChart }, methods: { 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 } } } } </script>
React
import React from 'react'; import PieChart from 'devextreme-react/pie-chart'; class App extends React.Component { render() { return ( <PieChart ... onPointSelectionChanged={onPointSelectionChanged}> </PieChart> ); } } function 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 } }
Subscribe to the pointSelectionChanged event using the on(eventName, eventHandler) method if you are going to change the event handler at runtime or if you need to attach several handlers to the event. This approach is more typical of jQuery.
var pointSelectionChangedHandler1 = function (e) { var point = e.target; // First handler of the "pointSelectionChanged" event }; var pointSelectionChangedHandler2 = function (e) { var point = e.target; // Second handler of the "pointSelectionChanged" event }; $("#pieChartContainer").dxPieChart("instance") .on("pointSelectionChanged", pointSelectionChangedHandler1) .on("pointSelectionChanged", pointSelectionChangedHandler2);
See Also
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
If you have technical questions, please create a support ticket in the DevExpress Support Center.