Highstock navigator handles options do not work - highcharts

Question

I need some help for the handles in the navigator of highstock.
My set options do not work in my example:
http://jsfiddle.net/q1xpn6hL/
Please take a look at line 5 to 9:
borderColor: '#666',
width: 10,
height: 35,
borderRadius: 2,
borderWidth: 0.5
thanks a lot!

Answer 1

Those options are not supported. You would have to extend Highcharts to enable them. It is possible to override function that handles creating of handles.
Example: http://jsfiddle.net/v4vhy01j/
(function (H) {
H.wrap(H.Scroller.prototype, 'drawHandle', function (proceed, x, index) {
var scroller = this,
chart = scroller.chart,
renderer = chart.renderer,
elementsToDestroy = scroller.elementsToDestroy,
handles = scroller.handles,
handlesOptions = scroller.navigatorOptions.handles,
borderWidth = H.pick(handlesOptions.borderWidth, 1),
borderRadius = H.pick(handlesOptions.borderRadius, 0),
width = H.pick(handlesOptions.width, 9),
height = H.pick(handlesOptions.height, 16),
attr = {
fill: handlesOptions.backgroundColor,
stroke: handlesOptions.borderColor,
'stroke-width': borderWidth
},
tempElem;
// create the elements
if (!scroller.rendered) {
// the group
handles[index] = renderer.g('navigator-handle-' + ['left', 'right'][index])
.css({
cursor: 'ew-resize'
})
.attr({
zIndex: 4 - index
}) // zIndex = 3 for right handle, 4 for left
.add();
// the rectangle
tempElem = renderer.rect(-5, 9 - height/2, width, height, borderRadius)
.attr(attr)
.add(handles[index]);
elementsToDestroy.push(tempElem);
// the rifles
tempElem = renderer.path([
'M', -1.5, 13 - height/2,
'L', -1.5, 5 + height/2,
'M',
0.5, 13 - height/2,
'L',
0.5, 5 + height/2]).attr(attr)
.add(handles[index]);
elementsToDestroy.push(tempElem);
}
// Place it
handles[index][chart.isResizing ? 'animate' : 'attr']({
translateX: scroller.scrollerLeft + scroller.scrollbarHeight + parseInt(x, 10),
translateY: scroller.top + scroller.height / 2 - 8
});
});
}(Highcharts));

Answer 2

The Highstock navigator does not support all those options. Here's what the documentation says:
handles: Object
Options for the handles for dragging the zoomed area. Available options are backgroundColor (defaults to #ebe7e8) and borderColor (defaults to #b2b1b6).