JavaScript/jQuery Chart - Hover

User Interaction

When a user pauses on a series, the series changes its style to the one specified by the following objects.

  • series.hoverStyle
    The hover style for an individual series.

  • commonSeriesSettings.hoverStyle
    The hover style for all series in the Chart.

Individual series settings override common settings.

App.js
  • import React from 'react';
  • import Chart, {
  • Series,
  • CommonSeriesSettings,
  • HoverStyle
  • } from 'devextreme-react/chart';
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <Chart ... >
  • <Series ... >
  • <HoverStyle>
  • <!-- high priority -->
  • </HoverStyle>
  • </Series>
  • <CommonSeriesSettings ... >
  • <HoverStyle>
  • <!-- low priority -->
  • </HoverStyle>
  • </CommonSeriesSettings>
  • </Chart>
  • );
  • }
  • }
  •  
  • export default App;

To choose which series elements should be highlighted when a user pauses on a series, specify the hoverMode property. Just like hoverStyle, this property can be specified for all series in the Chart or for an individual series. Depending on the series type, the hoverMode property accepts different values. For information about them, visit the Series Types section of the API reference, choose the employed series type, and refer to its hoverMode property description.

App.js
  • import React from 'react';
  • import Chart, {
  • Series
  • } from 'devextreme-react/chart';
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <Chart ... >
  • <Series
  • type="bar"
  • hoverMode="allSeriesPoints" <!-- or "onlyPoint" | "allArgumentPoints" | "none" -->
  • />
  • <Series
  • type="line"
  • hoverMode="includePoints" <!-- or "nearestPoint" | "excludePoints" | "none" -->
  • />
  • </Chart>
  • );
  • }
  • }
  •  
  • export default App;

View Demo

See Also

API

You can switch a series into the hover state by calling its hover() method, and its clearHover() method to switch it back to the normal state. The same API is available for series points.

App.js
  • import React from 'react';
  •  
  • class App extends React.Component {
  • toggleSeriesHoverState (series) {
  • !series.isHovered() ? series.hover() : series.clearHover();
  • }
  • }
  •  
  • export default App;
See Also

Events

When a user pauses on a series, the Chart fires the seriesHoverChanged event that you can handle with a function. If the handling function is not going to be changed during the lifetime of the UI component, assign it to the onSeriesHoverChanged property when you configure the UI component. To check whether the pointer entered or left a series, call the isHovered() method in the series.

App.js
  • import React from 'react';
  • import Chart from 'devextreme-react/chart';
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <Chart
  • onSeriesHoverChanged={onSeriesHoverChanged}
  • >
  • </Chart>
  • );
  • }
  • }
  •  
  • function onSeriesHoverChanged (e) {
  • const series = e.target;
  • if (series.isHovered()) {
  • // Commands to execute when the series is hovered over
  • } else {
  • // Commands to execute when the series is hovered out
  • }
  • }
  •  
  • export default App;
NOTE
There are series that consist of points only, for example, bar or financial series. For these series, subscribe to the pointHoverChanged event instead of seriesHoverChanged (see the Point Hover Events topic).
See Also