New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Show a Message When the Chart Has No Data

Environment

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

Description

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

Solution

The following example demonstrates how to achieve such behavior. 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 Chart when its data source is empty.

See Also

In this article