DevExtreme Vue - 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
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        onLegendClick: function (e) {
            var series = e.target;
            if (series.isVisible()) {
                series.hide();
            } else {
                series.show();
            }
        }
    });
});
Angular
HTML
TypeScript
<dx-chart
    (onLegendClick)="onLegendClick($event)">
</dx-chart>
import { DxChartModule } from 'devextreme-angular';
// ...
export class AppComponent {
    onLegendClick (e) {
        let series = e.target;
        if (series.isVisible()) {
            series.hide();
        } else {
            series.show();
        }
    };
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})

A series can be hidden initially. For this, assign false to the visible option of the object that configures the series.

jQuery
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        series: [{
            // ...
            visible: false
        }, {
            // ...
        }]
    });
});
Angular
HTML
TypeScript
<dx-chart ... >
    <dxi-series [visible]="false" ...></dxi-series>
</dx-chart>
import { DxChartModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})
See Also