JSFiddle - React, Tailwind, and code Playground

by linzoey

HTML

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

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

JavaScript

let seconds = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70]

let randomNumber = [0.41213746111838634, 0.1557326012104614, 0.9970891108366404, 0.5793911576287978, 0.49084616766035416, 0.8730596557620645, 0.06410893157941189, 0.6641234634048359, 0.014454928156764524, 0.9066345997449607, 0.25743850055264716, 0.6377047350370273, 0.44544035973367424, 0.5136418725426151, 0.19304248695910498, 0.5915670569040288, 0.9558724549998932, 0.11634534506448646, 0.7455331495292958, 0.07585903279074957, 0.8331196871426974, 0.15212367515388392, 0.6273584753147237, 0.3986507507047017, 0.17810725190683652, 0.6126951981789579, 0.5848338776087068, 0.6877402930431344, 0.039619944808759744, 0.7015149638702252, 0.7693991052328659, 0.5668836713272798, 0.5493128120287332, 0.7459672258541008, 0.652822802525483, 0.6633705721369254, 0.687646954677607, 0.22835673563279069, 0.8332897867913451, 0.060677990635757295, 0.560273329590151, 0.4563651029940474, 0.5784503741586657, 0.389609994126761, 0.9586160196041509, 0.14253636573209283, 0.06622740716318543, 0.44965175147352565, 0.7237576072224905, 0.46773001454323015, 0.36940903234968325, 0.5530522636698945, 0.9052968270928234, 0.6075138979712151, 0.12403290138024148, 0.7220096342035982, 0.8025323831742932, 0.8307083403018045, 0.92981886483012, 0.611184793916099, 0.7044571368777794, 0.31799608156497094, 0.6851684201251187, 0.5522922814934337, 0.9032606804834333, 0.7961569584728438, 0.19540657052649157, 0.44291371512449396, 0.9985360786173485, 0.5736682545856342]

var data = [{
  x: seconds,
  y: randomNumber,
  type: 'bar',
  marker: {
    color: "#FCD4B8",
    line: {
      color: "#FCF5E3",
      width: 1
    }
  }
}];

var layout = {
  bargap: 0.05,
  bargroupgap: 0,
  title: "Data from Science Experiment",
  xaxis: {
   ...