Scatter plot x axes of different traces not mixed

plotly.js
1

My intended output is as follows
https://codepen.io/kausti/pen/QqqmOy

The exact same code and data run on machine produces the following output

scatter
scatter.png920×450 4.82 KB

As you see the xaxis data is messed up.
Is it possible I am doing somethng wrong?
As I said, the data and code is exactly same.
I suspected first may be the numbers are passed as strings. But typeof confirms they are numbers.

I am using plotly 1.31.2
Any ideas please?
Thanks!

2

Ok, I have figured out the root of the problem but still do not understand the reason.
Here is my layout. Nothing fancy. Basic stuff. This seems to be causing the problem. Because when I set layout = {} the problem is solved.
I would like to know why this fails as I may have to make changes for other plots too. Thanks

const layout = {
  autosize: true ,
  xaxis: {showgrid: false,
			    tickfont: {
		        size: 10,
		        color: 'black'
		      },

	 },
	yaxis: {showgrid: false,
			    tickfont: {
		        size: 10,
		        color: 'black'
		      },

	 },
	titlefont: {size: 12},
	hovermode: 'closest',
  
}
3

Can you share the data/layout attribute you used to generate the screenshot above to help us help you?