CanvasJS Basic StockChart | CanvasJS JavaScript StockChart

CanvasJS Basic StockChart | CanvasJS JavaScript StockChart

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: [{
        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: {
      ...