jQuery PieChart - User Interaction
A user can interact with the legend by pausing on legend items. When a user does this, the point(s) that corresponds to the legend item being paused on becomes highlighted. To disable this capability, set the hoverMode property to "none".
jQuery
$(function() {
$("#pieChartContainer").dxPieChart({
// ...
legend: {
hoverMode: "none"
}
});
});Angular
<dx-pie-chart>
<dxo-legend hoverMode="none"></dxo-legend>
</dx-pie-chart>
import { DxPieChartModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxPieChartModule
],
// ...
})Vue
<template>
<DxPieChart ... >
<DxLegend hover-mode="none"/>
</DxPieChart>
</template>
<script>
import DxPieChart, {
DxLegend
} from 'devextreme-vue/pie-chart';
export default {
components: {
DxPieChart,
DxLegend
}
}
</script>React
import React from 'react';
import PieChart, {
Legend
} from 'devextreme-react/pie-chart';
class App extends React.Component {
render() {
return (
<PieChart ... >
<Legend hoverMode="none" />
</PieChart>
);
}
}Pausing on a legend item causes the pointHoverChanged event to raise. Refer to the Series Hover Events topic for details on handling this event.
In addition, a user can click legend items. The UI component does not react to this by default, 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
$(function() {
$("#pieChartContainer").dxPieChart({
// ...
onLegendClick: function (e) {
var points = e.points;
// Event handling commands go here
}
});
// ===== or =====
var legendClickEventHandler1 = function (e) {
var points = e.points;
// First handler of the "legendClick" event
};
var legendClickEventHandler2 = function (e) {
var points = e.points;
// Second handler of the "legendClick" event
};
$("#pieChartContainer").dxPieChart("instance")
.on("legendClick", legendClickEventHandler1)
.on("legendClick", legendClickEventHandler2);
});Angular
<dx-pie-chart ...
(onLegendClick)="onLegendClick($event)">
</dx-pie-chart>
import { DxPieChartModule } from "devextreme-angular";
// ...
export class AppComponent {
onLegendClick (e) {
let points = e.points;
// Event handling commands go here
}
}
@NgModule({
imports: [
// ...
DxPieChartModule
],
// ...
})Vue
<template>
<DxPieChart ...
@legend-click="onLegendClick">
</DxPieChart>
</template>
<script>
import DxPieChart from 'devextreme-vue/pie-chart';
export default {
components: {
DxPieChart
},
methods: {
onLegendClick(e) {
let points = e.points;
// Event handling commands go here
}
}
}
</script>React
import React from 'react';
import PieChart from 'devextreme-react/pie-chart';
class App extends React.Component {
render() {
return (
<PieChart ...
onLegendClick={onLegendClick}>
</PieChart>
);
}
}
function onLegendClick(e) {
let points = e.points;
// Event handling commands go here
}