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 averageSpending = [11358,766.25,421.75,297,278.25,279.5,232,535,481.25,231,208.5,357.25,253.25,282.75,288.25,397.25]

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

var layout = {
  bargap: 0.05,
  bargroupgap: 0,
  barmode: "overlay",
  title: "Average amount of spending per person in a day",
  xaxis: {
    title: "Date, February 2023"
  },
  yaxis: {
    title: "Money (NTD)"
  }
};

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