Vue Chart - series.hoverStyle

Configures the appearance adopted by the series when a user points to it.

Selector: DxHoverStyle
Type:

Object

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.

border

Configures the appearance adopted by the series border (in area-like series) or the series point border (in bar-like and bubble series) when a user points to the series.

color

Specifies the color of the series in the hovered state.

Selector: DxColor
Type:

String

|

ChartsColor

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

This functionality is available for the following Chart series:

App.vue (Options API)
App.vue (Composition API)
  • <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>

dashStyle

Specifies the dash style of the series line when the series is in the hovered state. Applies only to line-like series.

Selector: dash-style
Type:

DashStyle

Default Value: 'solid'

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

Configures hatching that applies when a user points to the series.

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.

highlight

Specifies whether to lighten the series when a user hovers the mouse pointer over it.

width

Specifies the pixel-measured width of the series line when the series is in the hovered state.