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 data = [{"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":18.0300,"IntervalStart":"2023-06-01 23:30:00"},{"Symbol":"GRTUSDT","OrderSide":"Sell","TotalAmount":4986.4100,"IntervalStart":"2023-06-01 23:30:00"},{"Symbol":"HBARUSDT","OrderSide":"Sell","TotalAmount":1237.1000,"IntervalStart":"2023-06-01...