Geek asks and answers

How to position RangeSelector / zoom buttons at user coordinates in Highstock

I use high-performance charts and want to move the zoom buttons (1 m, 2 m, etc.) to another position.

I checked their APIs and there seems to be no way to do this right now. The source code also assumes that this location is hard-coded, and therefore, I don’t think I can easily enter a position using some undocumented property

Senior background source

Highcharts.RangeSelector.prototype.render = function (min, max) {
...
rangeSelector.zoomText = renderer.text(lang.rangeSelectorZoom, plotLeft, chart.plotTop - 10)
                .css(options.labelStyle)
                .add();

// button starting position
buttonLeft = plotLeft + rangeSelector.zoomText.getBBox().width + 5;
...
}
+5
source share
2 answers

This can be done by overriding the current rendering method, and then moving the fields after calling the actual rendering method to the desired position

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

| Highchart Highstock @jsFiddle

+8

More articles:


All Articles