Highstock scrollbar not covering the whole length in multiple series

Question

I'm having an issue with the scrollbar in multiple series line chart where x-axis is date. Looks like the max length of the scrollbar is determined by the length of the first (older) series.

Although when pressing the 'All' button in range selector I can see all of the series, as the first series ends before the others, as soon as I touch the scrollbar the chart readjusts so that all I can see is the data contained in the first series' length period.

After that, if I want to see the series after the first one has ended, I need to drag the chart or click the 'All' button in range selector again.

I would really appreciate any help you could provide. Thanks in advance!

jsFiddle: http://jsfiddle.net/8DdP4/2/

Answer 1

Indeed, it's not supported to cover all series. Here you can find workarund.

With demo: http://jsfiddle.net/highcharts/SD4XN/

In short: in callback add series to the navigator on your own:

    function (chart) {
        chart.addSeries({
            data: seriesOptions[2].data,
            xAxis: 1,
            yAxis: 1
        });
    }

Answer 2

The scrollbar you refer to is called navigator.

There is a property in navigator called series which is defined as:

series: Object

Options for the navigator series. Available options are the same as any series, documented at plotOptions and series.

Unless data is explicitly defined on navigator.series, the data is borrowed from the first series in the chart.

You can see it here.

Im not sure if you can build your navigator from multiple series, i suppose it is posibles. In case it is not build build the navigator with the largest.