DevExtreme jQuery - 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
],
// ...
})Feedback