Working with data in EJ2 JavaScript Stock chart control

5 Sep 20259 minutes to read

Stock Chart can visualise data bound from local or remote data.

Local Data

You can bind a simple JSON data to the chart using dataSource property in series.

var stockChart = new ej.charts.StockChart({
        series: [
            {
                dataSource: chartData, type: 'Candle',
                animation: { enable: true },
                bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',
            }
        ],
});
stockChart.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="./index.css" rel="stylesheet">
    <link href="http://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
    
    <script src="./systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/31.2.12/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Handling No Data

When no data is available to render in the stock chart, the noDataTemplate property can be used to display a custom layout within the chart area. This layout may include a message indicating the absence of data, a relevant image, or a button to initiate data loading. Styled text, images, or interactive elements can be incorporated to maintain design consistency and improve user guidance. Once data becomes available, the chart automatically updates to display the appropriate visualization.

var checked = false;
var stockChart = new ej.charts.StockChart({
    series: [
        {
            type: 'Candle',
            animation: { enable: true },
            bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',
        }
    ],
    noDataTemplate: '<div id="noDataTemplateContainer" class="light-bg">' +
        '<div class="template-align">' +
        '<img src="no-data.png" alt="No Data"/>' +
        '</div>' +
        '<div class="template-align">' +
        '<p style="font-size: 15px; margin: 10px 0 0;"><strong>No data available to display.</strong></p>' +
        '</div>' +
        '<div class="template-align">' +
        '<button id="loadDataBtn" style="margin-top: 15px;"></button>' +
        '</div>' +
        '</div>',
    loaded: function (args) {
        var btnElem = document.getElementById('loadDataBtn');
        if (btnElem) {
            var loadBtn = new ej.buttons.Button({
                content: 'Load Data',
                iconCss: 'e-icons e-refresh',
                cssClass: 'e-outline',
                isPrimary: false
            });
            loadBtn.appendTo(btnElem);

            loadBtn.element.addEventListener('click', function () {
                checked = !checked;
                if (checked) {
                    stockChart.series[0].dataSource = chartData;
                }
                stockChart.refresh();
            });
        }
    }
});
stockChart.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="./index.css" rel="stylesheet">
    <link href="http://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
    <style>
        #noDataTemplateContainer {
            height: inherit;
            width: inherit;
        }

        .load-data-btn {
            border-radius: 4px !important;
            text-transform: none !important;
        }

        .light-bg {
            background-color: #fafafa;
            color: #000000;
        }

        .template-align img {
            max-width: 150px;
            /* Adjust size as needed */
            max-height: 150px;
            margin-top: 55px;
        }

        .template-align {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
    </style>

    <script src="./systemjs.config.js"></script>
    <script src="https://cdn.syncfusion.com/ej2/31.2.12/dist/ej2.min.js" type="text/javascript"></script>
    <script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id="container">
        <div id="element"></div>
    </div>
    
    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>

See Also