Showing a Message When the Chart Has No Data

Environment

Product	Telerik UI for ASP.NET Core Chart
Progress Telerik UI for ASP.NET Core version	Created with the 2022.2.802 version

Description

How can I display a message in the Telerik UI for ASP.NET Core Chart when its data source is empty?

Solution

The following example demonstrates how to achieve such behavior in the Telerik UI for ASP.NET Core Chart. Note that the div element of the message is positioned and decorated through CSS.

    @(Html.Kendo().Chart()
        .Name("chart")
        .Title("Site Visitors Stats")
        .Events(ev=>ev.Render("onRender"))
    )

    <script>
        function onRender(e) {
            var view = e.sender.dataSource.view();
            var parent = e.sender.element.closest('.container')
            createOverlay(view.length, parent)
        }
        function createOverlay(viewLength, parent) {
            if (viewLength === 0) {
                parent.append("<div class='overlay'><div>No Data</div></div>")
            }
        }
    </script>

    <style>
        .container {
        position: relative;
        }

        .overlay {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: .5;
        background-color: #6495ed;
        text-align: center;
        }

        .overlay div {
        position: relative;
        font-size: 34px;
        margin-top: -17px;
        top: 50%;
        }
    </style>

For the complete implementation of the suggested approach, refer to the Telerik REPL example on displaying the Telerik UI for ASP.NET Core Chart when its data source is empty.

More ASP.NET Core Chart Resources

• ASP.NET Core Chart Documentation

• ASP.NET Core Chart Demos

• ASP.NET Core Chart Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Telerik REPL Example on Displaying the Telerik UI for ASP.NET Core Chart When Its Data Source is Empty
• Client-Side API Reference of the Chart for ASP.NET Core
• Server-Side API Reference of the Chart for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base