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

// raw population data

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

// describe how to display the data here
// add the raw data to the property called x
var hist1 = {
  x: classSpending,
  type: 'histogram',
  marker: {
    color: "#02d998",
    line: {
      color: "#02d998",
      width: 2
    }
  },
  xbins: {
    end: Math.max(...classSpending),
    size: 50,
    start: 0
  }
};

// add your histogram to an array here
var data = [hist1];

// adjust some more controls over the display of your histogram
var layout = {
  bargap: 0.1,
  bargroupgap: 0,
  barmode: "overlay",
  title: "Total amount of spending of the class in one day",
  xaxis: {
    title: "Money (NTD)"
  },
  yaxis: {
    title: "Days"
  }
};

// call Plotly to display your histogram
Plotly.newPlot('myDiv', data, layout);