Vue 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

<template> <DxChart id="chart" :data-source="grossProductData" :sticky-hovering="false" title="Great Lakes Gross State Product" > <DxCommonSeriesSettings type="spline" argument-field="state" hover-mode="includePoints" > <DxPoint hover-mode="allArgumentPoints"/> </DxCommonSeriesSettings> <DxSeries v-for="year in yearSources" :key="year.value" :value-field="year.value" :name="year.name" /> <DxLegend vertical-alignment="bottom" horizontal-alignment="center" hover-mode="excludePoints" /> <DxExport :enabled="true"/> </DxChart> </template> <script setup lang="ts"> import { DxChart, DxCommonSeriesSettings, DxSeries, DxExport, DxLegend, DxPoint, } from 'devextreme-vue/chart'; import { yearSources, grossProductData } from './data.ts'; </script> <style> #chart { height: 440px; } </style>

export const yearSources = [ { value: 'year2024', name: '2024' }, { value: 'year2020', name: '2020' }, { value: 'year2016', name: '2016' }, ]; export const grossProductData = [{ 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, }];

import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');

<!DOCTYPE html> <html 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" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="./bundle.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> <script src="bundles/vendor/vue.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>

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.