chart-no-data-message.md

title	page_title	description	slug	tags	component	type	res_type
Showing a Message When the Chart Has No Data	Showing a Message When the Chart Has No Data	An example on how to show a message when the {{ site.product }} Chart has no data.	chart-no-data-message	telerik, chart, no, data, message	chart	how-to	kb

Environment

Product	{{ site.product }} Chart
Progress {{ site.product }} version	Created with the 2022.2.802 version

Description

How can I display a message in the {{ site.product }} Chart when its data source is empty?

Solution

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

More {{ site.framework }} Chart Resources

• [{{ site.framework }} Chart Documentation]({%slug htmlhelpers_charts_aspnetcore%})

• [{{ site.framework }} Chart Demos](https://demos.telerik.com/{{ site.platform }}/charts/index)

{% if site.core %}

• {{ site.framework }} Chart Product Page

• [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiforcore%})

• Telerik UI for {{ site.framework }} Forums

{% else %}

• {{ site.framework }} Chart Product Page

• [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiformvc%})

• Telerik UI for {{ site.framework }} Forums {% endif %}

See Also

• Telerik REPL Example on Displaying the {{ site.product }} Chart When Its Data Source is Empty
• Client-Side API Reference of the Chart for {{ site.framework }}
• [Server-Side API Reference of the Chart for {{ site.framework }}](https://docs.telerik.com/{{ site.platform }}/api/chart)
• [Telerik UI for {{ site.framework }} Breaking Changes]({%slug breakingchanges_2023%})
• [Telerik UI for {{ site.framework }} Knowledge Base](https://docs.telerik.com/{{ site.platform }}/knowledge-base)