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

highcharts

Solution

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

Problem

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!

Original source