Highstocks how to use hidden navigator with async loading - highcharts

Question

Consider the Highstocks async data loading example. I want to hide the preview and show just the scroll bar. So I set enabled to false in the chart configuration:
navigator: {
enabled: false,
adaptToUpdatedData: false,
...
This will cause the adaptToUpdatedData option not to work as described, i.e., when zooming the width of the scroll bar will be always 100%. Is it possible to keep the same behavior of the demo while hiding the preview?

Answer 1

You could visually hide all the elements of the navigator instead of disabling it.
For example (JSFiddle):
$('#container').highcharts('StockChart', {
navigator : {
adaptToUpdatedData: false,
height: 0,
handles: {
backgroundColor: 'transparent',
borderColor: 'transparent'
},
series : {
data : data
},
xAxis: {
labels: {
enabled: false
}
}
}
// ...
});
You might notice that the cursor still changes where the handles would be. If you want to get rid of this you could prevent the drawing of the handles all together.
For example (JSFiddle):
(function (H) {
H.wrap(H.Scroller.prototype, 'drawHandle', function (proceed, x, index) {
});
}(Highcharts));
$('#container').highcharts('StockChart', {
navigator : {
adaptToUpdatedData: false,
height: 0,
series : {
data : data
},
xAxis: {
labels: {
enabled: false
}
}
}
// ...
});