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 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]

// describe how to display the data here
// add the raw data to the property called x
var hist1 = {
  x: averageSpending,
  type: 'histogram',
  marker: {
    color: "#fac107",
    line: {
      color: "#fac107",
      width: 2
    }
  },
  xbins: {
    end: Math.max(...averageSpending),
    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: "Average amount of spending per person in a day",
  xaxis: {
    title: "Money (NTD)"
  },
  yaxis: {
    title: "Days"
  }
};

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