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 = ["2017-01-18T10:50:51.000Z","2017-01-18T10:50:51.000Z","2017-01-18T10:50:51.000Z","2017-01-18T10:50:52.000Z","2017-01-18T10:50:52.000Z","2017-01-18T10:50:52.000Z","2017-01-18T10:50:53.000Z","2017-01-18T10:50:53.000Z","2017-01-18T10:50:53.000Z","2017-01-18T10:50:53.000Z","2017-01-18T10:50:54.000Z","2017-01-18T10:50:54.000Z","2017-01-18T10:50:55.000Z","2017-01-18T10:50:55.000Z"];

var yValues =["100","200","100","200","300","100","200","100","200","100","200","300","1100","100"];

var zValues = [10,11,14,9,8,16,4,1,11,20,1,29,18,10];
//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: 'heatmap',
  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:%S",
			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);
 var x1Values = ["2017-01-18T10:50:56.000Z","2017-01-18T10:50:57.000Z","2017-01-18T10:50:58.000Z","2017-01-18T10:50:59.000Z","2017-01-18T10:50:60.000Z"];

var y1Values =["100","200","100","200","300"];

var z1Values = [100,11,14,9,80];
var update ={	  
				   x:[x1Values],
				   y:[y1Values],
				   z:[[z1Values]],
				    };

setTimeout(function() {

	   ...