JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.stock.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the StockChart -->
<div id="OMXC25" style="height: 450px; width: 100%;"></div>

JavaScript

let dataEpoch = {};
let chartRefs = {};

let OMXC25Chart = "";
var dataPoints = {};
let data = {"OMXC25": {}};


for (let i in data) {
  var settings = {
    "url": "https://arjun.in.ngrok.io/marketoverview/indicesDataReturn",
    "method": "GET",
    "async": false,
    "timeout": 0,
  };

  let priceData = $.ajax(settings).done(function (response) {
    return response.data
  });
  priceData = priceData.responseJSON;

  dataEpoch[i] = {};
  dataPoints[i] = [];
  for (var j = (priceData.length - 1); j >= 0; j--) {
    dataEpoch[i][(moment(new Date(priceData[j].x)).format("DD/MM/YYYY"))] = {
      date: new Date(priceData[j].x),
      price: Number(priceData[j].y)
    };
    dataPoints[i].push({
      x: new Date(priceData[j].x),
      y: Number(priceData[j].y)
    });
  }
}

OMXC25Chart = new CanvasJS.StockChart("OMXC25", {
  theme: "dark1",
  zoomEnabled: true,
  colorSet: "colorSet5",
  fontFace: "verdana",
  exportEnabled: false,
  backgroundColor: "#000000",
  subtitles: [{
    text: numberWithCommas(Math.round(dataPoints["OMXC25"][0].y * 100) / 100),
    fontColor: "#fff",
    fontFamily: "Verdana",
    fontSize: 12,
    horizontalAlign: "left"
  }, {
    text: "Relative change here",
    fontColor: "#fff",
    fontFamily: "Verdana",
    fontSize: 12,
    horizontalAlign: "left"
  }],
  charts: [{
  	zoomEnabled: true,
    axisX: {
      crosshair: {
        enabled: true,
        valueFormatString: "MMM DD, YYYY HH:mm:ss"
      }
    },
    data: [{
      type: "area",
      xValueFormatString: "DD MMM YYYY",
      yValueFormatString: " #,###.##",
      dataPoints: dataPoints["OMXC25"],
      color: "#4cdc8b",
      fontFace: "Verdana"
    }]
  }],
  navigator: {
    enabled: true,
    height: 1
  },
  rangeSelector: {
    inputFields: {
      enabled: false
    },
    buttons: [{
      range: 1,
      rangeType: "day",
      label: "1D"
    }, {
      range: 5,
      rangeType: "day",
      label: "5D"
    }, {
      range: 1,
      rangeType: "month",
  ...