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.
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.
One thing I am noticing is that if you hide one of the series, the remaining y axis does not adjust accordingly.
If you hide both series, and then show only one, the axis is scaled appropriately. But once you show both series, and then hide one, the axis retains the scaling for the hidden series, which is counter to highcharts normal behavior.
Thanks for your response!
Altho it does not explain to me why the 'maximum' does not get rounded to the same absolute value, I'll keep it in mind. It seems this solution posted here works well enough - we can live without tickPixelnterval, and some testing did not uncover any other problems as of yet.
good work, thanks.
It's still not perfect, as it disregards the tickPixelInterval setting.
For your solution about setting min and max explicitly. The docs explains why Highcharts adds padding to your setting: http://api.highcharts.com/highcharts#yAxis.min