Vue PolarChart - commonSeriesSettings.point.selectionStyle

An object defining configuration properties for a selected point.

Selector: DxSelectionStyle
Type:

Object

This member is exposed by the following entities:

The PolarChart UI component comes with API members that allow you to select a point in code. To set a custom 'selected' style for points in all series at once, use the point.selectionStyle object within the commonSeriesSettings configuration object.

If you have several series of one type, you can set point selection style properties to the values specific to the series type using the corresponding object (area, line or another) within the commonSeriesSettings configuration object. The values that are set within series-type-specific configuration objects override the corresponding common values.

In case you have to set a point selection style property for an individual series, use the selectionStyle object within the series.point object of the series array. The values that are set individually override corresponding common values.

border

An object defining the border properties for a selected point.

Selector: DxBorder
Type:

Object

This member is exposed by the following entities:

To set custom border settings specific to the 'selected' state for points in all series at once, use the properties of the commonSeriesSettings.point.selectionStyle.border configuration object.

To set custom border settings specific to the 'selected' state for points in all series of a single type at once, use the properties of the corresponding object within commonSeriesSettings (e.g. area.selectionStyle.border). The values that are set within this object override the corresponding common values that are set within the root commonSeriesSettings.selectionStyle.border object.

In case you have to set a selection style property for a point border in an individual series, use the selectionStyle.border object within the series object of the series array. The values that are set individually override corresponding common values.

color

Sets a color for a point when it is selected.

Selector: DxColor
Default Value: undefined
This member is exposed by the following entities:

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(){
    $("#polarChartContainer").dxPolarChart({
        // ...
        series: {
            // ...
            point: {
                selectionStyle: {
                    color: {
                        fillId: customPatternId
                    }
                }
            }
        }
    });
});
Angular
app.component.html
app.component.ts
<dx-polar-chart ... >
    <dxi-series ... >
        <dxo-point ... >
            <dxo-selection-style 
                [color]="fill"
            ></dxo-selection-style>
        </dxo-point>
    </dxi-series>
</dx-polar-chart>
// ...

export class AppComponent {
    // ...

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

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

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

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

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

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

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

size

Specifies the diameter of a selected point in the series that represents data points as symbols (not as bars for instance).

Type:

Number

Default Value: 12
This member is exposed by the following entities: