Angular Charts - Crosshair

The DevExtreme Chart component ships with integrated crosshair support (vertical and horizontal lines centered on a data point). When enabled, the crosshair follows the cursor and snaps to the nearest series point. To configure crosshair settings, specify the crosshair object.

Backend API

<dx-chart id="chart" [dataSource]="countriesInfo"> @for(energy of energySources; track energy.name) { <dxi-chart-series [valueField]="energy.value" [name]="energy.name"> </dxi-chart-series> } <dxo-chart-common-series-settings argumentField="country" type="spline"> <dxo-chart-point hoverMode="allArgumentPoints"></dxo-chart-point> </dxo-chart-common-series-settings> <dxo-chart-argument-axis [valueMarginsEnabled]="false" discreteAxisDivisionMode="crossLabels" > <dxo-chart-grid [visible]="true"></dxo-chart-grid> </dxo-chart-argument-axis> <dxo-chart-crosshair [enabled]="true" color="#949494" [width]="3" dashStyle="dot" > <dxo-chart-label [visible]="true" backgroundColor="#949494"> <dxo-chart-font color="#fff" [size]="12"> </dxo-chart-font> </dxo-chart-label> </dxo-chart-crosshair> <dxo-chart-legend verticalAlignment="bottom" horizontalAlignment="center" itemTextPosition="bottom" > </dxo-chart-legend> <dxo-chart-title text="Energy Consumption in 2024"> <dxo-chart-subtitle text="(Millions of Tons, Oil Equivalent)" ></dxo-chart-subtitle> </dxo-chart-title> <dxo-chart-tooltip [enabled]="true"></dxo-chart-tooltip> <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, CountryInfo, EnergyDescription } 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 { countriesInfo: CountryInfo[]; energySources: EnergyDescription[]; constructor(service: Service) { this.countriesInfo = service.getCountriesInfo(); this.energySources = service.getEnergySources(); } } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), ], });

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

import { Injectable } from '@angular/core'; export class CountryInfo { country: string; hydro: number; oil: number; gas: number; coal: number; nuclear: number; } export class EnergyDescription { value: string; name: string; } const energySources: EnergyDescription[] = [ { value: 'hydro', name: 'Hydro-electric' }, { value: 'oil', name: 'Oil' }, { value: 'gas', name: 'Natural gas' }, { value: 'coal', name: 'Coal' }, { value: 'nuclear', name: 'Nuclear' }, ]; const countriesInfo: CountryInfo[] = [{ country: 'USA', hydro: 60, oil: 940, gas: 910, coal: 210, nuclear: 230, }, { country: 'Japan', hydro: 20, oil: 170, gas: 85, coal: 120, nuclear: 35, }, { country: 'India', hydro: 40, oil: 260, gas: 60, coal: 620, nuclear: 10, }, { country: 'Germany', hydro: 7, oil: 110, gas: 85, coal: 35, nuclear: 5, }, { country: 'Canada', hydro: 90, oil: 110, gas: 120, coal: 5, nuclear: 20, }, { country: 'Brazil', hydro: 110, oil: 150, gas: 50, coal: 15, nuclear: 5, }]; @Injectable() export class Service { getCountriesInfo(): CountryInfo[] { return countriesInfo; } getEnergySources(): EnergyDescription[] { return energySources; } }

<!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>

This demo configures the following crosshair properties:

color
Specifies line color.
width
Configures line width.
dashStyle
Specifies line style.
label
Configures labels (text and appearance).

To override settings for each line individually, configure crosshair.horizontalLine and crosshair.verticalLine objects.