Subplots with Shared Axes

plotly.js
1

Here is how it looks:
1

Here is my configuration:
var Predicted= {
type: “scatter”,
mode: “lines”,
name: ‘Predicted’,
xaxis; ‘x’,
yaxis: ‘y3’,
x: unpackData(data[0].Values, ‘x’),
y: unpackData(data[0].Values, ‘y’),
};
var Actual= {
type: “scatter”,
mode: “lines”,
name: ‘Actual’,
x: unpackData(data[1].Values, ‘x’),
y: unpackData(data[1].Values, ‘y’),
};

var layout = {
xaxis: {
type: ‘date’,
title: ‘Time’,
domain: [0, 1.0]
},
yaxis: {
title: ‘Values’,
domain: [0, 0.5]
},
yaxis3: { domain: [0.55, 1] },
autoresize: true,
showlegend: true,
legend: { “orientation”: “h” },
margin: {
l: 60,
r: 5,
b: 0,
t: 50
},
title: data[0].Values[0].name,
};
How can I move x axis down?

2

I am running plotly locally and it wasn’t the latest version. I got latest and now 1 my chart looks like this:

3

I am also trying to add ticks to x axis, that is not working either and looks like this:
1