Different zero for xaxis in case of multiple axis with different types

[hn0pw]

I'm using two y-axes in a plot with different types (bar and scatter).
With this, the zero line of the x axis is not a the same position on y and y2.

Example:
https://codepen.io/anon/pen/GEGKLm

If for y-axes the type scatter is used there's no problem (https://codepen.io/anon/pen/xrzxxb).
I think the both zero's of the x-axis should be at same level, right?

[etpinard]

That's the intended behavior. We pad the axis ranges a little bit when scatter traces with markers are present. In your graphs, yaxis has only a bar trace (that means no axis expand), yaxis2 has a scatter trace with markers (that the axis range is expanded a little bit).

To override the default behavior, simply add rangemode: 'tozero' to the layout.yaxis2 settings as in:

https://codepen.io/etpinard/pen/JJZjbX?editors=0010

[etpinard]

This ticket won't result in a PR, so I'll close it.

[hn0pw]

Thank you for the fast reply and the solution.
I think i tried this, but maybe i added it at a wrong position.

[vijaygaddam190]

Is there any way to achieve same zero position for multiple y-axis. All y-axis have different values and need to act independently also it should work with -ve values .

[GendelfLugansk]

It is possible to calculate correct range for each axis with some math and then for each y-axis set autorange = false and range as calculated.

How to calculate ranges:

1. Calculate rangeLength (max y value - min y value) for each y-axis using your data
2. Determine which rangeLength is biggest. Let's say it would be rangeLength2
3. For each y-axis calculate coefficient by dividing maximal rangeLength by rangeLength of that axis. I.e. coeff1 = rangeLength2/rangeLength1; coeff2 = 1; //rangeLength2/rangeLength2
4. Take min y value and max y value for each axis, multiply by respective coefficient (i.e. multiply y values of axis y1 by coeff1) and put them in array
5. Find minimum and maximum values from that array, and put them in new array, let's call it commonRange
6. Now you can find range for each y-axis if you divide each item of commonRange by corresponding coefficient from step 3

I tested it with 2 y-axis, seems to work for me. Be aware about theoretically possible division by zero errors, i.e. skip calculation for axis where rangeLength is 0.

[vijaygaddam190]

Awesome. I tried with 3 Y-Axis's and autorange=true it worked. Also is there any way to match 3 Y-Axis's grid lines with autorange=true?

[GendelfLugansk]

@vijaygaddam190 I didn't try but I think that it can be done by setting tickmode: 'array' and calculating tickvals based on calculated ranges for each axis (i.e. if you will break each range into the same amount of intervals, they should be on the same line)

Something like this:

const numberOfTicks = 10;
const commonRangeBetweenTicks = (max(...commonRange) - min(...commonRange))/(numberOfTicks -1);
const commonTickVals = [];
const firstTick = min(...commonRange);
for (let i = 0; i < numberOfTicks; i++) {
  commonTickVals.push(firstTick + (commonRangeBetweenTicks * i));
}
const tickvals1 = commonTickVals.map(v => v / coeff1);
const tickvals2 = commonTickVals.map(v => v / coeff2);
const tickvals3 = commonTickVals.map(v => v / coeff3);

[vijaygaddam190]

@GendelfLugansk above calculations are worked for me, but we got problem with number of ticks because we are getting no of ticks based on the number of data sets we got. With this calculation we are making tick values depend on each other which fails my requirement.

Please check the picture in this link.
https://community.plot.ly/t/is-it-possible-to-have-multiple-y-axis-0-zero-positions-in-same-line/23236

[GendelfLugansk]

@vijaygaddam190 Plotly draws grid lines on each tick. Only workaround I can propose - disable grid (showgrid: false) for all y-axis except one.

[vijaygaddam190]

i did the same thing it looks good. But we got problem with number of ticks because we are getting no of ticks based on the number of data sets we got. With this calculation we are making tick values depend on each other which fails my requirement.

[VictorBezak]

I've crafted a comprehensive solution. This was fairly rushed, so if there are any mistakes or confusions, please do let me know

https://github.com/VictorBezak/Plotly_Multi-Axes_Gridlines

[pkozul]

Thanks @VictorBezak, your solution is working for me. Hopefully others can make use of it too.