Angular Chart - Show and Hide a Series
The Chart provides an API for showing and hiding a series at runtime. The most common use-case for this API is to show or hide a series when a user clicks the chart legend. To implement this scenario, you need to handle the legendClick event in the following manner. The isVisible(), hide() and show() are methods of the Series object.
jQuery
$(function() { $("#chartContainer").dxChart({ // ... onLegendClick: function (e) { var series = e.target; if (series.isVisible()) { series.hide(); } else { series.show(); } } }); });
Angular
<dx-chart (onLegendClick)="legendClickHandler($event)"> </dx-chart>
import { DxChartModule } from "devextreme-angular"; // ... export class AppComponent { legendClickHandler (e) { const series = e.target; if (series.isVisible()) { series.hide(); } else { series.show(); } }; } @NgModule({ imports: [ // ... DxChartModule ], // ... })
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; if (series.isVisible()) { series.hide(); } else { series.show(); } } } } </script>
React
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; if (series.isVisible()) { series.hide(); } else { series.show(); } } } export default App;
A series can be hidden initially. For this, assign false to the visible property of the object that configures the series.
jQuery
$(function() { $("#chartContainer").dxChart({ // ... series: [{ // ... visible: false }, { // ... }] }); });
Angular
<dx-chart ... > <dxi-series [visible]="false" ...></dxi-series> </dx-chart>
import { DxChartModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxChartModule ], // ... })
Vue
<template> <DxChart ... > <DxSeries :visible="false" ... /> </DxChart> </template> <script> import DxChart, { DxSeries } from 'devextreme-vue/chart'; export default { components: { DxChart, DxSeries } } </script>
React
import React from 'react'; import Chart, { Series } from 'devextreme-react/chart'; class App extends React.Component { render() { return ( <Chart ... > <Series visible={false} /> </Chart> ); } } export default App;
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.