Highstock navigator handles options do not work

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).