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.



Gráfico com problema



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
}
}





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






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.

Comments

Post a Comment

Popular posts from this blog

paramiko-expect timeout is happening after executing the command

paramiko-expect timeout is happening after executing the command Can someone help me why timeout is happening after executing the command .I am trying to SSH to a machine and execute a command.I want to store the result of the executed command . I have referred paramiko-timeout but i didn't get my expected result. import traceback try: import paramiko except ImportError: raise Exception("Please install paramiko , pip install paramiko") import pexpect from paramiko_expect import SSHClientInteraction def main(): HOSTNAME = "minion5.net" USERNAME = "root" PASSWORD = "help@432" PROMPT = "root@*:~$s+" try: client = paramiko.SSHClient() client.load_system_host_keys() client.set_missing_host_key_policy(paramiko.AutoAddPolicy()) client.connect(hostname=HOSTNAME, username=USERNAME, password=PASSWORD) with SSHClientInteraction(client, timeout=20, display=True) as interact: ...
Read more

Possible Unhandled Promise Rejection (id: 0): ReferenceError: user is not defined ReferenceError: user is not defined

Possible Unhandled Promise Rejection (id: 0): ReferenceError: user is not defined ReferenceError: user is not defined I have stored data user with AsyncStorage when i want to get it, it renders null in alert and the above error in the console,i don't know why. I can not see why it returns null with user but token all is well profile.js : import React, {Component} from 'react'; import { StyleSheet, Text, View, Image, TouchableOpacity,AsyncStorage} from 'react-native'; import { Container, Content, Header,Right, Left, Body} from 'native- base'; import Feather from 'react-native-vector-icons/Feather'; export default class Profile extends Component { constructor (props){ super(props); this.state = { user: null } } componentDidMount(){ this.fetchData(); } fetchData = async() =>{ let username = await AsyncStorage.getItem('user') this.setState({ user: username }) ...
Read more

Export result set on Dbeaver to CSV

Export result set on Dbeaver to CSV Normally I use Dbeaver for windows and always export my result set like this: run my query --> select the result --> export the result set --> select export to clipboard --> done This step by step puts my result set in my clipboard and I can paste it wherever I want to work with it. The problem is that now I am using dbeaver for mac and this guide is not working. I can go on until the moment that I select my result set like in the image below: exporting data set But once I go further in the process, in the last step I get: no query Note that in "source" it was suppose to show the query that originated the result set, but instead it says just "select. As a result it does't select my result or anything (besides being "successful"). Normally my query would show up there automatically and I couldn't find any option that corrects this problem in the menus. Please help me! Thanks. Aft...
Read more