JavaScript/jQuery 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

$(() => { $('#chart').dxChart({ dataSource, commonSeriesSettings: { argumentField: 'country', type: 'spline', point: { hoverMode: 'allArgumentPoints', }, }, argumentAxis: { valueMarginsEnabled: false, discreteAxisDivisionMode: 'crossLabels', grid: { visible: true, }, }, crosshair: { enabled: true, color: '#949494', width: 3, dashStyle: 'dot', label: { visible: true, backgroundColor: '#949494', font: { color: '#fff', size: 12, }, }, }, series: [ { valueField: 'hydro', name: 'Hydro-electric' }, { valueField: 'oil', name: 'Oil' }, { valueField: 'gas', name: 'Natural gas' }, { valueField: 'coal', name: 'Coal' }, { valueField: 'nuclear', name: 'Nuclear' }, ], legend: { verticalAlignment: 'bottom', horizontalAlignment: 'center', itemTextPosition: 'bottom', equalColumnWidth: true, }, title: { text: 'Energy Consumption in 2004', subtitle: { text: '(Millions of Tons, Oil Equivalent)', }, }, export: { enabled: true, }, tooltip: { enabled: true, }, }); });

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" 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" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.1.6/css/dx.light.css" /> <script src="js/dx.all.js?v=25.1.6"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="chart"></div> </div> </body> </html>

#chart { height: 440px; }

const dataSource = [{ country: 'USA', hydro: 60.2, oil: 974.7, gas: 550.5, coal: 568.9, nuclear: 203.7, }, { country: 'China', hydro: 77.8, oil: 304.5, gas: 35, coal: 899, nuclear: 10.8, }, { country: 'Russia', hydro: 38.5, oil: 127.2, gas: 349.5, coal: 97.2, nuclear: 30.5, }, { country: 'Japan', hydro: 23.8, oil: 227.4, gas: 63.2, coal: 118.6, nuclear: 59.7, }, { country: 'India', hydro: 18.7, oil: 115.7, gas: 30.6, coal: 187, nuclear: 3.5, }, { country: 'Germany', hydro: 6.7, oil: 120.5, gas: 83.4, coal: 86.6, nuclear: 35.7, }];

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.