CODEWITHSUNDEEP
javascriptchartshighcharts
hcharge
hcharge

Reputation: 1246

Is it possible to position the zoom buttons in highcharts/highstock?

As the title says, we have some charts that have two y axis on the left, and as a consequence if the screen is made smaller then the zoom buttons overlap the range inputs.

Ideally I would want the zoom buttons to always align to the left of the chart (including axis)

Thanks

enter image description here

I can't find anything in the API to suggest it's possible http://api.highcharts.com/highstock#rangeSelector

Upvotes: 5

Views: 9906

Answers (3)

user1134181
user1134181

Reputation:

By default, the scale reset button located on the right. You can change position by using this code, for example:

...
chart: {
    zoomType: 'x, y',
    resetZoomButton: {
        position: {
            align: 'left', // right by default
            verticalAlign: 'top', 
            x: 10,
            y: 10
        },
        relativeTo: 'chart'
    }
}    
...

Live demo.

Upvotes: 14

Lorenzo
Lorenzo

Reputation: 797

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

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;
    }
};

Upvotes: 3

SteveP
SteveP

Reputation: 19093

I can't find any options to move the buttons, but you can move the range inputs using:

        rangeSelector: {
            inputPosition: {
                x: 100
            }
        },

http://api.highcharts.com/highstock#rangeSelector.inputPosition.

Parhaps you can move the input boxes to the left hand side, or remove them altogether ?

Upvotes: 0

Related Questions