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
$(function() { $("#pieChartContainer").dxPieChart({ series: { hoverStyle: { // ... } } }); });
Angular
<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 ], // ... })
You can disable this feature by assigning "none" to the series.hoverMode option.
jQuery
$(function() { $("#pieChartContainer").dxPieChart({ series: { hoverMode: "none" } }); });
Angular
<dx-pie-chart> <dxi-series hoverMode="none"> </dxi-series> </dx-pie-chart>
import { DxPieChartModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxPieChartModule ], // ... })
API
You can switch a series point into the hover state and back again by calling its hover() and clearHover() method, respectively.
jQuery
var togglePointHoverState = function (point) { !point.isHovered() ? point.hover() : point.clearHover(); }
Angular
import { DxPieChartModule } from "devextreme-angular"; // ... export class AppComponent { toggleSeriesHoverState (point) { !point.isHovered() ? point.hover() : point.clearHover(); } } @NgModule({ imports: [ // ... DxPieChartModule ], // ... })
See Also
- Access a Point Using the API
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
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 option when you configure the widget if it is going to remain unchanged during the widget's lifetime. Call the point's isHovered() method to check whether the pointer entered or left a series point.
jQuery
$(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
<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 ], // ... })
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.
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
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
If you have technical questions, please create a support ticket in the DevExpress Support Center.