Free Trial Buy
    Your search did not match any results.
    Line Charts

    Hover Mode

    Documentation

    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.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    AngularJS

    ASP.NET Core

    ASP.NET MVC

    Backend API
    Copy to CodeSandBox
    Apply
    Reset
    <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> import { DxChart, DxCommonSeriesSettings, DxSeries, DxExport, DxLegend, DxPoint, } from 'devextreme-vue/chart'; import { yearSources, grossProductData } from './data.js'; export default { components: { DxChart, DxCommonSeriesSettings, DxSeries, DxExport, DxLegend, DxPoint, }, data() { return { yearSources, grossProductData, }; }, }; </script> <style> #chart { height: 440px; } </style>
    import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');
    <!DOCTYPE html> <html> <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=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.2.6/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.js"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </body> </html>
    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, }];
    window.config = { transpiler: 'plugin-babel', meta: { '*.vue': { loader: 'vue-loader', }, 'devextreme/localization.js': { 'esModule': true, }, }, paths: { 'npm:': 'https://unpkg.com/', }, map: { 'vue': 'npm:vue@3.2.47/dist/vue.esm-browser.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@1.0.15/index.js', 'mitt': 'npm:mitt/dist/mitt.umd.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@22.2.6/cjs', 'devextreme-vue': 'npm:devextreme-vue@22.2.6', 'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.5.20/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.1.72/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.43/dist/dx-gantt.js', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.11', '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@7.4.11/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', '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.4/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.4/parser-html.js', }, packages: { 'devextreme-vue': { main: 'index.js', }, 'devextreme': { defaultExtension: 'js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.11/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, }, }; System.config(window.config);