Overlaying a Message for No Data in Kendo UI for jQuery Stock Chart

Updated on Dec 10, 2025

Environment

Product	Chart for Kendo UI for jQuery, Stock Chart for Kendo UI for jQuery
Version	Current

Description

I want to display a message overlay, such as "No data available in the selected period," on a Stock Chart when there is no data. This is useful for providing visual feedback to users in scenarios where the data source contains no records.

The Chart received a built-in "No data" template functionality with v.2024.4.1112 that allows the Chart to automatically display a message when there is no data to show. For the described approach to work in v.2024.4.1112 or newer versions you need to set noData: false to the Chart.

This knowledge base article also answers the following questions:

• How to show a no-data message in Kendo UI for jQuery Stock Chart?
• How to create an overlay for empty data in Stock Chart?
• How to handle empty data scenarios in Kendo UI for jQuery Stock Chart?

Solution

To achieve this, use the requestStart and requestEnd events of the dataSource to control the visibility of the overlay message dynamically. Additionally, check the data length in the requestEnd event to determine if the overlay message should be displayed.

Follow these steps:

1. Define the Stock Chart and initialize the dataSource.
2. Use the requestStart and requestEnd events to manage the loading indicator and check for empty data.
3. Create an overlay element to display the message.

Here is an example implementation:

 <div id="stock-chart"></div>
    <script>
        function createChart() {
            $("#stock-chart").kendoStockChart({
                dataSource: {
                    transport: {
                        read: {
                            url: "https://demos.telerik.com/kendo-ui//content/dataviz/js/boeing-stock.json",
                            dataType: "json"
                        }
                    },
                    schema: {
                        model: {
                            fields: {
                                Date: { type: "date" }
                            }
                        }
                    },
                  requestStart: function() {
                    kendo.ui.progress($("#stock-chart"), true);
                  },
                  requestEnd: function() {
                    kendo.ui.progress($("#stock-chart"), false);
                  }
                },
                noData: false,
                title: {
                    text: "The Boeing Company\nNYSE:BA"
                },
                dateField: "Date",
                series: [{
                    type: "candlestick",
                    openField: "Open",
                    highField: "High",
                    lowField: "Low",
                    closeField: "Close"
                }],
                categoryAxis: {
                    labels: {
                        rotation: "auto"
                    }
                },
                navigator: {
                    series: {
                        type: "area",
                        field: "Close"
                    },
                    select: {
                        from: "2009/02/05",
                        to: "2011/10/07"
                    },
                    categoryAxis: {
                        labels: {
                            rotation: "auto"
                        }
                    }
                }
            });
        }

        $(document).ready(createChart);
        $(document).bind("kendo:skinChange", createChart);
    </script>

Key Points:

• Use kendo.ui.progress to show or hide a loading indicator during data requests.
• Dynamically toggle the overlay visibility based on the data length in the requestEnd event.
• Style the overlay to ensure proper positioning and appearance.

See Also

• Stock Chart Overview
• DataSource requestStart Event
• DataSource requestEnd Event
• kendo.ui.progress Method