CODEWITHSUNDEEP
javascriptplotly.js
Jack O'Neill
Jack O'Neill

Reputation: 1081

plotly two y-axis same position of zero-line

I want to plot two axis (bar + scatter) on a plotly chart with javascript, but I can't get the zero baseline of the second y-axis to align with the first axis.

Here is the result of the current version:

example plot with two axis and not aligned zero line

The Zero-line of the right y-axis (the scatter line) is higher than the zero-line of the left y-axis. I would want to have them on the same height in the plot, basically overlapping.

I create the Plotly object like this:

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

I tried to change position in the config, but this does only affect the x-position, not where the y-axis starts. I can't find any suitable attribute in the docs (https://plotly.com/javascript/reference/layout/yaxis/) that would achieve that.

How can I set the position of the second y-axis to be the same as the first one?

Thanks.

Upvotes: 1

Views: 2085

Answers (1)

mit
mit

Reputation: 1340

Assuming you don't have negative values in your data, you can set layout.yaxis.rangemode = 'tozero'for one or both of your axes.

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>

Upvotes: 2

Related Questions