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

Client Templates for Labels and Tooltips

As of Q3 2012 the ASP.NET AJAX Chart offers client-side templates for the labels and tooltips used in the series. This property allows for runtime evaluation of the dataItem object associated with each series item. This means that additional columns from the data source can be displayed as the content instead of only a string formatted around the value. The property that controls this is ClientTemplate and is exposed in the LabelsAppearance and TooltipsAppearance tags for each series.

You can learn more about client templates in RadHtmlChart in our documentation—Client Templates Overview.

As of Q2 2016, client-side templates are also available for the YAxis and XAxis labels, and for the Legend items. Specifics about Legend's and Axes' client templates configuration is available in the Using Client Templates in Legend and Axes Labels article.

  • DefaultVB.aspx
<%@ Page Language="vb"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-wide">
        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" DataSourceID="SqlDataSource1">
            <PlotArea>
                <Series>
                    <telerik:BarSeries DataFieldY="Price">
                        <LabelsAppearance>
                            <ClientTemplate>#=dataItem.ProductName# ($#=dataItem.Price#)</ClientTemplate>
                        </LabelsAppearance>
                        <TooltipsAppearance Color="White">
                            <ClientTemplate>#=dataItem.ProductName#<br />#=dataItem.Manufacturer#</ClientTemplate>
                        </TooltipsAppearance>
                    </telerik:BarSeries>
                </Series>
                <XAxis DataLabelsField="ProductName">
                </XAxis>
                <YAxis>
                    <LabelsAppearance>
                        <ClientTemplate>#=value# \n #if (value < 1000) {# low #} else if(value == 1000) {# good #} else {# high #}# \n price</ClientTemplate>
                    </LabelsAppearance>
                </YAxis>
            </PlotArea>
            <Legend>
                <Appearance>
                    <ClientTemplate>Products by Price \n (#= series.data.length # items) </ClientTemplate>
                </Appearance>
            </Legend>
        </telerik:RadHtmlChart>
    </div>

    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
        SelectCommand="SELECT [ProductName], [Manufacturer], [Price] FROM [Products]"></asp:SqlDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance