Incorrect data point value in highcharts navigator series when extending min and max date

Question

I recently updated highstock in which I used a chart that displayed values with an "extended range", i.e. where the min and max date is set outside the boundaries of the chart data.

After the update (which fixed some other bugs) I noticed that the last data point in the navigator series at the bottom is not correct according to the data in the actual series. As can be seen, there's an additional data point at the far right in the bottom that doesn't exist in the actual series.

Highstock navigator series extends data range

This can be viewed at http://jsfiddle.net/ab96pnjf/ as well

The code that creates the chart is the following

$(function () {
    var fromdate = new Date('2011-04-01');
    var todate = new Date('2012-05-21');
    var series = [{
        color: 'red',
        data: MSFT,
        name: 'MSFT'
    }];
    $('#container').highcharts('StockChart', {
        navigator: {
            series: {
                data: series[0].data,
                color: '#4572A7',
                fillOpacity: 0.05
            }
        },
        xAxis: {
            ordinal: false,
            min: fromdate.getTime(),
            max: todate.getTime()
        },
        legend: {
            enabled: true
        },
        series: series
    });
});

Now, if I change the navigator.series property to

navigator: {
    series: series
}

the navigator chart is correct, as in the values are cut off at the right when there is no more data available. This is what I want; the only problem is that the color is the same as the series, and I want it to use my custom color, as in the first example.

So how do I configure HighStock to cut off the last value in the navigator chart while at the same time being able to use a custom color for the series?

In the navigator empty values have "last point value", indeed, so use navigator as you mentioned. It is the best way. — Sebastian Bochan
Use navigator as I mentioned? How would I get a custom color on the navigator series in that case? — Patrick
You can use Highcharts.merge which combine objects. Example: jsfiddle.net/9fna18fo — Sebastian Bochan

Patrick Patrick · Accepted Answer · 2015-01-14T12:54:59

Hm, well I have a "quick fix" to this problem, as I am not sure how I would configure highcharts to do it for me.

Using jQuery I can extract the line in the navigator, since highcharts (at least) applies a class to the series. It sets the class name for all series including the one in the "main area", but the last one is the navigator series it seems, or every odd series if there is more than one highcharts chart in the document.

$(function () {
    // ... as previous
    $('#container').highcharts('StockChart', {
        navigator: {
            series: series
        },
         // ... as previous
    });

    // added code to apply a custom style to the navigator line diagram
    var navseries = $('.highcharts-series:last').children();
    // can be undefined if the series has no data points
    if (navseries) {
        navseries.css('stroke', '#4572A7');
        navseries.css('strokeWidth', 1);
        navseries.css('fillOpacity', 0.05);
    }
});

Incorrect data point value in highcharts navigator series when extending min and max date

1 Answers