Highcharts navigator handle height

Question

Is there any way to increase the height of the handles in the highstock navigator component? Right now, the only options available are to change the color and the border-color. How about the height and width of the handles?

http://api.highcharts.com/highstock#navigator.handles

Thanks,

Vikas.

Answer 1

You can wrap drawHandles function and modify it to have increased height.

var height = 20; 

(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,
            attr = {
                fill: handlesOptions.backgroundColor,
                stroke: handlesOptions.borderColor,
                    'stroke-width': 1
            },
            tempElem;

        // create the elements
        if (!scroller.rendered) {
            // the group
            handles[index] = renderer.g('navigator-handle-' + ['left', 'right'][index])
                .css({
                cursor: 'e-resize'
            })
                .attr({
                zIndex: 4 - index
            }) // zIndex = 3 for right handle, 4 for left
            .add();

            // the rectangle
            tempElem = renderer.rect(-4.5, 0, 9, height, 0, 1)
                .attr(attr)
                .add(handles[index]);
            elementsToDestroy.push(tempElem);

            // the rifles
            tempElem = renderer.path([
                'M', -1.5, 4,
                'L', -1.5, 12,
                'M',
            0.5, 4,
                'L',
            0.5, 12]).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));

http://jsfiddle.net/za68w54r/