JavaScript/jQuery Charts - Crosshair

In this example, the crosshair pointer is enabled and a custom style is applied to it. The crosshair pointer allows a user to determine the argument and the value of a specific point more precisely.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

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/24.2.3/css/dx.light.css" /> <script src="js/dx.all.js"></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, }];