Vue Chart - User Interaction

A user can interact with the legend by pausing on legend items. When a user does this, the series that corresponds to the legend item being paused on becomes highlighted. To disable this capability, set the hoverMode property to "none".

jQuery
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        legend: {
            hoverMode: "none"
        }
    });
});
Angular
HTML
TypeScript
<dx-chart>
    <dxo-legend hoverMode="none"></dxo-legend>
</dx-chart>
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxChart ... >
        <DxLegend
            hover-mode="none"
        />
    </DxChart>
</template>

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

export default {
    components: {
        DxChart,
        DxLegend
    }
}
</script>
React
App.js
import React from 'react';
import Chart, {
    Legend
} from 'devextreme-react/chart';

class App extends React.Component {
    render() {
        return (
            <Chart ... >
                <Legend
                    hoverMode="none"
                />
            </Chart>
        );
    }
}

export default App;

Series that consist of several elements rather than just series points (Range Area, all line and area series) can be highlighted without the series points. For this, set the hoverMode property to "excludePoints". For other series, this setting has the same effect as "none".

jQuery
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        legend: {
            hoverMode: "excludePoints"
        }
    });
});
Angular
HTML
TypeScript
<dx-chart>
    <dxo-legend hoverMode="excludePoints"></dxo-legend>
</dx-chart>
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxChart ... >
        <DxLegend
            hover-mode="excludePoints"
        />
    </DxChart>
</template>

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

export default {
    components: {
        DxChart,
        DxLegend
    }
}
</script>
React
App.js
import React from 'react';
import Chart, {
    Legend
} from 'devextreme-react/chart';

class App extends React.Component {
    render() {
        return (
            <Chart ... >
                <Legend
                    hoverMode="excludePoints"
                />
            </Chart>
        );
    }
}

export default App;

Pausing on a legend item causes the seriesHoverChanged event to raise. Refer to the Series Hover Events topic for details on handling this event.

View Demo

In addition, a user can click legend items. By default, the UI component does not react to a click, but you can instruct it to by handling the legendClick event. If the handling function is not going to be changed at runtime, assign it to the onLegendClick property when you configure the UI component. Otherwise, or if you need several handlers for the legendClick event, subscribe to it using the on(eventName, eventHandler) method. This approach is more typical of jQuery.

jQuery
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        onLegendClick: function (e) {
            var series = e.target;
            // Event handling commands go here
        }
    });

    // ===== or =====
    var legendClickEventHandler1 = function (e) {
        var series = e.target;
        // First handler of the "legendClick" event
    };

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

    $("#chartContainer").dxChart("instance")
        .on("legendClick", legendClickEventHandler1)
        .on("legendClick", legendClickEventHandler2);
});
Angular
HTML
TypeScript
<dx-chart
    (onLegendClick)="onLegendClick($event)">
</dx-chart>
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    onLegendClick (e) {
        let series = e.target;
        // Event handling commands go here
    }
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxChart
        @legend-click="legendClickHandler($event)"
        ... >
    </DxChart>
</template>

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

export default {
    components: {
        DxChart
    },
    methods: {
        legendClickHandler(e) {
            const series = e.target;
            // Event handling commands go here
        }
    }
}
</script>
React
App.js
import React from 'react';
import Chart from 'devextreme-react/chart';

class App extends React.Component {
    render() {
        return (
            <Chart
                onLegendClick={this.legendClickHandler}
                ... >
            </Chart>
        );
    }

    legendClickHandler(e) {
        const series = e.target;
        // Event handling commands go here
    }
}

export default App;
See Also
jQuery
Angular
Vue
React