Quiero trazar dos ejes (barra + dispersión) en un gráfico gráfico con javascript, pero no puedo obtener la línea de base cero del segundo eje y para alinearla con el primer eje.
Aquí está el resultado de la versión actual:
La línea cero del eje y derecho (la línea de dispersión) es más alta que la línea cero del eje y izquierdo. Me gustaría tenerlos a la misma altura en la trama, básicamente superpuestos.
Creo el objeto Plotly así:
const trace1 = { x: dates, y: y1, name: 'item', type: 'bar' }; const trace2 = { x: dates, y: y1_cumsum, name: 'Total', yaxis: 'y2', type: 'scatter' }; Plotly.newPlot(MYDIV, [trace1,trace2], { margin: {t: 0}, barmode: 'group', hovermode: 'x unified', yaxis: {title: 'item', dtick: 1}, yaxis2: { title: 'total', overlaying: 'y', side: 'right' }, showlegend: true, legend: { x: 0.25, xanchor: 'right', y: 1 } });
Traté de cambiar la position
en la configuración, pero esto solo afecta la posición x, no donde comienza el eje y. No puedo encontrar ningún atributo adecuado en los documentos ( https://plotly.com/javascript/reference/layout/yaxis/ ) que lograría eso.
¿Cómo puedo configurar la posición del segundo eje y para que sea la misma que la del primero?
Gracias.
Suponiendo que no tiene valores negativos en sus datos, puede configurar layout.yaxis.rangemode = 'tozero'
para uno o ambos ejes.
const trace1 = { x: [3, 4, 5], y: [0, 15, 13], mode: 'markers+lines', type: 'scatter', yaxis: 'y2' }; const trace2 = { x: [3, 4, 5], y: [1, 0, 3], type: 'bar' }; Plotly.newPlot('myDiv', [trace1,trace2], { margin: {t: 0}, barmode: 'group', hovermode: 'x unified', yaxis: {title: 'item', dtick: 1}, yaxis2: { title: 'total', overlaying: 'y', side: 'right', rangemode: 'tozero' }, showlegend: true, legend: { x: 0.25, xanchor: 'right', y: 1 } });
<head> <!-- Load plotly.js into the DOM --> <script src='https://cdn.plot.ly/plotly-2.11.1.min.js'></script> </head> <body> <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div> </body>