Skip to content

Commit 48af84d

Browse files
kb(htmlchart): Show an empty message
1 parent 34dc9e8 commit 48af84d

File tree

2 files changed

+67
-0
lines changed

2 files changed

+67
-0
lines changed
Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
---
2+
title: Show a Message When the Chart Has No Data
3+
description:
4+
type: how-to
5+
page_title: Show a Message When the Chart Has No Data
6+
slug: htmlchart-show-empty-message
7+
position:
8+
tags:
9+
ticketid: 1550649
10+
res_type: kb
11+
---
12+
13+
## Description
14+
15+
The following example demonstrates how to display a message in the HtmlChart when its data source is empty. Note that the `<div>` element of the message is positioned and decorated through `CSS`.
16+
17+
![htmlchart-no-data-message](images/htmlchart-no-data-message.png)
18+
19+
## Solution
20+
21+
````CSS
22+
.container {
23+
position: relative;
24+
}
25+
26+
.overlay {
27+
width: 100%;
28+
height: 100%;
29+
position: absolute;
30+
top: 0;
31+
left: 0;
32+
opacity: .2;
33+
background-color: #6495ed;
34+
text-align: center;
35+
}
36+
37+
.overlay div {
38+
position: relative;
39+
font-size: 34px;
40+
margin-top: -17px;
41+
top: 50%;
42+
}
43+
````
44+
45+
````ASP.NET
46+
<div class="container">
47+
<div class="overlay"><div>No data available</div></div>
48+
<telerik:RadHtmlChart ID="RadHtmlChart2" runat="server">
49+
<ClientEvents OnLoad="onChartLoad" />
50+
</telerik:RadHtmlChart>
51+
</div>
52+
<script>
53+
var $ = $ || $telerik.$;
54+
55+
function onChartLoad(chartO, args) {
56+
var chart = chartO.get_kendoWidget();
57+
var view = chart.dataSource.view();
58+
$(".overlay").toggle(view.length === 0);
59+
}
60+
</script>
61+
````
62+
63+
## See Also
64+
65+
* [Show Empty message in Kendo UI Chart widget](https://docs.telerik.com/kendo-ui/knowledge-base/show-no-data-available-message)
66+
67+
Loading

0 commit comments

Comments
 (0)