Horizontal histogram chart - show date on horizontal axis

I found the following Plotly chart on CodePen

<head>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-3.0.1.min.js'></script>
</head>

<body>
<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>


In the JS section, I have:

var x1 = [];
var x2 = [];
for (var i = 1; i < 500; i++)
{
k = Math.random();
x1.push(Math.random() + 1);
x2.push(Math.random() + 1.1);
}
var trace1 = {
y: x1,
type: "histogram",
// opacity: 0.5,
marker: {
color: 'blue',
},
};
var trace2 = {
y: x2,
type: "histogram",
// opacity: 0.3,
marker: {
color: 'grey',
},
};

var data = [trace1, trace2];
var layout = {barmode: "overlay"};
Plotly.newPlot('myDiv', data, layout);


It produces following output:



I want this histogram horizontally, plus I want date against values for each trace. Also, I don't want to show the 0, 1.2, 1.4 on the side axis, instead date vs value.

Date Value trace 1 Value trace 2
2010-01-01 10 15
2012-01-01 12 20
2014-01-01 14 22


Is this possible?

Continue reading...