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.
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:
Looks good Torstein
Currently it seems that it stopped working with the newest version of highcharts. Check http://jsfiddle.net/highcharts/jrXQe/.
@Lukasz Currently you can't set both, as the alignThreshold plugin overwrites the alignTicks setting. But in general, if you use a smaller tickPixelInterval, the alignment gets better because it is easier to find an axis resolution that fits both data sets: http://jsfiddle.net/highcharts/y6pbqk6q/2/
The alignTicks: false option seems to not be reflected when alignThreshold: true. http://jsfiddle.net/y6pbqk6q/1/
In the example, I would like the max value on the primary axis scale to be lower then 2500, because the max value in the data is < 1200
I've just spotted a weird behavior of this plugin, with some specific set of data.
It could make an axis display an abnormal number of decimals.
Here is my fiddle where you can notice it: http://jsfiddle.net/by1hjp9k/2/
You can comment/uncomment lignes 64 and 66 to change the value of aData and see the differences.
Any tip to fix that ? I don't want to use yAxis.labels.formatter as my axis can display greater values where decimals would not be expected to be displayed.