CODEWITHSUNDEEP
javascripthighcharts
Anto
Anto

Reputation: 4305

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 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?

Upvotes: 8

Views: 10190

Answers (2)

Halvor Holsten Strand
Halvor Holsten Strand

Reputation: 20536

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

Upvotes: 10

Sebastian Bochan
Sebastian Bochan

Reputation: 37588

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

Upvotes: 10

Related Questions