Highcharts: zero-align y-axes
Highcharts extension that zero-aligns the scales of primary and secondary y-axes.
Description
The extension adds a new tick positioner that aligns the scales of primary and secondary y-axes. Defaults to a minimal tick positioner in case of a single y-axis. Axes are aligned as follows:
All-positive scales
i.e. scales whose min max values are both +ve.
Alignment: Zero (0) set at the bottom of the chart. Consider the example:
| Original Chart | Extended Chart |
|---|---|
 |
 |
All-negative scales
i.e. scales whose min max values are both -ve.
Alignment: Zero (0) set at the top of the chart.
At least one y-axis with both -ve and +ve values
i.e. primary y: [min:-ve, max:+ve], secondary y2: [min:-ve, max:+ve].
Alignment: Min of both axes set equal to the min/max fraction of the axis with the smallest min. Consider the example:
| Original Chart | Extended Chart |
|---|---|
 |
 |
One y-axis with all -ve values and the other with both -ve and +ve values
i.e. primary y: [min:-ve, max:-ve], secondary y2: [min:-ve, max:+ve].
Alignment: Max of both axes set equal to the max/min fraction of the axis with the largest max. Consider the example:
| Original Chart | Extended Chart |
|---|---|
 |
 |
Non-overlaping scales
i.e. scales that are in the opposite extremes e.g. primary y: [min:-ve, max:-ve], secondary y2: [min:+ve, max:+ve].
Alignment: Zero (0) set at the center of the chart. Consider the example:
| Original Chart | Extended Chart |
|---|---|
 |
 |
Usage/Demo
See working plunker for a live demo. You may activate/deactivate the alignment by toggling the variable tickPositioner.zero_align.
Compatibility
Compatible with Highcharts 4.1.7 and earlier.
License
MIT