Angular 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.

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
  • ],
  • // ...
  • })

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

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
  • ],
  • // ...
  • })

API

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

TypeScript
  • import { DxPieChartModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • togglePointHoverState (point) {
  • !point.isHovered() ? point.hover() : point.clearHover();
  • }
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxPieChartModule
  • ],
  • // ...
  • })
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.

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
  • ],
  • // ...
  • })
See Also