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"
        }],
        axisX: {
            viewportMinimum: moment(dataEpoch["OMXC25"][Object.keys(dataEpoch["OMXC25"])[0]].x)._d,
            viewportMaximum: moment(dataEpoch["OMXC25"][Object.keys(dataEpoch["OMXC25"])[0]].x).add(5, "day")._d
        },
        charts: [{
            axisX: {
                crosshair: {
                    enabled: false
                },
                viewportMaximum: moment(dataEpoch["OMXC25"][Object.keys(dataEpoch["OMXC25"])[0]].x).add(5,...