I suggest you ...

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.

369 votes
Sign in
or sign in with
  • facebook
  • google
    Password icon
    I agree to the terms of service
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    JamieJamie shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →


    Sign in
    or sign in with
    • facebook
    • google
      Password icon
      I agree to the terms of service
      Signed in as (Sign out)
      • RobertoRoberto commented  ·   ·  Flag as inappropriate

        Hello Torstein,
        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?

      • Torstein HønsiAdminTorstein Hønsi (Admin, Highcharts JS) commented  ·   ·  Flag as inappropriate

        @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øvtangenRonny Løvtangen commented  ·   ·  Flag as inappropriate

        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

      • gmmazzgmmazz commented  ·   ·  Flag as inappropriate

        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:



      • LukaszLukasz commented  ·   ·  Flag as inappropriate

        Hey !
        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

      • Maxime74Maxime74 commented  ·   ·  Flag as inappropriate

        Hi there.

        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.

      • JamieJamie commented  ·   ·  Flag as inappropriate

        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.

      • Anonymous commented  ·   ·  Flag as inappropriate

        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.

      • Anonymous commented  ·   ·  Flag as inappropriate

        gents, may I ask when will this solution be completely implemented and released?
        Also: it'd be a perfectly working solution if I could sync min/max per axis.
        I can calculate the axis min/max in code before generation, however, highcharts often disregards the given value to be able to line up the axes. Funnily enough the algorithm does a different 'disregarding' on the max & the min values. If it was at expanded/recalculated the same way, not to different values, it'd work.

      • Luis MiguelLuis Miguel commented  ·   ·  Flag as inappropriate

        Hi, the change in the plugin (version 2013-12-02) works fine, but I detected another bug trying with different values.

        For example, I used the following series:

        series: [{
        type: 'line', data: [1129.9, 1171.5, 1106.4, 1129.2, 1144.0, 1176.0, 1135.6, 1148.5, 1216.4, 1194.1, 1195.6, 1154.4]

        type: 'line', data: [29.9, -71.5, -106.4, -129.2, -144.0, -176.0, -135.6, -148.5, -216.4, -194.1, -95.6, -54.4]

        }, {
        type: 'line', data: [129.9, 271.5, 306.4, -29.2, 544.0, 376.0, 435.6, 348.5, 216.4, 294.1, 35.6, 354.4],
        yAxis: 1


        Serie 1, new. All values positive and higher than 1000
        Serie 2, the same that original serie 1
        Serie 3, the same that original serie 2

        Whenever serie 1 is of type line, when it shows/hides serie 2 from the legend, does not align the axes.

      ← Previous 1

      Feedback and Knowledge Base