JavaScript/jQuery PieChart - Show and Hide a Point
The PieChart provides an API for showing and hiding a series point at runtime. This API is commonly used to show or hide a series point when a user clicks the chart legend. You need to handle the legendClick event as shown below to implement this scenario. The isVisible(), hide() and show() are Point object methods.
jQuery
JavaScript
$(function() {
$("#pieChartContainer").dxPieChart({
onLegendClick: function (e) {
var points = e.points;
// for a single-series PieChart
points[0].isVisible() ? points[0].hide() : points[0].show();
/* for a multi-series PieChart
points.forEach(function (point) {
point.isVisible() ? point.hide() : point.show();
});
*/
}
});
});Angular
HTML
TypeScript
<dx-pie-chart
(onLegendClick)="onLegendClick($event)">
</dx-pie-chart>
import { DxPieChartModule } from "devextreme-angular";
// ...
export class AppComponent {
onLegendClick (e) {
let points = e.points;
// for a single-series PieChart
points[0].isVisible() ? points[0].hide() : points[0].show();
/* for a multi-series PieChart
points.forEach(function (point) {
point.isVisible() ? point.hide() : point.show();
});
*/
};
}
@NgModule({
imports: [
// ...
DxPieChartModule
],
// ...
})Vue
App.vue
<template>
<DxPieChart
@legend-click="onLegendClick">
</DxPieChart>
</template>
<script>
import DxPieChart from 'devextreme-vue/pie-chart';
export default {
components: {
DxPieChart
},
methods: {
onLegendClick({ points }) {
// for a single-series PieChart
points[0].isVisible() ? points[0].hide() : points[0].show();
/* for a multi-series PieChart
points.forEach(function (point) {
point.isVisible() ? point.hide() : point.show();
});
*/
}
}
}
</script>React
App.js
import React from 'react';
import PieChart from 'devextreme-react/pie-chart';
const onLegendClick = ({ points }) => {
// for a single-series PieChart
points[0].isVisible() ? points[0].hide() : points[0].show();
/* for a multi-series PieChart
points.forEach(function (point) {
point.isVisible() ? point.hide() : point.show();
});
*/
};
const App = () => {
return (
<PieChart
onLegendClick={onLegendClick}>
</PieChart>
);
};
export default App;Feedback