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/show/hide various series of data - but I cannot find an api call which will allow me to dynamically hide the navigator at runtime? Does anyone know of a way to do this - I am reluctant to reload the whole chart unless I have to.

Thanks folks!

Answer 1

You can hide all particular SVG navigator elements by hide() function.

http://jsfiddle.net/dJbZT/1

$('#btn').toggle(function () {
            chart.scroller.xAxis.labelGroup.hide();
            chart.scroller.xAxis.gridGroup.hide();
            chart.scroller.series.hide();
            chart.scroller.scrollbar.hide();
            chart.scroller.scrollbarGroup.hide();
            chart.scroller.navigatorGroup.hide();
            $.each(chart.scroller.elementsToDestroy, function (i, elem) {
                elem.hide();
            })
        }, function () {
            chart.scroller.xAxis.labelGroup.show();
            chart.scroller.xAxis.gridGroup.show();
            chart.scroller.series.show();
            chart.scroller.navigatorGroup.show();
            chart.scroller.scrollbar.show();
            chart.scroller.scrollbarGroup.show();
            $.each(chart.scroller.elementsToDestroy, function (i, elem) {
                elem.show();
            })
        });

Answer 2

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;
            });

        });
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>

<button id="show-hide-nav-btn">Show / hide navigator</button>

<!-- this div clips the container so the navigator can be hidden from view -->
<div id="clip" style="height: 500px; overflow: hidden;">
    <div id="container" style="height: 500px; min-width: 500px"></div>
</div>