Is it possible to hide the navigator in highcharts at runtime?

Question

I am working on a highcharts project where we have a requirement to show/hide the navigator at runtime, depending on the value of an on screen filter.

We already add

Answer 1

Sebastian's answer is almost there, but it doesn't actually resize the chart itself, which I think is a requirement in this case because otherwise the navigator's space is completely wasted (not to mention the large blank space looks weird).

Here's a much simpler solution: add a "clipping" div with overflow: hidden, and then increase the height of the chart container sufficiently to push the navigator out so it gets hidden.

Demo

http://jsfiddle.net/vickychijwani/z4kgsfnp/

$(function () {
    
    var delta = 0;

    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
        // Create the chart
        var chart = $('#container').highcharts('StockChart', {
            
            chart: {
                events: {
                    load: function () {
                        // this is always constant after the chart is loaded
                        delta = this.scroller.navigatorGroup.getBBox().height + 30;
                    }
                }
            },

            rangeSelector: {
                selected: 1
            },

            title: {
                text: 'AAPL Stock Price'
            },

            series: [{
                name: 'AAPL',
                data: data,
                tooltip: {
                    valueDecimals: 2
                }
            }]
        }, function (chart) {
            $('#show-hide-nav-btn').click(function () {
                // to hide the navigator, increase chart height; the excess will be clipped by the outer clip div because its CSS is set to overflow: hidden
                var chartHeight = $('.highcharts-container').height();
                $('#container').height(chartHeight + delta);
                $('.highcharts-container').height(chartHeight + delta);
                
                // manually reflow
                chart.reflow();
                
                // negate delta for the next click
                delta = -delta;
            });

        });
    });

});

Show / hide navigator