multiple axis alignment control
There seems to be a lot of posts in the forum asking how to align the 0 values of multiple y axes.
My thoughts for implementing this:
Chart level option (like alignTicks): alignBaseline: boolean (default: true)
Axis level option: baseline:(numeric) (default: 0)
By default 0 is the baseline for each axis, and by default the 0 value for each axis is aligned.
The user can set the baseline to any other set of numbers that should be aligned, or turn off alignment.
New experimantal implementation for Highcharts 4.1 is available at http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/studies/alignthresholds/.
This implementation looks a the threshold on the primary axis (the one first defined), and aligns the threshold of any following axis to that of the primary axis.
How to fix the y axis for multiple line in highchart. In my case, each line is coming with its own y axis. how to handle this >
@torstein Any update on the problem of "Uncaught RangeError: Maximum call stack size exceeded" ?
the implementation does not work with bar charts, it shows empty chart with following console error:
"Uncaught RangeError: Maximum call stack size exceeded"
on line 48 of the plugin code.
Yes, it looks that way from the jsFiddle demo.
this experimantal implementation works with Highcharts 4.2.0 ?
Genís Díaz commented
I'm using this plugin, align correctly but when I want to hide or show some series, there is a error "Uncaught RangeError: Maximum call stack size exceeded".
it doesn't work properly when height of the container is changeable. pls see below example:
@Lukasz, if you start zooming in the 2015 where there is huge difference, the 0 alignment is lost:
if you start zooming, the 0 alignment is lost:
Thanks a lot for the Plugin.
I found two errors.
1st: It didn't work with axis that didn't have visible series.
2nd: In some cases it threw a max stack size exceeded error because it went into an endless loop.
Here my working solution...
To avoid the first error, it takes the first yAxis that has visible series as the primaryAxis.
If the primaryIndex is higher than the current axis index, it calculates the new tick positions according to the difference between the primaryIndex and the primary tickPositions.length.
Try that http://jsfiddle.net/7hxozsgq/5/ workaround.
Here is an example:
your implementation works fine. Just encounter some issues once user can zoom on the chart. It Any idea on how to force to always display the "0" in the chart?
@Ronny It will not work with fixed tick positions, because we need to be able to modify the ticks in order to align the axes. Currently it only runs on the second axis. In order to make it run both ways, we need to do some restructuring and make the whole logic recursive, because when the first axis is handled, we don't know the extremes of the second one.
Ronny Løvtangen commented
On my secondary yAxis I have specified tickPositions like this:
tickPositions: [-5, 0, 5, 10, 15, 20, 25]
The expremential implementation works only if I remove this. With tickPositions set, the 'adjustTickAmount' function from the plugin is only called with the primary yAxis, never with the secondary yAxis
Workaround: http://jsfiddle.net/1odzfmgL/37/ works for inverted and non inverted charts.
As described in: http://forum.highcharts.com/highcharts-usage/alignthreshold-addon-that-supports-either-axis-t33380/
Is it possible to have this work with either axis as the primary depending on which is closer to the center? Always using the first axis listed means that the axes will not be aligned if it would mean cutting data off on the other series. Demonstrated at the following jsfiddle: