Highcharts/Highstock navigator won't reflect main chart data

Question

I am trying to represent multi-series events on a timeline using a column chart in Highstock. For some reason the navigator won't show the data from all series in the main chart. It appears to be tied to a single series, but I can't find anything in the API reference that would make it show all the data.

enter image description here

jsFiddle: jsFiddle Example

Highcharts.stockChart configuration:

chart = new Highcharts.StockChart({
    chart: {
        alignTicks: true,
        animation: true,
        backgroundColor: '#fff',
        events: {
            load: function (e) {
                this.xAxis[0].setExtremes(1398859200000, 1414753200000);
            }
        },
        ignoreHiddenSeries: true,
        renderTo: $('#chart')[0]
    },
    colors: [
        '#89f1a4',
        '#68d9f7',
        '#9eb9ef',
        '#c49eef'
    ],
    credits: {
        enabled: false
    },
    legend: {
        align: 'center',
        borderWidth: 0,
        enabled: true,
        navigation: {
            animation: true
        },
        shadow: false,
        verticalAlign: 'top'
    },
    rangeSelector: {
        enabled: false
    },
    scrollbar: {
        enabled: false
    },
    title: {
        text: ''
    },
    tooltip: {
        crosshairs: false,
        shared: true
    },
    navigator: {
        height: 40,
        margin: 10,
        maskFill: 'rgba(233, 233, 233, 0.7)',
        outlineWidth: 0,
        series: {
            type: 'column',
            stacking: 'normal',
            dataGrouping: {
                enabled: true,
                forced: true,
                units: [[
                    'week',
                    [1]
                ]]
            }
        }
    },
    plotOptions: {
        series: {
            showInLegend: true,
            stacking: 'normal',
            dataGrouping: {
                enabled: true,
                forced: true,
                units: [[
                    'week',
                    [1]
                ]]
            }
        }
    },
    yAxis: {
        gridLineWidth: 0,
        labels: {
            enabled: false
        },
        max: 24,
        min: 0,
        ordinal: false
    },
    xAxis: {
        dateTimeLabelFormats: {
            millisecond: '%H:%M:%S.%L',
            second: '%H:%M:%S',
            minute: '%H:%M',
            hour: '%H:%M',
            day: '%e. %b',
            week: '%b %Y',
            month: '%b %Y',
            year: '%Y'
        },
        labels: {
            style: {
                color: '#ccc'
            }
        },
        minRange: 604800000,
        ordinal: false
    },
    series: data
});

My question: How do I get the Navigator to reflect the complete data from the main chart?

It's not supported. See here: highcharts.uservoice.com/forums/55896-general/suggestions/…, your best bet will be to do this: stackoverflow.com/questions/15068435/… — Mark
Brilliant - shouldda thought of that. Thanks - post as answer and I'll accept — Alex McMillan

Alex McMillan Alex McMillan · Accepted Answer · 2016-08-23T03:59:45

0

votes

As of 2016, this is still unsupported functionality.

Highcharts/Highstock navigator won't reflect main chart data

1 Answers