JavaScript/jQuery PieChart - commonSeriesSettings.selectionStyle
An object defining configuration properties for the series when it is selected.
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.
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.
This property supports the following colors:
- Hexadecimal colors
- RGB colors
- RGBA colors
- Predefined/cross-browser color names
- Predefined SVG colors
- Paint server address
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
$(function(){ $("#pieChartContainer").dxPieChart({ // ... series: { // ... selectionStyle: { color: { fillId: customPatternId } } } }); });
Angular
<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
<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
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.
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.
If you have technical questions, please create a support ticket in the DevExpress Support Center.