Vue PolarChart - commonSeriesSettings.hoverStyle

An object defining configuration properties for a hovered series.

Selector: DxHoverStyle
Type:

Object

This member is exposed by the following entities:

To set a custom 'hover' style for all series at once, use the hoverStyle object within the commonSeriesSettings configuration object.

If you have several series of one type, you can set hover style properties to the values specific to this 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 hover style property for an individual series, use the hoverStyle object within the series object of the series array. The values that are set individually override corresponding common values.

border

An object defining the border properties for a hovered series.

Selector: DxBorder
Type:

Object

This member is exposed by the following entities:

To set custom border settings specific to the 'hovered' state for all series at once, use the properties of the commonSeriesSettings.hoverStyle.border configuration object.

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

In case you have to set a hover style property for a border in an individual series, use the hoverStyle.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 series when it is hovered over.

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

export class AppComponent {
    // ...

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

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

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

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

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

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

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

dashStyle

Specifies the dash style for the line in a hovered series.

Selector: dash-style
Type:

DashStyle

Default Value: 'solid'
This member is exposed by the following entities:

The following dash styles are available:

  • solid
    The border is a solid, continuous line.

  • longDash
    The border is displayed using long dashes.

  • dash
    The border is displayed using dashes.

  • dot
    The border is displayed using dots.

  • Any combination of 'longDash', 'dash' and 'dot'
    The border is displayed by repeating the specified combination. For instance, 'dashdotdash'.

hatching

Specifies the hatching properties to be applied when a series is hovered over.

Selector: DxHatching
Type:

Object

This member is exposed by the following entities:

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 points to it.

Type:

Boolean

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

width

Specifies the width of a line in a hovered series.

Type:

Number

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