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

plotly.js
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.

erro%20plotly
erro plotly.png789×602 21.5 KB

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'
    }
}
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];

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.

16

Could you share full working example code? This bits and pieces are usually not very helpful.

17

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