JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>


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

JavaScript

var xvar='';
 
 var xValues = [1486628100000,1486628100000,1486628101000, 1486628101000,1486628101000,1486628102000,1486628102000,1486628102000,1486628103000,1486628103000,1486628104000,
1486628104000,1486628105000].map(function(d) { return new Date(d); });
var yValues =["100","200","100","200","300","100","200","100","200","100","200","300","1100"];

var zValues = [10,11,14,9,8,16,4,1,11,20,1,29,18];
//alert(xValues[3])

var colorscaleValue = 
  [[0, 'rgb(166,206,227)'], [0.25, 'rgb(31,120,180)'], [0.45, 'rgb(178,223,138)'], [0.65, 'rgb(51,160,44)'], 
			               [0.85, 'rgb(251,154,153)'], [1, 'rgb(227,26,28)']
];

var data = [{
  x: xValues,
  y: yValues,
  z: zValues,
  type: 'scatter',
  colorscale: colorscaleValue,
  colorbar:{
		thickness: 5,
		tickfont: {
			size: 10
		},
		title:'Count',
		titlefont: {
			size: 10,
		},
	},
  showscale: true
}];

var layout = {
  title: 'Annotated Heatmap',
  annotations: [],
  dragmode:'',
  xaxis: {
      title: '',
			tickmode:"auto",   // linear
			tickformat:"%H:%M",
			ticklen:0,
			nticks:4,
			linecolor: '#D7D0D0',
			linewidth: 1,
			showgrid: false,
			zeroline: false,
			fixedrange:true,  // true disable zoom
			tickfont: {
				size:10,
			},
  },
  yaxis: {
    ticks: '',
    titlecolor:'red',
		tickfont: {
			size:10
		},
		linecolor: '#D7D0D0',
		linewidth: 1,
    fixedrange:true,
    range:[0,1100]
  }
};
var mydiv=document.getElementById('myDiv');
Plotly.newPlot(mydiv, data, layout);
 
 
 console.log(xValues, mydiv.layout.xaxis.type)