Plotly.js - How do I make two y-axes associated with a single x-axis?

#1

How do I make two y-axes associated with a single x-axis? In the image we see that each y-axis has its own x-axis. I already used anchor = ‘x’ in the yaxis2 layout, but nothing has changed.

Below the layout used:

var layout = {
    title: 'Coeficientes',
    showlegend: true,
    legend: {
        "orientation": "h"
    },
    width: 800,
    height: 580,
    autosize: true,
    margin: {
        l: 50, r: 70, b: 50, t: 50, pad: 2
    },
    xaxis: {title: 'Ângulo [graus]'},
    yaxis: {title: '[kN/(m/s)²]'},
    yaxis2 = {
        title: '[kN.m/(m/s)²]',
        overlaying: 'y',
        side: 'right'
    }
}
Y-axis overlaying does not align axes
#2

See example here: https://plot.ly/javascript/multiple-axes/#two-y-axes

#3

Hello @etienne Thank you very much…

I’ve seen this example and used the same settings but it did not work. Each y-axis has a distinct x-axis. What can it be? I’ve already put the property anchor: ‘x’ (layout.yaxis2), but it did not solve the problem.

#4

The layout object you pasted above looks good.

I think your problem is in your trace settings. Have you set yaxis: 'y2' for the trace you when to plot of that second y-axis?

#5

@etienne Yes… as below

var dataY2 = {
        x: _xData,
        y: _yData,
        type: 'scatter',
        name: _name,
        yaxis: 'y2'
}

I’m using this version of plotly.js: v1.28.2
What is missing?

#6

Hi @etienne

Thanks if you can continue to help me with this.

I checked that you can even drag the x axis until it overlaps the other. But I would need, by default, both to correspond to the same x-axis.

#7

@leonardopereira insert also xaxis: 'x1' in dataY2. See the plotly.js code https://plot.ly/~empet/14347#code for this plot https://plot.ly/~empet/14347
as an example of two yaxes with a common xaxis.

#8

Hello @empet Thank your help. I inserted xaxis: ‘x1’ in my dataY2, but didn’t work :frowning:

Look at this example that a guy created, because of my post in StackOverflow

Please, use the following traces in that code:
var x = [0.0, 30.0, 45.0, 60.0, 90.0, 120.0, 135.0, 150.0, 180.0];
var y1 = [1.608, 1.3936, 0.9648, 0.60032, 0.08576, -0.71824, -1.1685, -1.5544, -2.0582];
var y2 = [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0];

Y-axis overlaying does not align axes
#9

I experimented with both data sets an it works fine:two-yaxes

sp1

Perhaps you consider that the second plot is wrong. It’s not the case. The two yaxes have independent ranges and 0 on yaxis1 does not coincide with 0 on yaxis2.

If I change the y2 values to 1.0, instead of 0, I get the following plot:
sp2

and it this the right one.

#10

So I do not know if I can explain correctly what I need. I just did not want the two ‘xaxis’ to appear. So I wanted to know how to “force” the two axes and coincide in the 0. It’s possible?

#11

Yes, it is possible with the following settings:

yaxis: {
    mirror: true, 
    range: [-2.0582, 1.608], 
    showline: true, 
    ticklen: 4, 
    title: '[kN/(m/s)²]', 
    zeroline: false
  }, 
  yaxis2: {
    overlaying: 'y1', 
    range: [-2.0582, 1.608], 
    showgrid: false, 
    side: 'right', 
    ticklen: 4, 
    title: '[kN.m/(m/s)²]', 
    zeroline: false
  }

where the common range is [min(y1), max(y1)].

sp3

#12

It worked that way … but the problem is to set the same ‘range’ for both axes y. It often happens that the scale is quite different and the chart is “compressed”. You see? Is there another way? That ‘anchor: x’ is for what?

#13

There is no method, because the two overlaying y-axes are meant with distinct ranges. The xaxis is common, in the sense that it has the same range for both systems of axes: xaxis, yaxis1, respectively xaxis, yaxis2.

setting
zeroline=False

in both yaxis iand yaxis2, the xaxis line is not displayed.

#14

You can do this with rangemode: 'tozero' as in here: https://codepen.io/anon/pen/jexrJb?editors=0010

#15

Hello,

I also got similar issues, here i have 3 different y-axis but 1 x-axis. is there anyway to achieve all y-axis in same zero position but each y-axis need to act independently. More over it should also work for -ve values.

Thanks.