JSFiddle - React, Tailwind, and code Playground

by Egli

HTML

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<div>
  <canvas id="myChart" width="800px" height="400"></canvas>
</div>

JavaScript

var dataset = [{
  "Symbol": "NKNUSDT",
  "OrderSide": "Sell",
  "TotalAmount": 683.2800,
  "IntervalStart": "2023-06-01 23:55:00"
}, {
  "Symbol": "RADUSDT",
  "OrderSide": "Sell",
  "TotalAmount": 3379.2700,
  "IntervalStart": "2023-06-01 23:55:00"
}, {
  "Symbol": "TRUUSDT",
  "OrderSide": "Sell",
  "TotalAmount": 612.2500,
  "IntervalStart": "2023-06-01 23:55:00"
}, {
  "Symbol": "NKNUSDT",
  "OrderSide": "Sell",
  "TotalAmount": 143.5200,
  "IntervalStart": "2023-06-01 23:50:00"
}, {
  "Symbol": "KEYUSDT",
  "OrderSide": "Sell",
  "TotalAmount": 6968.1300,
  "IntervalStart": "2023-06-01 23:50:00"
}, {
  "Symbol": "LINAUSDT",
  "OrderSide": "Buy",
  "TotalAmount": 4984.0400,
  "IntervalStart": "2023-06-01 23:50:00"
}, {
  "Symbol": "LINAUSDT",
  "OrderSide": "Buy",
  "TotalAmount": 24.3400,
  "IntervalStart": "2023-06-01 23:45:00"
}, {
  "Symbol": "BTCUSDT",
  "OrderSide": "Buy",
  "TotalAmount": 804.7230,
  "IntervalStart": "2023-06-01 23:45:00"
}, {
  "Symbol": "KEYUSDT",
  "OrderSide": "Sell",
  "TotalAmount": 506.2300,
  "IntervalStart": "2023-06-01 23:40:00"
}, {
  "Symbol": "KEYUSDT",
  "OrderSide": "Sell",
  "TotalAmount": 5120.7800,
  "IntervalStart": "2023-06-01 23:35:00"
}, {
  "Symbol": "KEYUSDT",
  "OrderSide": "Sell",
  "TotalAmount": 10646.0300,
  "IntervalStart": "2023-06-01 23:30:00"
}, {
  "Symbol": "KNCUSDT",
  "OrderSide": "Sell",
  "TotalAmount": 996.1300,
  "IntervalStart": "2023-06-01 23:30:00"
}, {
  "Symbol": "INJUSDT",
  "OrderSide": "Sell",
  "TotalAmount": 787.8740,
  "IntervalStart": "2023-06-01 23:30:00"
}, {
  "Symbol": "IOTAUSDT",
  "OrderSide": "Sell",
  "TotalAmount": 623.8200,
  "IntervalStart": "2023-06-01 23:30:00"
}, {
  "Symbol": "KAVAUSDT",
  "OrderSide": "Sell",
  "TotalAmount": 113.2000,
  "IntervalStart": "2023-06-01 23:30:00"
}, {
  "Symbol": "FTMUSDT",
  "OrderSide": "Sell",
  "TotalAmount": 9949.1400,
  "IntervalStart": "2023-06-01 23:30:00"
}, {
  "Symbol": "GALABUSD",
  "OrderSide": "Sell",
  "TotalAmount":...