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

jQuery
JavaScript
$(function() {
    $("#pieChartContainer").dxPieChart({
        // ...
        onPointClick: function (e) {
            var point = e.target;
            if (point.isSelected()) {
                point.clearSelection();
            } else {
                point.select();
            }
        }
    });
});
Angular
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
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxPieChart ...
        @point-click="onPointClick">
    </DxPieChart>
</template>

<script>
import DxPieChart from 'devextreme-vue/pie-chart';

export default {
    components: {
        DxPieChart
    },

    methods: {
        onPointClick({ target: point }) {
            if (point.isSelected()) {
                point.clearSelection();
            } else {
                point.select();
            }
        }
    }
}
</script>
React
App.js
import React from 'react';
import PieChart from 'devextreme-react/pie-chart';

const onPointClick = ({ target: point }) => {
    if (point.isSelected()) {
        point.clearSelection();
    } else {
        point.select();
    }
};

const App = () => {
    return (
        <PieChart ...
            onPointClick={onPointClick}>
        </PieChart>
    );
};

export default App;

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
JavaScript
$(function() {
    $("#pieChartContainer").dxPieChart({
        // ...
        onPointClick: function (e) {
            var series = e.target.series;
            if (series.isSelected()) {
                series.clearSelection();
            } else {
                series.select();
            }
        }
    });
});
Angular
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
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxPieChart ...
        @point-click="onPointClick">
    </DxPieChart>
</template>

<script>
import DxPieChart from 'devextreme-vue/pie-chart';

export default {
    components: {
        DxPieChart
    },

    methods: {
        onPointClick({ target: point }) {
            const series = point.series;
            if (series.isSelected()) {
                series.clearSelection();
            } else {
                series.select();
            }
        }
    }
}
</script>
React
App.js
import React from 'react';
import PieChart from 'devextreme-react/pie-chart';

const onPointClick = ({ target: point }) => {
    const series = point.series;
    if (series.isSelected()) {
        series.clearSelection();
    } else {
        series.select();
    }
};

const App = () => {
    return (
        <PieChart ...
            onPointClick={onPointClick}>
        </PieChart>
    );
};

export default App;

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

jQuery
JavaScript
$("#pieChartContainer").dxPieChart("clearSelection");
Angular
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
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxPieChart ref="pieChart">
    </DxPieChart>
</template>

<script>
import DxPieChart from 'devextreme-vue/pie-chart';

export default {
    components: {
        DxPieChart
    },

    methods: {
        clearSelection () {
            return this.$refs.pieChart.instance.clearSelection();
        }
    }
}
</script>
React
App.js
import React from 'react';
import PieChart from 'devextreme-react/pie-chart';

const pieChartRef = React.createRef();
const clearSelection = () => {
    return pieChartRef.current.instance.clearSelection();
};

const App = () => {
    return (
        <PieChart ref={pieChartRef}>
        </PieChart>
    );
}

export default App;
See Also
jQuery
Angular
Vue
React
jQuery
Angular
Vue
React

User Interaction

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

jQuery
JavaScript
$(function() {
    $("#pieChartContainer").dxPieChart({
        // ...
        series: {
            selectionStyle: {
                // ...
            }
        }
    });
});
Angular
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
    ],
    // ...
})
Vue
App.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
App.js
import React from 'react';
import PieChart, {
    Series,
    SelectionStyle
} from 'devextreme-react/pie-chart';

const App = () => {
    return (
        <PieChart ... >
            <Series>
                <SelectionStyle>
                    {/* ... */}
                </SelectionStyle>
            </Series>
        </PieChart>
    );
};

export default App;

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

jQuery
JavaScript
$(function() {
    $("#pieChartContainer").dxPieChart({
        series: {
            selectionMode: "none"
        }
    });
});
Angular
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
    ],
    // ...
})
Vue
App.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
App.js
import React from 'react';
import PieChart, {
    Series
} from 'devextreme-react/pie-chart';

const App = () => {
    return (
        <PieChart ... >
            <Series selectionMode="none" />
        </PieChart>
    );
};

export default App;

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
JavaScript
$(function() {
    $("#pieChartContainer").dxPieChart({
        // ...
        pointSelectionMode: 'multiple' // or 'single'
    });
});
Angular
HTML
TypeScript
<dx-pie-chart 
    pointSelectionMode="multiple"> <!-- or 'single' -->
</dx-pie-chart>
import { DxPieChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxPieChartModule
    ],
    // ...
})
Vue
App.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
App.js
import React from 'react';
import PieChart from 'devextreme-react/pie-chart';

const App = () => {
    return (
        <PieChart
            pointSelectionMode="multiple"> {/* or 'single' */}
        </PieChart>
    );
};

export default App;

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.

jQuery
JavaScript
$(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
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
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxPieChart
        @point-selection-changed="onPointSelectionChanged">
    </DxPieChart>
</template>

<script>
import DxPieChart from 'devextreme-vue/pie-chart';

export default {
    components: {
        DxPieChart
    },

    methods: {
        onPointSelectionChanged({ target: point }) {
            if (point.isSelected()) {
                // Commands to execute when the point is selected
            } else {
                // Commands to execute when the selection is cleared
            }
        }
    }
}
</script>
React
App.js
import React from 'react';
import PieChart from 'devextreme-react/pie-chart';

const onPointSelectionChanged = ({ target: point }) => {
    if (point.isSelected()) {
        // Commands to execute when the point is selected
    } else {
        // Commands to execute when the selection is cleared
    }
};

const App = () => {
    return (
        <PieChart
            onPointSelectionChanged={onPointSelectionChanged}>
        </PieChart>
    );
};

export default App;

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.

JavaScript
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
jQuery
Angular
Vue
React