React 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;
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.