JavaScript/jQuery 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.

Backend API

$(() => { $('#chart').dxChart({ dataSource, commonSeriesSettings: { argumentField: 'state', type: 'spline', hoverMode: 'includePoints', point: { hoverMode: 'allArgumentPoints', }, }, series: [ { valueField: 'year2024', name: '2024' }, { valueField: 'year2020', name: '2020' }, { valueField: 'year2016', name: '2016' }, ], stickyHovering: false, title: { text: 'Great Lakes Gross State Product', }, export: { enabled: true, }, legend: { verticalAlignment: 'bottom', horizontalAlignment: 'center', hoverMode: 'excludePoints', }, }); });

<!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/25.2.6/css/dx.light.css" /> <script src="js/dx.all.js?v=25.2.6"></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 = [{ 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, }];

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.