Highcharts/Highstock navigator won't reflect main chart data

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.

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?

Answers


As of 2016, this is still unsupported functionality.


Need Your Help

Weird black line on top of list view

android listview

I am creating a layout with a ListView and at the very top of the list there is this weird black line that I can't seem to figure out how to get rid of! It's part of the ListView because it moves ...

Can't update GAE website - another transaction ongoing

google-app-engine

So I have a website I'm making that I need to be uploaded by Friday. The last version of it that I made I was able to upload to a Google App Engine domain that I created for it no problem. In fact,...