score:1

Accepted answer

That feature is not available in Highstock by default, but as a workaround you can create a separate chart, only with navigator, position it and connect with the main chart. Example:

Highcharts.stockChart('container', {
    chart: {
        events: {
            load: createNavigatorChart
        }
    },
    yAxis: {
        startOnTick: false,
        endOnTick: false
    },
    ...
});

function createNavigatorChart(e) {
    var baseChart = e.target,
        baseYAxis = baseChart.yAxis[0];

    Highcharts.stockChart('customNavigator', {
        chart: {
            inverted: true,
            marginTop: baseChart.plotTop,
            marginBottom: baseChart.chartHeight - (baseChart.plotTop + baseChart.plotHeight)
        },
        rangeSelector: {
            enabled: false
        },
        credits: {
            enabled: false
        },

        xAxis: {
            min: baseYAxis.min,
            max: baseYAxis.max,
            reversed: false,
            visible: false,
            events: {
                setExtremes: function(e) {
                    baseYAxis.setExtremes(e.min, e.max, true, false);
                }
            }
        },
        title: {
            text: ''
        },
        yAxis: {
            visible: false
        },
        navigator: {
            enabled: true,
            xAxis: {
                reversed: false
            },
            series: [{
                type: 'scatter',
                color: 'transparent',
                data: [
                    [baseYAxis.min, 1],
                    [baseYAxis.max, 2]
                ]
            }]
        }
    });
}

Live demo: http://jsfiddle.net/BlackLabel/8ac9qbt6/

API Reference: https://api.highcharts.com/highstock/chart.events.load


Related Query

More Query from same tag