Vue PieChart - Hover

User Interaction

A series point's style changes when a user hovers the mouse pointer over it. The series.hoverStyle object specifies this style.

jQuery
JavaScript
$(function() {
    $("#pieChartContainer").dxPieChart({
        series: {
            hoverStyle: {
                // ...
            }
        }
    });
});
Angular
HTML
TypeScript
<dx-pie-chart>
    <dxi-series>
        <dxo-hover-style>
            <!-- ... -->
        </dxo-hover-style>
    </dxi-series>
</dx-pie-chart>
import { DxPieChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxPieChartModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxPieChart ... >
        <DxSeries>
            <DxHoverStyle>
                <!-- ... -->
            </DxHoverStyle>
        </DxSeries>
    </DxPieChart>
</template>

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

export default {
    components: {
        DxPieChart,
        DxSeries,
        DxHoverStyle
    }
}
</script>
React
App.js
import React from 'react';
import PieChart, {
    Series,
    HoverStyle
} from 'devextreme-react/pie-chart';

class App extends React.Component {
    render() {
        return (
            <PieChart ... >
                <Series>
                    <HoverStyle>
                        {/* ... */}
                    </HoverStyle>
                </Series>
            </PieChart>
        );
    }
}

You can disable this feature by assigning "none" to the series.hoverMode property.

jQuery
JavaScript
$(function() {
    $("#pieChartContainer").dxPieChart({
        series: {
            hoverMode: "none"
        }
    });
});
Angular
HTML
TypeScript
<dx-pie-chart>
    <dxi-series
        hoverMode="none">
    </dxi-series>
</dx-pie-chart>
import { DxPieChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxPieChartModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxPieChart ... >
        <DxSeries ...
            hover-mode="none"
        />
    </DxPieChart>
</template>

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

export default {
    components: {
        DxPieChart,
        DxSeries
    }
}
</script>
React
App.js
import React from 'react';
import PieChart, {
    Series
} from 'devextreme-react/pie-chart';

class App extends React.Component {
    render() {
        return (
            <PieChart ... >
                <Series ...
                    hoverMode="none"
                />
            </PieChart>
        );
    }
}

API

You can switch a series point into the hover state and back again by calling its hover() and clearHover() method, respectively.

jQuery
JavaScript
var togglePointHoverState = function (point) {
    !point.isHovered() ? point.hover() : point.clearHover();        
}
Angular
TypeScript
import { DxPieChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    toggleSeriesHoverState (point) {
        !point.isHovered() ? point.hover() : point.clearHover();
    }
}
@NgModule({
    imports: [
        // ...
        DxPieChartModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxPieChart ... >
    </DxPieChart>
</template>

<script>
import DxPieChart from 'devextreme-vue/pie-chart';

export default {
    components: {
        DxPieChart
    },
    methods: {
        toggleSeriesHoverState(point) {
            !point.isHovered() ? point.hover() : point.clearHover();
        }
    }
}
</script>
React
App.js
import React from 'react';
import PieChart from 'devextreme-react/pie-chart';

class App extends React.Component {
    render() {
        return (
            <PieChart ... >
            </PieChart>
        );
    }  
}

function toggleSeriesHoverState(point) {
    !point.isHovered() ? point.hover() : point.clearHover();
}
See Also

Events

When a user hovers the mouse pointer on a series point, the PieChart fires the pointHoverChanged event that you can handle with a function. Assign this function to the onPointHoverChanged property when you configure the UI component if it is going to remain unchanged during the UI component's lifetime. Call the point's isHovered() method to check whether the pointer entered or left a series point.

jQuery
JavaScript
$(function() {
    $("#pieChartContainer").dxPieChart({
        onPointHoverChanged: function (e) {
            var point = e.target;
            if (point.isHovered()) {
                // Command to execute when the mouse pointer enters the point
            } else {
                // Command to execute when the mouse pointer leaves the point
            }
        }
    });
});
Angular
HTML
TypeScript
<dx-pie-chart
    (onPointHoverChanged)="onPointHoverChanged($event)">
</dx-pie-chart>
import { DxPieChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    onPointHoverChanged (e) {
        let point = e.target;
        if (point.isHovered()) {
            // Command to execute when the mouse pointer enters the point
        } else {
            // Command to execute when the mouse pointer leaves the point
        }
    };
}
@NgModule({
    imports: [
        // ...
        DxPieChartModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxPieChart ...
        @point-hover-changed="onPointHoverChanged">
    </DxPieChart>
</template>

<script>
import DxPieChart from 'devextreme-vue/pie-chart';

export default {
    components: {
        DxPieChart
    },
    methods: {
        onPointHoverChanged(e) {
            let point = e.target;
            if(point.isHovered()) {
                // Command to execute when the mouse pointer enters the point
            } else {
                // Command to execute when the mouse pointer leaves the point
            }
        }
    }
}
</script>
React
App.js
import React from 'react';
import PieChart from 'devextreme-react/pie-chart';

class App extends React.Component {
    render() {
        return (
            <PieChart ...
                onPointHoverChanged={onPointHoverChanged}>
            </PieChart>
        );
    }
}

function onPointHoverChanged(e) {
    let point = e.target;
    if(point.isHovered()) {
        // Command to execute when the mouse pointer enters the point
    } else {
        // Command to execute when the mouse pointer leaves the point
    }
}

Subscribe to the pointHoverChanged event using the on(eventName, eventHandler) method if you are going to change the event handler at runtime or if you need to attach several handlers to it. This approach is more typical of jQuery.

JavaScript
var pointHoverChangedHandler1 = function (e) {
    var point = e.target;
    // The "pointHoverChanged" event's first handler
};

var pointHoverChangedHandler2 = function (e) {
    var point = e.target;
    // The "pointHoverChanged" event's second handler
};

$("#pieChartContainer").dxPieChart("instance")
    .on("pointHoverChanged", pointHoverChangedHandler1)
    .on("pointHoverChanged", pointHoverChangedHandler2);
See Also