Vue PieChart - commonSeriesSettings.selectionStyle

An object defining configuration properties for the series when it is selected.

Selector: DxSelectionStyle
Type:

Object

The PieChart UI component comes with API members that allow you to select the series in code. To set a custom 'selected' style for the series, use the selectionStyle object within the series configuration object.

border

An object defining the border properties for a selected series.

Selector: DxBorder
Type:

Object

To set custom border settings specific to the 'selected' state for the series, use the properties of the series.selectionStyle.border configuration object.

color

Sets the color for a series when it is selected.

Selector: DxColor
Type:

String

|

ChartsColor

| undefined
Default Value: undefined

This property supports the following colors:

You can also specify a custom pattern or gradient instead of a plain color. Call the registerPattern() or registerGradient() method to obtain a fill ID. Assign that value to the fillId field.

jQuery
index.js
$(function(){
    $("#pieChartContainer").dxPieChart({
        // ...
        series: {
            // ...
            selectionStyle: {
                color: {
                    fillId: customPatternId
                }
            }
        }
    });
});
Angular
app.component.html
app.component.ts
<dx-pie-chart ... >
    <dxi-series ... >
        <dxo-selection-style
            [color]="fill"
        ></dxo-selection-style>
    </dxi-series>
</dx-pie-chart>
// ...

export class AppComponent {
    // ...

    fill = {
        fillId: this.customPatternId
    };
}
Vue
App.vue (Options API)
App.vue (Composition API)
<template>
    <DxPieChart ... >
        <DxSeries ... >
            <DxSelectionStyle :color="fill" />
        </DxSeries>
    </DxPieChart>
</template>

<script>
import DxPieChart, { DxSeries, DxSelectionStyle } from 'devextreme-vue/chart'; 
// ...

export default {
    components: {
        DxChart,
        DxSeries,
        DxSelectionStyle
    },
    data() {
        return {
            // ...
            fill: {
                fillId: this.customPatternId
            }
        }
    }
}
</script>
<template>
    <DxPieChart ... >
        <DxSeries ... >
            <DxSelectionStyle :color="fill" />
        </DxSeries>
    </DxPieChart>
</template>

<script setup>
import DxPieChart, { DxSeries, DxSelectionStyle } from 'devextreme-vue/chart';  
// ...

const fill = {
    fillId: customPatternId
};
</script>
React
App.js
import React from 'react';
import PieChart, { Series, SelectionStyle } from 'devextreme-react/chart'; 

// ...
const fill = {
    fillId: customPatternId
};

export default function App() { 
    return ( 
        <PieChart ... >
            <Series ... >
                <SelectionStyle color={fill} />
            </Series>
        </PieChart>        
    ); 
}

hatching

Specifies the hatching properties to be applied when a point is selected.

Selector: DxHatching
Type:

Object

Within this object you can specify how to apply hatching using the direction property, the width and opacity of lines with the width and opacity properties, and the space between the lines using the step property.

highlight

Specifies whether to lighten the series when a user selects it.

Type:

Boolean

Default Value: true