Displaying Multiple Series In The Navigator Of An HighStock Chart

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

Solution 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
});

Solution 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
}]