React Charts - Hover Mode

DevExtreme Chart supports configurable hover modes for both series and points. This demo applies a common hoverMode for all series/points and a custom mode for the component legend.

TS JS

Backend API

import React from 'react'; import { Chart, CommonSeriesSettings, Series, Export, Legend, Point, } from 'devextreme-react/chart'; import { yearSources, grossProductData } from './data.ts'; function App() { return ( <Chart id="chart" dataSource={grossProductData} stickyHovering={false} title="Great Lakes Gross State Product" > <CommonSeriesSettings argumentField="state" type="spline" hoverMode="includePoints" > <Point hoverMode="allArgumentPoints" /> </CommonSeriesSettings> { yearSources.map((item) => <Series key={item.value} valueField={item.value} name={item.name} />) } <Export enabled={true} /> <Legend verticalAlignment="bottom" horizontalAlignment="center" hoverMode="excludePoints" /> </Chart> ); } export default App;

import React from 'react'; import { Chart, CommonSeriesSettings, Series, Export, Legend, Point, } from 'devextreme-react/chart'; import { yearSources, grossProductData } from './data.js'; function App() { return ( <Chart id="chart" dataSource={grossProductData} stickyHovering={false} title="Great Lakes Gross State Product" > <CommonSeriesSettings argumentField="state" type="spline" hoverMode="includePoints" > <Point hoverMode="allArgumentPoints" /> </CommonSeriesSettings> {yearSources.map((item) => ( <Series key={item.value} valueField={item.value} name={item.name} /> ))} <Export enabled={true} /> <Legend verticalAlignment="bottom" horizontalAlignment="center" hoverMode="excludePoints" /> </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 yearSources = [ { value: 'year2024', name: '2024' }, { value: 'year2020', name: '2020' }, { value: 'year2016', name: '2016' }, ]; export const grossProductData = [{ state: 'Illinois', year2016: 791, year2020: 874, year2024: 1130, }, { state: 'Indiana', year2016: 317, year2020: 352, year2024: 480, }, { state: 'Michigan', year2016: 469, year2020: 516, year2024: 705, }, { state: 'Ohio', year2016: 626, year2020: 698, year2024: 930, }, { state: 'Wisconsin', year2016: 296, year2020: 324, year2024: 430, }];

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

export const yearSources = [ { value: 'year2024', name: '2024' }, { value: 'year2020', name: '2020' }, { value: 'year2016', name: '2016' }, ]; export const grossProductData = [ { state: 'Illinois', year2016: 791, year2020: 874, year2024: 1130, }, { state: 'Indiana', year2016: 317, year2020: 352, year2024: 480, }, { state: 'Michigan', year2016: 469, year2020: 516, year2024: 705, }, { state: 'Ohio', year2016: 626, year2020: 698, year2024: 930, }, { state: 'Wisconsin', year2016: 296, year2020: 324, year2024: 430, }, ];

<!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; }

You can specify hoverMode for the following Chart elements:

series
A specific series.
commonSeriesSettings
All series.
commonSeriesSettings.spline (or other Series Type objects)
All series (specific type).
legend
Series hovered in the Chart legend.
series.point
Points in a specific series.
commonSeriesSettings.point (or other Series Type objects)
All points.
commonSeriesSettings.spline.point
All points in series (specific type).
argumentAxis
All points at common argument values.

To further customize Chart behavior, define the stickyHovering property. When enabled (default), points remain in a hovered state until users hover the mouse pointer over other points or move it outside the bounds of the component.