React Charts - Hover Mode

The Chart and PieChart components support different modes of series hovering. This demo shows the «includePoints» mode, when all the points of a hovered series change their display style. In addition, you can specify a custom hover mode for legend items. Here, the «excludePoints» mode is used, when only the series line changes its display style leaving the points as they were.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

TS JS

Backend API

​x
 
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;​

xxxxxxxxxx
 
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;​

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

xxxxxxxxxx
 
export const yearSources = [
  { value: 'year2004', name: '2004' },  { value: 'year2001', name: '2001' },  { value: 'year1998', name: '1998' },];​export const grossProductData = [{  state: 'Illinois',  year1998: 374,  year2001: 427,  year2004: 479,}, {  state: 'Indiana',  year1998: 129,  year2001: 146,  year2004: 177,}, {  state: 'Michigan',  year1998: 259,  year2001: 286,  year2004: 323,}, {  state: 'Ohio',  year1998: 299,  year2001: 325,  year2004: 368,}, {  state: 'Wisconsin',  year1998: 110,  year2001: 132,  year2004: 162,}];​​

xxxxxxxxxx
 
window.exports = window.exports || {};
window.config = {  transpiler: 'ts',  typescriptOptions: {    module: 'system',    emitDecoratorMetadata: true,    experimentalDecorators: true,    jsx: 'react',  },  meta: {    'react': {      'esModule': true,    },    'typescript': {      'exports': 'ts',    },    'devextreme/time_zone_utils.js': {      'esModule': true,    },    'devextreme/localization.js': {      'esModule': true,    },    'devextreme/viz/palette.js': {      'esModule': true,    },    'openai': {      'esModule': true,    },  },  paths: {    'npm:': 'https://unpkg.com/',    'bundles:': 'bundles/',    'externals:': 'bundles/externals/',  },  defaultExtension: 'js',  map: {    'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',    'typescript': 'npm:typescript@4.2.4/lib/typescript.js',    'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',    'react': 'npm:react@17.0.2/umd/react.development.js',    'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js',    'prop-types': 'npm:prop-types/prop-types.js',    'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',    'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',    'es6-object-assign': 'npm:es6-object-assign',    'devextreme': 'npm:devextreme@24.2.6/cjs',    'devextreme-react': 'npm:devextreme-react@24.2.6/cjs',    'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',    'devexpress-diagram': 'npm:devexpress-diagram@2.2.15/dist/dx-diagram.js',    'devexpress-gantt': 'npm:devexpress-gantt@4.1.60/dist/dx-gantt.js',    '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12',    'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',    'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',    'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',    'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',    'inferno-hydrate': 'npm:inferno-hydrate/dist/inferno-hydrate.min.js',    'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',    'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',    'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',    'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3',    // SystemJS plugins    'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',    'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',    // Prettier    'prettier/standalone': 'npm:prettier@2.8.8/standalone.js',    'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',  },  packages: {    'devextreme': {      defaultExtension: 'js',    },    'devextreme-react': {      main: 'index.js',    },    'devextreme/events/utils': {      main: 'index',    },    'devextreme/common/core/events/utils': {      main: 'index',    },    'devextreme/localization/messages': {      format: 'json',      defaultExtension: 'json',    },    'devextreme/events': {      main: 'index',    },    'es6-object-assign': {      main: './index.js',      defaultExtension: 'js',    },  },  packageConfigPaths: [    'npm:@devextreme/*/package.json',    'npm:@devextreme/runtime@3.0.12/inferno/package.json',  ],  babelOptions: {    sourceMaps: false,    stage0: true,    react: true,  },};System.config(window.config);​

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

xxxxxxxxxx
 
export const yearSources = [
  { value: 'year2004', name: '2004' },  { value: 'year2001', name: '2001' },  { value: 'year1998', name: '1998' },];export const grossProductData = [  {    state: 'Illinois',    year1998: 374,    year2001: 427,    year2004: 479,  },  {    state: 'Indiana',    year1998: 129,    year2001: 146,    year2004: 177,  },  {    state: 'Michigan',    year1998: 259,    year2001: 286,    year2004: 323,  },  {    state: 'Ohio',    year1998: 299,    year2001: 325,    year2004: 368,  },  {    state: 'Wisconsin',    year1998: 110,    year2001: 132,    year2004: 162,  },];​

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">  <head>↔</head>​  <body class="dx-viewport">    <div class="demo-container">      <div id="app"></div>    </div>  </body></html>​

xxxxxxxxxx
 
#chart {
  height: 440px;}​