Vue Chart - commonSeriesSettings.point.hoverStyle
Selector: DxHoverStyle
Type:
This member is exposed by the following entities:
color
Selector: DxColor
Default Value: undefined
This member is exposed by the following entities:
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
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>
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.