React 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.

jQuery
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        series: {
            hoverStyle: {
                // high priority
            }
        },
        commonSeriesSettings: {
            hoverStyle: {
                // low priority
            }
        }
    });
});
Angular
HTML
TypeScript
<dx-chart ... >
    <dxi-series ... >
        <dxo-hover-style>
            <!-- high priority -->
        </dxo-hover-style>
    </dxi-series>
    <dxo-common-series-settings ... >
        <dxo-hover-style>
            <!-- low priority -->
        </dxo-hover-style>
    </dxo-common-series-settings>
</dx-chart>
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxChart ... >
        <DxSeries ... >
            <DxHoverStyle>
                <!-- high priority -->
            </DxHoverStyle>
        </DxSeries>
        <DxCommonSeriesSettings ... >
            <DxHoverStyle>
                <!-- low priority -->
            </DxHoverStyle>
        </DxCommonSeriesSettings>
    </DxChart>
</template>

<script>
import DxChart, {
    DxSeries,
    DxCommonSeriesSettings,
    DxHoverStyle
} from 'devextreme-vue/chart';

export default {
    components: {
        DxChart,
        DxSeries,
        DxCommonSeriesSettings,
        DxHoverStyle
    }
}
</script>
React
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.

jQuery
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        series: [{
            // ...
            type: "bar",
            hoverMode: "allSeriesPoints" // or "onlyPoint" | "allArgumentPoints" | "none"
        }, {
            type: "line",
            hoverMode: "includePoints" // or "nearestPoint" | "excludePoints" | "none"
        }]
    });
});
Angular
HTML
TypeScript
<dx-chart ... >
    <dxi-series
        type="bar"
        hoverMode="allSeriesPoints"> <!-- or "onlyPoint" | "allArgumentPoints" | "none" -->
    </dxi-series>
    <dxi-series
        type="line"
        hoverMode="includePoints"> <!-- or "nearestPoint" | "excludePoints" | "none" -->
    </dxi-series>
</dx-chart>
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxChart ... >
        <DxSeries
            type="bar"
            hover-mode="allSeriesPoints" <!-- or "onlyPoint" | "allArgumentPoints" | "none" -->                
        />
        <DxSeries
            type="line"
            hover-mode="includePoints" <!-- or "nearestPoint" | "excludePoints" | "none" -->
        />
    </DxChart>
</template>

<script>
import DxChart, {
    DxSeries
} from 'devextreme-vue/chart';

export default {
    components: {
        DxChart,
        DxSeries
    }
}
</script>
React
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.

jQuery
JavaScript
var toggleSeriesHoverState = function (series) {
    !series.isHovered() ? series.hover() : series.clearHover();        
}
Angular
TypeScript
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    toggleSeriesHoverState (series) {
        !series.isHovered() ? series.hover() : series.clearHover();
    }
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})
Vue
App.vue

<script>
export default {
    methods: {
        toggleSeriesHoverState (series) {
            !series.isHovered() ? series.hover() : series.clearHover();
        }
    }
}
</script>
React
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.

jQuery
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        onSeriesHoverChanged: function (e) {
            var 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
            }
        }
    });
});
Angular
HTML
TypeScript
<dx-chart
    (onSeriesHoverChanged)="onSeriesHoverChanged($event)">
</dx-chart>
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    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
        }
    }
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxChart
        @series-hover-changed="onSeriesHoverChanged"
    >
    </DxChart>
</template>

<script>
import DxChart from 'devextreme-vue/chart';

export default {
    components: {
        DxChart
    },
    methods: {
        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
            }
        }
    }
}
</script>
React
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;

If you are going to change the event handler at runtime or if you need to attach several handlers to the seriesHoverChanged event, subscribe to this event using the on(eventName, eventHandler) method. This approach is more typical of jQuery.

JavaScript
var seriesHoverChangedHandler1 = function (e) {
    var series = e.target;
    // First handler of the "seriesHoverChanged" event
};

var seriesHoverChangedHandler2 = function (e) {
    var series = e.target;
    // Second handler of the "seriesHoverChanged" event
};

$("#chartContainer").dxChart("instance")
    .on("seriesHoverChanged", seriesHoverChangedHandler1)
    .on("seriesHoverChanged", seriesHoverChangedHandler2);
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