JSFiddle - React, Tailwind, and code Playground

by linzoey

HTML

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

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

JavaScript

var data = [{
// the number of items in x and y should match
  x: ['Feb. 4', 'Feb. 5', 'Feb. 6', 'Feb. 7', 'Feb. 8','Feb. 9','Feb. 10','Feb. 11','Feb. 12','Feb. 13','Feb. 14','Feb. 15','Feb. 16','Feb. 17','Feb. 18','Feb. 19'],
  y: [4,3,4,4,4,4,4,4,4,4,4,4,4,4,4,4],
  type: 'bar',
  marker: {
    color: "#5EA9BE",
    line: {
      color: "#9ACDE0",
      width: 1
    }
  }
}];

var layout = {
  bargap: 0.05,
  bargroupgap: 0,
  barmode: "overlay",
  title: "Number of people who made a purchase that day",
  xaxis: {
    title: "date, February 2023"
  },
  yaxis: {
    title: "number of people"
  }
};

Plotly.newPlot('myDiv', data, layout);