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 2024', 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.2.6/css/dx.light.css" /> <script src="js/dx.all.js?v=25.2.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, 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, }];

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.