How do I stack multiple x axes on the bottom of my chart?

plotly.js
1

Hello,

I have a scatter plot chart with multiple x axes. I am following a code example that puts one x axis on the top and the other on the bottom like so:

x-axis on top and bottom

The code looks like this:

var trace1 = {
	x: [1, 2, 3], 
	y: [40, 50, 60], 
	name: 'yaxis data', 
	type: 'scatter'
};
							  
var trace2 = {
	x: [12, 13, 14], 
	y: [4, 5, 6], 
	name: 'yaxis2 data', 
	xaxis: 'x2',
	type: 'scatter'
};

var data = [trace1, trace2];

var layout = {
	yaxis: {title: 'yaxis title'}, 
	xaxis2: {
		  title: 'xaxis2 title', 
		  titlefont: {color: 'rgb(148, 103, 189)'}, 
		  tickfont: {color: 'rgb(148, 103, 189)'}, 
		  overlaying: 'x',
		  side: 'top'
	}
};

  var chartDiv = document.querySelector('#scatter-plot-chart');
  Plotly.newPlot(chartDiv, data, layout);

What I’d like to do is have both x axes on the bottom like so:

preferred look

So instead of setting side: 'top' I set side: 'bottom'. However, the x axes end up overlapping like so:

x-axis on bottom

I did a bit of research and found I can set a property on layout.xaxis2 like this: position: 0.1 but that pushes the axis up into the chart. I tried position: -0.1 but it doesn’t seem to acknowledge negative values.

Is there a way to get the x axes to stack vertically like in the image I want?

I’m using plotly JS.