Displaying multiple series in the navigator of an HighStock chart

Question

I would like to create an HighStock chart containing a navigator component displaying multiple series, being the same series displayed in the main graph. It seems that this feature is not supported in HighStock, as only one single series is allowed. Has anyone faced this problem and managed to find a viable solution/alternative?

Answer 1

Multiple series in navigator are not oficially supported, so only this "hack" which you use display multiply series in navigator. Example: http://jsfiddle.net/6fFwM/ This feature is requested in our system here (http://highcharts.uservoice.com/forums/55896-general/suggestions/2361925-allow-navigator-to-have-multiple-data-series), so you can vote for it.

window.chart.addSeries({
        name : "",
        xAxis: 0,
        yAxis: 1,
        type: "line",
        enableMouseTracking: false,
        data : new_data,
        showInLegend:false
});

Answer 2

From Highstock 5 this is now officially supported. You can globally or specifically for each series specify showInNavigator: true (API). A related option is navigatorOptions (API) which will affect the series that have the showInNavigator set to true.

For example: (JSFiddle):

plotOptions: {
    series: {
        showInNavigator: true // Global value
    }
},

series: [{ // This series has no value set and will use global
    name: 'MSFT',
    data: MSFT
},
{
    name: 'GOOGL',
    showInNavigator: false, // Individual series value
    data: GOOGL
},
{
    name: 'ADBE',
    showInNavigator: true, // Individual series value
    navigatorOptions: { // Specific values that affect the series in the navigator only
        type: 'line',
        color: 'red'
    },
    data: ADBE
}]