Plotly.js - How do I make two y-axes associated with a single x-axis?
Plotly.js - How do I make two y-axes associated with a single x-axis?
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'
}
}
1 Answer
1
You can try with set xaxis
and yaxis
value of each trace. It's works
xaxis
yaxis
var trace1 = {
x:x,
y:y1,
type:'scatter',
xaxis:'x',
yaxis:'y'
}
var trace2 = {
x:x,
y:y2,
type:'scatter',
xaxis:'x',
yaxis:'y2'
}
Example
Sometimes grid line not adjusted. it's happens when different yaxis
range is different.
So we can overcome this issue with set of same range
each y-axis
yaxis
range
var Yvalues = y1.concat(y2); // Merge y values
var yMax = Math.max.apply(Math, Yvalues);
var yMin = Math.min.apply(Math, Yvalues);
var Yrange = [yMin,yMax];//Set range
var layout = {
.......
.......
yaxis: {
range:Yrange //Set range
},
yaxis2 : {
range:Yrange, //Set range
overlaying:'y' // Set overlaying value
}
}
Hi @Pereira, on your problem I edited my answer maybe you get a hints to solve this.Thanks
– MD NASIR FARDOUSH
2 days ago
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Hello MD NASIR... Thank for your help. I inputed my traces in your code 'codepen' but didn't work. Try my traces bellow: 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];
– Pereira
Jun 28 at 16:22