score:9

Accepted answer

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

score:4

it seems as if it is the easiest way to update the navigator.enabled option:

chart.update({navigator: { enabled: false }})

score:5

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>


Related Query

More Query from same tag