Geek Answers Handbook

Can I put zoom buttons in highcharts / highstock?

As the name says, we have several diagrams that have two y axes on the left, and as a result, if the screen becomes smaller, then the zoom buttons overlap the range inputs.

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

thanks

enter image description here

I can not find anything in the API to offer it http://api.highcharts.com/highstock#rangeSelector

+4
source share
3 answers

Check this out: How to position RangeSelector / zoom buttons in custom coordinates 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; } };
+3
source

By default, the reset scale button is located on the right. You can change the position 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 .

+8
source

I cannot find any parameters for moving the buttons, but you can move the range inputs using:

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

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

Perhaps you can move the input fields to the left or delete them altogether?

0
source

More articles:


All Articles