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

    Client Templates for Labels and Tooltips

    Wooden TableGlass TableRed Leather CouchLoungeBlack SofaPlywood TableWhite Leather ChairGrey SofaSmall Glass TableModern Design ChairBlack Leather Couch0lowprice500lowprice1000goodprice1500highprice2000highprice2500highprice3000highprice3500highprice4000highprice4500highprice5000highpriceWooden Table ($3534)Glass Table ($546)Red Leather Couch ($1534)Lounge ($356)Black Sofa ($657)Plywood Table ($234)White Leather Chair ($436)Grey Sofa ($444)Small Glass Table ($3480)Modern Design Chair ($777)Black Leather Couch ($4565)Products by Price(11 items)

    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.

    • DefaultCS.aspx
    <%@ Page Language="C#"  %>
     
    <%@ 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