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
$(function() {
$("#chartContainer").dxChart({
// ...
series: {
hoverStyle: {
// high priority
}
},
commonSeriesSettings: {
hoverStyle: {
// low priority
}
}
});
});Angular
<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
<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
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
$(function() {
$("#chartContainer").dxChart({
// ...
series: [{
// ...
type: "bar",
hoverMode: "allSeriesPoints" // or "onlyPoint" | "allArgumentPoints" | "none"
}, {
type: "line",
hoverMode: "includePoints" // or "nearestPoint" | "excludePoints" | "none"
}]
});
});Angular
<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
<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
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;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
var toggleSeriesHoverState = function (series) {
!series.isHovered() ? series.hover() : series.clearHover();
}Angular
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
toggleSeriesHoverState (series) {
!series.isHovered() ? series.hover() : series.clearHover();
}
}
@NgModule({
imports: [
// ...
DxChartModule
],
// ...
})Vue
<script>
export default {
methods: {
toggleSeriesHoverState (series) {
!series.isHovered() ? series.hover() : series.clearHover();
}
}
}
</script>React
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
$(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
<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
<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
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;jQuery
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.
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);