Vue Chart - commonSeriesSettings.point.hoverStyle

Configures the appearance adopted by a series point when a user pauses on it.

color

Specifies the color of series points in the hovered state.

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 ... >
  • <DxPoint ... >
  • <DxHoverStyle :color="fill" />
  • </DxPoint>
  • </DxSeries>
  • </DxChart>
  • </template>
  •  
  • <script>
  • import DxChart, { DxSeries, DxPoint, DxHoverStyle } from 'devextreme-vue/chart';
  • // ...
  •  
  • export default {
  • components: {
  • DxChart,
  • DxSeries,
  • DxPoint,
  • DxHoverStyle
  • },
  • data() {
  • return {
  • // ...
  • fill: {
  • fillId: this.customPatternId
  • }
  • }
  • }
  • }
  • </script>
  • <template>
  • <DxChart ... >
  • <DxSeries ... >
  • <DxPoint ... >
  • <DxHoverStyle :color="fill" />
  • </DxPoint>
  • </DxSeries>
  • </DxChart>
  • </template>
  •  
  • <script setup>
  • import DxChart, { DxSeries, DxPoint, DxHoverStyle } from 'devextreme-vue/chart';
  • // ...
  •  
  • const fill = {
  • fillId: customPatternId
  • };
  • </script>