How can i hide all the Series in highcharts at a time

Question

I want to hide all the series's at a time , till now i use $.each hide all the series one by one but that degrading the performance i want hide all at a time..is there another way..? i had tried this..

$.each(series, function(index, series1) {
    series1.hide();
});

see http://stackoverflow.com/questions/8875626/hiding-groups-of-series-in-highcharts-and-jquery-how-to-get-acceptable-perfor or http://stackoverflow.com/questions/6604291/proper-way-to-remove-all-series-data-from-a-highcharts-chart — , May 18 '13 at 15:15
thanks Hob for quick your quick reply..that links helps me alot.. — sasi, May 20 '13 at 06:34

Mark · Accepted Answer · 2020-06-05T18:26:32.467

Instead of .hide use .setVisible(false, false). This will not trigger a redraw after every hide operation.

$(chart.series).each(function(){
    //this.hide();
    this.setVisible(false, false);
});
chart.redraw();

Working snippet:

$(function () {
    $('#container').highcharts({
    
        series: [{
            data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
        }, {
            data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
        }, {
            data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
        }, {
            data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
        }, {
            data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
        }, {
            data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
        }, {
            data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
        }, {
            data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
        }, {
            data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
        }, {
            data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
        }, {
            data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
        }, {
            data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
        }, {
            data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
        }, {
            data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
        }, {
            data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
        }, {
            data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
        }, {
            data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
        }, {
            data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
        }, {
            data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
        }, {
            data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
        }, {
            data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
        }, {
            data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
        }]
    });


    // the button action
    var chart = $('#container').highcharts(),
        $button = $('#button');
    $button.click(function() {
        var series = chart.series[0];
        if (series.visible) {
            $(chart.series).each(function(){
                //this.hide();
                this.setVisible(false, false);
            });
            chart.redraw();
            $button.html('Show series');
        } else {
            $(chart.series).each(function(){
                //this.show();
                this.setVisible(true, false);
            });
            chart.redraw();
            $button.html('Hide series');
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>
<button id="button">Hide series</button>

How can i hide all the Series in highcharts at a time

1 Answers1

Linked