Vue Chart - series.point.hoverStyle

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

Selector: DxHoverStyle
Type:

Object

This member is exposed by the following entities:

border

Configures the appearance of the point border when a user pauses on the point.

Selector: DxBorder
Type:

Object

This member is exposed by the following entities:

color

Specifies the color of series points in the hovered state.

Selector: DxColor
Type:

String

|

ChartsColor

Default Value: undefined
This member is exposed by the following entities:

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:

jQuery
index.js
$(function(){
    $("#chartContainer").dxChart({
        // ...
        series: {
            // ...
            point: {
                hoverStyle: {
                    color: {
                        fillId: customPatternId
                    }
                }
            }
        }
    });
});
Angular
app.component.html
app.component.ts
<dx-chart ... >
    <dxi-series ... >
        <dxo-point ... >
            <dxo-hover-style 
                [color]="fill"
            ></dxo-hover-style>
        </dxo-point>
    </dxi-series>
</dx-chart>
// ...

export class AppComponent {
    // ...

    fill = {
        fillId: this.customPatternId
    };
}
Vue
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>
React
App.js
import React from 'react';
import Chart, { Series, Point, HoverStyle } from 'devextreme-react/chart'; 

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

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

size

Specfies the diameter of series points in the hovered state.

Type:

Number

Default Value: undefined
This member is exposed by the following entities: