Angular Charts - Hover Mode

DevExtreme Chart supports configurable hover modes for both series and points. This demo applies a common hoverMode for all series/points and a custom mode for the component legend.

Backend API

<dx-chart id="chart" [dataSource]="grossProductData" [stickyHovering]="false" title="Great Lakes Gross State Product" > <dxi-chart-series valueField="year2024" name="2024"></dxi-chart-series> <dxi-chart-series valueField="year2020" name="2020"></dxi-chart-series> <dxi-chart-series valueField="year2016" name="2016"></dxi-chart-series> <dxo-chart-common-series-settings argumentField="state" type="spline" hoverMode="includePoints" > <dxo-chart-point hoverMode="allArgumentPoints"></dxo-chart-point> </dxo-chart-common-series-settings> <dxo-chart-legend verticalAlignment="bottom" horizontalAlignment="center" hoverMode="excludePoints" > </dxo-chart-legend> <dxo-chart-export [enabled]="true"></dxo-chart-export> </dx-chart>

import { bootstrapApplication } from '@angular/platform-browser'; import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core'; import { DxChartModule } from 'devextreme-angular'; import { Service, GrossProduct } from './app.service'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', providers: [Service], templateUrl: './app.component.html', styleUrls: ['./app.component.css'], imports: [ DxChartModule, ], }) export class AppComponent { grossProductData: GrossProduct[]; constructor(service: Service) { this.grossProductData = service.getGrossProductData(); } } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), ], });

::ng-deep #chart { height: 440px; }

import { Injectable } from '@angular/core'; export class GrossProduct { state: string; year2016: number; year2020: number; year2024: number; } const grossProductData: GrossProduct[] = [{ state: 'Illinois', year2016: 791, year2020: 874, year2024: 1130, }, { state: 'Indiana', year2016: 317, year2020: 352, year2024: 480, }, { state: 'Michigan', year2016: 469, year2020: 516, year2024: 705, }, { state: 'Ohio', year2016: 626, year2020: 698, year2024: 930, }, { state: 'Wisconsin', year2016: 296, year2020: 324, year2024: 430, }]; @Injectable() export class Service { getGrossProductData(): GrossProduct[] { return grossProductData; } }

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> <script src="https://cdn.jsdelivr.net/npm/zone.js@0.16.2/bundles/zone.umd.js"></script> <script src="./bundle.js" type="module"></script> </body> </html>

You can specify hoverMode for the following Chart elements:

series
A specific series.
commonSeriesSettings
All series.
commonSeriesSettings.spline (or other Series Type objects)
All series (specific type).
legend
Series hovered in the Chart legend.
series.point
Points in a specific series.
commonSeriesSettings.point (or other Series Type objects)
All points.
commonSeriesSettings.spline.point
All points in series (specific type).
argumentAxis
All points at common argument values.

To further customize Chart behavior, define the stickyHovering property. When enabled (default), points remain in a hovered state until users hover the mouse pointer over other points or move it outside the bounds of the component.