How to position RangeSelector / zoom buttons at custom co-ordinates in Highstock

Question

I am using highstock charts and wish to move the zoom buttons (1m,2m,etc) to a different position.

I checked their API and there doesn\'t seem to be an option to do

Answer 1

At this moment it is not possible, but you can voice for it here http://highcharts.uservoice.com/forums/55896-general/suggestions/2436599-add-ability-to-change-rangeselector-position

Answer 2

This can be done by overriding the current render method and then moving the boxes after calling the actual render method to a position desired

var orgHighchartsRangeSelectorPrototypeRender = Highcharts.RangeSelector.prototype.render;
Highcharts.RangeSelector.prototype.render = function (min, max) {
    orgHighchartsRangeSelectorPrototypeRender.apply(this, [min, max]);
    var leftPosition = this.chart.plotLeft,
        topPosition = this.chart.plotTop+5,
        space = 2;
    this.zoomText.attr({
        x: leftPosition,
        y: topPosition + 15
    });
    leftPosition += this.zoomText.getBBox().width;
    for (var i = 0; i < this.buttons.length; i++) {
        this.buttons[i].attr({
            x: leftPosition,
            y: topPosition 
        });
        leftPosition += this.buttons[i].width + space;
    }
};

This code needs to be run before creating any chart

Positioning Zoom buttons | Highchart & Highstock @ jsFiddle