React PieChart - series.hoverStyle

An object defining configuration properties for a hovered series.

Selector: HoverStyle
Type:

Object

To set a custom 'hover' style for the series, use the hoverStyle object within the series configuration object.

border

An object defining the border properties for a hovered series.

Selector: Border
Type:

Object

To set custom border settings specific to the 'hovered' state for the series, use the properties of the series.hoverStyle.border configuration object.

color

Sets the color for the series when it is hovered over.

Selector: Color
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.

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

export class AppComponent {
    // ...

    fill = {
        fillId: this.customPatternId
    };
}
Vue
App.vue (Options API)
App.vue (Composition API)
<template>
    <DxPieChart ... >
        <DxSeries ... >
            <DxHoverStyle :color="fill" />
        </DxSeries>
    </DxPieChart>
</template>

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

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

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

const fill = {
    fillId: customPatternId
};
</script>
React
App.js
import React from 'react';
import PieChart, { Series, HoverStyle } from 'devextreme-react/chart'; 

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

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

hatching

Specifies the hatching properties to be applied when a point is hovered over.

Selector: Hatching
Type:

Object

Within this object you can specify how to apply hatching using the direction property, the width and opacity of lines with the width and opacity properties, and the space between the lines using the step property.

highlight

Specifies whether to lighten the series when a user points to it.

Type:

Boolean

Default Value: true