CODEWITHSUNDEEP
javascripthighcharts
BeingSuman
BeingSuman

Reputation: 3323

What is the simple way to hide series data in HighStocks Navigator

Am working on Highstocks and want to hide series data that is displayed in Navigator. Tried few approaches and Googled enough but no luck.

Here is the sample JSFiddle link

The simple approach i tried was :

series: [{
        name: 'USD to EUR',
        data: usdeur,
        showInNavigator: false
    }]

This showInNavigator configuration removes X-Axis co-ordinates also from navigator which i want to retain.

I did try the solution provided in this thread but nothing worked.

Any help would appreciated.

Upvotes: 0

Views: 513

Answers (1)

Deep 3015
Deep 3015

Reputation: 10075

Use CSS to hide the scrollbar. showInNavigator: false will hide navigator.

Highcharts.stockChart('container', {
    series: [{
        name: 'USD to EUR',
        data: usdeur,
        showInNavigator: false
    }]
});
.highcharts-scrollbar{
  display:none
}
<div id="container" style="height: 400px; min-width: 600px"></div>

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript" src="https://www.highcharts.com/samples/data/usdeur.js"></script>

Another Update

Highcharts.stockChart('container', {

    navigator: {
        series: {
            color: '#FFFFFF',
            lineWidth: 0
        }
    },

    rangeSelector: {
        selected: 1
    },

    series: [{
        name: 'USD to EUR',
        data: usdeur
    }]
});
<div id="container" style="height: 400px; min-width: 600px"></div>

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript" src="https://www.highcharts.com/samples/data/usdeur.js"></script>

Upvotes: 1

Related Questions