DevExtreme v23.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Free Trial Buy
    Your search did not match any results.
    Line Charts

    Crosshair

    Documentation

    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.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    AngularJS

    ASP.NET Core

    ASP.NET MVC

    Backend API
    Copy to CodePen
    Apply
    Reset
    const DemoApp = angular.module('DemoApp', ['dx']); DemoApp.controller('DemoController', ($scope) => { $scope.chartOptions = { 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"> <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=1.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/23.1.5/css/dx.light.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> <script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script> <script src="https://cdn3.devexpress.com/jslib/23.1.5/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" ng-app="DemoApp" ng-controller="DemoController"> <div id="chart" dx-chart="chartOptions"></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, }];