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

let classSpending = [45432,3065,1687,1188,1113,1118,928,2140,1925,924,834,1429,1013,1131,1153,1589]

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: classSpending,
  type: 'bar',
  marker: {
    color: "#F3BFB3",
    line: {
      color: "#FFDDD3",
      width: 1
    }
  }
}];

var layout = {
  bargap: 0.05,
  bargroupgap: 0,
  barmode: "overlay",
  title: "Total amount of spending of the class in one day",
  xaxis: {
    title: "Date, February 2023"
  },
  yaxis: {
    title: "Money (NTD)"
  }
};

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