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.

www.geohive.com
Copy to CodeSandBox
Apply
Reset
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'; class App extends React.Component { render() { return ( <Chart id="chart" dataSource={countriesInfo} > <CommonSeriesSettings type="spline" argumentField="country" > <Point hoverMode="allArgumentPoints" /> </CommonSeriesSettings> { energySources.map(function(item) { return <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" equalColumnWidth={true} /> <Title text="Energy Consumption in 2004"> <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.js'; ReactDOM.render( <App />, document.getElementById('app') );
<!DOCTYPE html> <html> <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" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('./index.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
#chart { height: 440px; }
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: 59.8, oil: 937.6, gas: 582, coal: 564.3, nuclear: 187.9 }, { country: 'China', hydro: 74.2, oil: 308.6, gas: 35.1, coal: 956.9, nuclear: 11.3 }, { country: 'Russia', hydro: 40, oil: 128.5, gas: 361.8, coal: 105, nuclear: 32.4 }, { country: 'Japan', hydro: 22.6, oil: 241.5, gas: 64.9, coal: 120.8, nuclear: 64.8 }, { country: 'India', hydro: 19, oil: 119.3, gas: 28.9, coal: 204.8, nuclear: 3.8 }, { country: 'Germany', hydro: 6.1, oil: 123.6, gas: 77.3, coal: 85.7, nuclear: 37.8 }];
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, defaultExtension: 'js', map: { 'react': 'npm:react@16/umd/react.development.js', 'react-dom': 'npm:react-dom@16/umd/react-dom.development.js', 'prop-types': 'npm:prop-types/prop-types.js', 'devextreme': 'npm:devextreme@19.2', 'devextreme-react': 'npm:devextreme-react@19.2', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.7/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', 'devexpress-gantt': 'npm:devexpress-gantt', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, packages: { 'devextreme': { defaultExtension: 'js' }, 'devextreme-react': { main: 'index.js' } }, babelOptions: { sourceMaps: false, stage0: true, react: true } });