Display HTML and Execute JavaScript

Updated on Aug 24, 2026

Overview

You can display HTML in the ASP.NET AJAX Chart, by using tooltips and/or execute JavaScript (i.e., declare variables,if statements, for loops, etc.) in ClientTemplate and SharedTemplate elements. You can find more information on these features in the sections below - Execute JavaScript with a ClientTemplate and Display HTML with a ClientTemplate.

Execute JavaScript with a ClientTemplate

ClientTemplates let you use JavaScript, following this pattern: "#if (condition) {# expression #}#".

• If Statement:

  ASP.NET

  <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="300px" Height="300px">
  	<PlotArea>
  		<Series>
  			<telerik:PieSeries>
  				<LabelsAppearance>
  					<ClientTemplate>
  #if (percentage > 0.15) {# #=value# #} else {# 0 #} #
  					</ClientTemplate>
  				</LabelsAppearance>
  				<TooltipsAppearance>
  					<ClientTemplate>
  #if (percentage > 0.15) {# #=value# #} else {# 0 #} #
  					</ClientTemplate>
  				</TooltipsAppearance>
  				<SeriesItems>
  					<telerik:PieSeriesItem Y="30" />
  					<telerik:PieSeriesItem Y="60" />
  					<telerik:PieSeriesItem Y="10" />
  				</SeriesItems>
  			</telerik:PieSeries>
  		</Series>
  	</PlotArea>
  </telerik:RadHtmlChart>

  Only PieSeries/DonutSeries items whose percentage of the whole is higher than 15% will display their actual value in tooltips and labels. The rest of the series items will display a zero value.

• For Loop:

  ASP.NET

  <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="800" Height="500">
  	<PlotArea>
  		<CommonTooltipsAppearance Shared="true">
  			<SharedTemplate>
  				<div>GDP in #= category #</div>
  				# for (var i = 0; i < points.length; i++) { # 
  				<div>#: points[i].series.name#: #: points[i].value #</div>
  				# } #
  			</SharedTemplate>
  		</CommonTooltipsAppearance>
  		<XAxis>
  			<Items>
  				<telerik:AxisItem LabelText="1999"></telerik:AxisItem>
  				<telerik:AxisItem LabelText="2000"></telerik:AxisItem>
  			</Items>
  		</XAxis>
  		<Series>
  			<telerik:ColumnSeries Name="Transport">
  				<SeriesItems>
  					<telerik:CategorySeriesItem Y="32735.7"></telerik:CategorySeriesItem>
  					<telerik:CategorySeriesItem Y="37911.3"></telerik:CategorySeriesItem>
  				</SeriesItems>
  			</telerik:ColumnSeries>
  			<telerik:ColumnSeries Name="Community">
  				<SeriesItems>
  					<telerik:CategorySeriesItem Y="12453.9"></telerik:CategorySeriesItem>
  					<telerik:CategorySeriesItem Y="14394.3"></telerik:CategorySeriesItem>
  				</SeriesItems>
  			</telerik:ColumnSeries>
  		</Series>
  	</PlotArea>
  </telerik:RadHtmlChart>

  The tooltip will display three lines of text. The first line shows the category and the next two lines show the Y-values of both items from this category.

• Call a function

  ASP.NET

  <script>
  	function formatLabel(number) {
  		if (number < 1000)
  			return number;
  		if (number < 1000000)
  			return number / 1000 + "K";
  		if (number < 1000000000)
  			return number / 1000000 + "M";
  	}
  </script>
  <telerik:RadHtmlChart runat="server" ID="BarChart1" Width="800px" Height="300px">
  	<PlotArea>
  		<YAxis>
  			<TitleAppearance Text="Quantity" />
  			<LabelsAppearance>
  				<ClientTemplate>
  					#= formatLabel(value) #
  				</ClientTemplate>
  			</LabelsAppearance>
  		</YAxis>
  		<Series>
  			<telerik:BarSeries Name="Product A">
  				<SeriesItems>
  					<telerik:CategorySeriesItem Y="100" />
  					<telerik:CategorySeriesItem Y="20000" />
  					<telerik:CategorySeriesItem Y="1000000" />
  				</SeriesItems>
  			</telerik:BarSeries>
  		</Series>
  	</PlotArea>
  </telerik:RadHtmlChart>

Display HTML with a ClientTemplate

ClientTemplate can render HTML from a data source following this syntax: "#: #". Figure 1 shows an example of using a ClientTemplate to render HTML in a tooltip.

Example 1: This example illustrates how to render and display HTML in tooltips.

ASP.NET

<telerik:radhtmlchart runat="server" id="RadHtmlChart1" skin="Vista">
	<PlotArea>
		<Series>
			<telerik:ColumnSeries DataFieldY="myDataColumn">
				<TooltipsAppearance Color="White">
					<ClientTemplate>
						HTML is displayed: #:dataItem.myHTMLColumn# <br/> 
						HTML is not displayed: #=dataItem.myHTMLColumn#
					</ClientTemplate>
				</TooltipsAppearance>
			</telerik:ColumnSeries>
		</Series>
		<XAxis DataLabelsField="myLabelsColumn"></XAxis>
	</PlotArea>
</telerik:radhtmlchart>

C#

protected void Page_Load(object sender, EventArgs e)
{
	if (!IsPostBack)
	{
		RadHtmlChart1.DataSource = GetData();
		RadHtmlChart1.DataBind();
	}
}

protected DataTable GetData()
{
	DataTable tbl = new DataTable();
	tbl.Columns.Add(new DataColumn("myDataColumn"));
	tbl.Columns.Add(new DataColumn("myLabelsColumn"));
	tbl.Columns.Add(new DataColumn("myHTMLColumn"));
	tbl.Rows.Add(new object[] { 1, "item aaa", "<span>lorem ipsum 1</span>" });
	tbl.Rows.Add(new object[] { 2, "item bbb", "<span>lorem ipsum 2</span>" });
	tbl.Rows.Add(new object[] { 3, "item ccc", "<span>lorem ipsum 3</span>" });
	return tbl;
}

VB

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
	If Not IsPostBack Then
		RadHtmlChart1.DataSource = GetData()
		RadHtmlChart1.DataBind()
	End If
End Sub

Protected Function GetData() As DataTable
	Dim tbl As New DataTable()
	tbl.Columns.Add(New DataColumn("myDataColumn"))
	tbl.Columns.Add(New DataColumn("myLabelsColumn"))
	tbl.Columns.Add(New DataColumn("myHTMLColumn"))
	tbl.Rows.Add(New Object() {1, "item aaa", "<span>lorem ipsum 1</span>"})
	tbl.Rows.Add(New Object() {2, "item bbb", "<span>lorem ipsum 2</span>"})
	tbl.Rows.Add(New Object() {3, "item ccc", "<span>lorem ipsum 3</span>"})
	Return tbl
End Function

Figure 1: Using a ClientTemplate to display HTML in a tooltip.

Since tooltips are rendered as pure HTML and labels as part of the SVG/VML rendering, HTML can only be rendered inside tooltips.

You can use number formats inside Client Templates . You can find more information in this Formatting Numbers article in the section called Formatting Labels and Tooltips by Using their Client Templates.

See Also

• Overview

• Shared Template for ToolTips

• Format Numbers