JSFiddle - React, Tailwind, and code Playground

by shiv_veerashetty

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis-timeline-graph2d.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis-timeline-graph2d.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.7/dayjs.min.js"></script>
<div id="visualization"></div>

CSS

body, html {
      font-family: "Roboto", sans-serif;
      font-size: 11pt;
    }
    
    .vis-item.sell      { 
    background-color: #f44336; 
    color: #fff
    }    
    .vis-item.buy      { background-color: #48cd04; }

JavaScript

var items = new vis.DataSet({
  type: { start: 'ISODate', end: 'ISODate' }
});

var data = {
  "data": {
    "transactions": [
      {
        "transaction_id": "196ca383-b112-4e24-a48d-c26883d4b15f",
        "lot_size": 1,
        "margin_factor": 1,
        "price": 36.732,
        "quantity": 1250,
        "type": "MIS",
        "candle_time": "2023-05-10T09:43:00+00:00",
        "complete_time": "2023-05-10T15:13:45+00:00",
        "computed_time": "2023-05-10T09:43:45.303802+00:00",
        "request_time": "2023-05-10T09:43:45.303807+00:00",
        "status": "COMPLETE",
        "status_message": null,
        "state": ": Forced Exit",
        "instrument_id": "NFO:NIFTY2351118300PE",
        "pnl": 22730.000000000007,
        "charges": {
          "Brokerage": 20,
          "Securities Transaction Tax": 0,
          "Exchange Transaction Charges": 24.33495,
          "GST": 7.980291,
          "SEBI Charges": 0.045915,
          "Stamp Duty": 1.37745,
          "Call And Trade": 0
        },
        "total_charge": 53.738606000000004,
        "user_id": "auth0|60cf4677e73cc800696ac86f",
        "broker_id": "zerodha",
        "transaction_time": "2023-05-10T09:43:45.303767+00:00",
        "subscription": {
          "name": "1 Sell",
          "strategy": {
            "name": "1 sell",
            "strategy_type": "intraday",
            "algorithm": {
              "name": "1S",
              "user_id": "auth0|60cf4677e73cc800696ac86f"
            },
            "algorithm_id": "1fe60f06-fc4a-4eb0-aaa0-e02a646f9c75"
          }
        }
      },
      {
        "transaction_id": "342a42ad-0e1f-4eee-9421-0f5ae5f185bf",
        "lot_size": 1,
        "margin_factor": 1,
        "price": 63.48,
        "quantity": 1250,
        "type": "MIS",
        "candle_time": "2023-05-10T09:36:00+00:00",
        "complete_time": "2023-05-10T15:06:03+00:00",
        "computed_time": "2023-05-10T09:36:03.749445+00:00",
        "request_time":...