Vue Chart - series.hoverStyle

Declared in commonSeriesSettings, hoverStyle applies to all series in the chart. Declared in a series configuration object, hoverStyle applies to this particular series only. The series-specific hoverStyle overrides the common one.

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.

This functionality is available for the following Chart series:

• Area
• Stacked area
• Full-stacked area
• Spline area
• Stacked spline area
• Full-stacked spline area
• Range area
• Step area
• Bar
• Stacked bar
• Full-stacked bar
• Range bar
• Bubble

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

<dx-chart ... >
    <dxi-series ... >
        <dxo-hover-style
            [color]="fill"
        ></dxo-hover-style>
    </dxi-series>
</dx-chart>

// ...

export class AppComponent {
    // ...

    fill = {
        fillId: this.customPatternId
    };
} 

<template>
    <DxChart ... >
        <DxSeries ... >
            <DxHoverStyle :color="fill" />
        </DxSeries>
    </DxChart>
</template>

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

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

<template>
    <DxChart ... >
        <DxSeries ... >
            <DxHoverStyle :color="fill" />
        </DxSeries>
    </DxChart>
</template>

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

const fill = {
    fillId: customPatternId
};
</script>

import React from 'react';
import Chart, { Series, HoverStyle } from 'devextreme-react/chart'; 

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

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

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 is filling an area or a bar (depending on the series type) with parallel diagonal lines. In the Chart UI component, it applies when a user points to a series.