React 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.

TS JS

Backend API

import React from 'react'; import { Chart, CommonSeriesSettings, Series, ArgumentAxis, Grid, Crosshair, Export, Legend, Point, Label, Font, Title, Subtitle, Tooltip, } from 'devextreme-react/chart'; import { energySources, countriesInfo } from './data.ts'; function App() { return ( <Chart id="chart" dataSource={countriesInfo} > <CommonSeriesSettings type="spline" argumentField="country" > <Point hoverMode="allArgumentPoints" /> </CommonSeriesSettings> { energySources.map((item) => <Series key={item.value} valueField={item.value} name={item.name} />) } <ArgumentAxis valueMarginsEnabled={false} discreteAxisDivisionMode="crossLabels" > <Grid visible={true} /> </ArgumentAxis> <Crosshair enabled={true} color="#949494" width={3} dashStyle="dot" > <Label visible={true} backgroundColor="#949494" > <Font color="#fff" size={12} /> </Label> </Crosshair> <Legend verticalAlignment="bottom" horizontalAlignment="center" itemTextPosition="bottom" /> <Title text="Energy Consumption in 2024"> <Subtitle text="(Millions of Tons, Oil Equivalent)" /> </Title> <Export enabled={true} /> <Tooltip enabled={true} /> </Chart> ); } export default App;

import React from 'react'; import { Chart, CommonSeriesSettings, Series, ArgumentAxis, Grid, Crosshair, Export, Legend, Point, Label, Font, Title, Subtitle, Tooltip, } from 'devextreme-react/chart'; import { energySources, countriesInfo } from './data.js'; function App() { return ( <Chart id="chart" dataSource={countriesInfo} > <CommonSeriesSettings type="spline" argumentField="country" > <Point hoverMode="allArgumentPoints" /> </CommonSeriesSettings> {energySources.map((item) => ( <Series key={item.value} valueField={item.value} name={item.name} /> ))} <ArgumentAxis valueMarginsEnabled={false} discreteAxisDivisionMode="crossLabels" > <Grid visible={true} /> </ArgumentAxis> <Crosshair enabled={true} color="#949494" width={3} dashStyle="dot" > <Label visible={true} backgroundColor="#949494" > <Font color="#fff" size={12} /> </Label> </Crosshair> <Legend verticalAlignment="bottom" horizontalAlignment="center" itemTextPosition="bottom" /> <Title text="Energy Consumption in 2024"> <Subtitle text="(Millions of Tons, Oil Equivalent)" /> </Title> <Export enabled={true} /> <Tooltip enabled={true} /> </Chart> ); } export default App;

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );

export const energySources = [ { value: 'hydro', name: 'Hydro-electric' }, { value: 'oil', name: 'Oil' }, { value: 'gas', name: 'Natural gas' }, { value: 'coal', name: 'Coal' }, { value: 'nuclear', name: 'Nuclear' }, ]; export const countriesInfo = [{ 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, }];

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));

export const energySources = [ { value: 'hydro', name: 'Hydro-electric' }, { value: 'oil', name: 'Oil' }, { value: 'gas', name: 'Natural gas' }, { value: 'coal', name: 'Coal' }, { value: 'nuclear', name: 'Nuclear' }, ]; export const countriesInfo = [ { 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, }, ];

<!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" /> <link rel="stylesheet" type="text/css" href="./bundle.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> <script src="bundles/vendor/react.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>

#chart { height: 440px; }

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.