HtmlChart - Client Templates for Labels and Tooltips

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

As of Q3 2012 the RadHtmlChart 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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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>

Find Assistance

Help Us Improve

Was this example helpful?