jQuery PolarChart - LineSeries.hoverStyle

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.

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.

$(function(){
    $("#polarChartContainer").dxPolarChart({
        // ...
        series: {
            // ...
            hoverStyle: {
                color: {
                    fillId: customPatternId
                }
            }
        }
    });
});

<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
    };
} 

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

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>        
    ); 
} 

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