New to Telerik UI for ASP.NET AJAXStart a free 30-day trial

Basic Configuration

The ASP.NET AJAX Chart provides a rich set of properties and events which can help you configure the look and behaviour of the control. In this article you will find a list with the available public methods and properties of the control, and the arguments they accept.

Attribute Properties of the Main Tag

NameDescription
DataSourceIDUsed to set a declarative data source to the RadHtmlChart control (e.g., SqlDataSource, LinqDataSource, EntityDataSource).
DataSourceUsed to set a programmatic data source to the RadHtmlChart control (e.g., a DataTable, List of custom objects, DataSet).
HeightGet/set the height of the RadHtmlChart control in pixels.
InvokeLoadDataDetermines when the actual data will be loaded. Takes a member of the Telerik.Web.UI.HtmlChart.LoadDataInvocation enumeration: AfterPageLoad - The data is loaded just after the entire page is loaded via a lightweight callback. Its effect would be noticeable in larger (slower) pages; - FromCode - Data is loaded only when explicitly called via the client-side API of the control (the loadData() method) via a lightweight callback; - OnPageLoad - Data is loaded when the page is being loaded along with the rest of the controls. This is the only case where it is available in the page markup and a callback is not performed.
OnClientSeriesClickedThe name of the handler for the OnClientSeriesClicked(deprecated) client-side event.
OnClientSeriesHoveredThe name of the handler for the OnClientSeriesHovered(deprecated) client-side event.
LayoutA property indicating whether the chart will be rendered as Default, Sparkline or Stock chart.
RenderAsA property indicating whether the chart will be rendered as Canvas, SVG or VML . Setting the property to Auto will instruct the chart to automatically decide how to be rendered, based on the browser. This property is available since Q1 2015 .
TransitionsGet/set whether an animation is played when the chart is rendered.
WidthGet/set the width of the control in pixels.

Attribute Property in Main Tag > Appearance > FillStyle

NameDescription
BackgroundColorThe background color of the main chart area. Can take a common color name or a hex value.

Attribute Property in Main Tag > ChartTitle

NameDescription
TextA string for the chart title.

Attribute Properties in Main Tag > ChartTitle > Appearance

NameDescription
AlignThe alignment of the title according to the chart. An enumeration ( Telerik.Web.UI.HtmlChart.ChartTitleAlign ) with one of the following values: Left, Center or Right.
BackgroundColorThe background color of the title area. Can take a common color name or a hex value.
HeightThe legend height when the legend orientation is set to Vertical.
OffsetXThe X offset of the chart legend. The offset is relative to the current position of the legend.
OffsetYThe Y offset of the chart legend. The offset is relative to the current position of the legend.
OrientationThe orientation of the legend items. Takes Vertical (i.e., legend items are added vertically) and Horizontal (i.e., legend items are added horizontally) values.
PositionThe vertical position of the chart title. An enumeration ( Telerik.Web.UI.HtmlChart.ChartTitlePosition ) with the following values: Top, Bottom, Left, Right and Custom. Custom value positions the legend to the upper left corner and is used with OffsetX and OffsetY properties
TextStyleControls the appearance of the labels in this element. See the Labels and Titles Font Settings article for detailed information.
WidthThe legend width when the legend orientation is set to Horizontal.
VisibleDefines whether the chart title is shown. Values are True or False.

Attribute Properties in Main Tag > Legend > Appearance

NameDescription
AlignThe alignment of the chart legend relative to the position. Takes the following values - Start, Center and End.
BackgroundColorThe background color of the legend area. Can take a common color name or a hex value.
PositionThe position of the chart legend relative to the plot area. An enumeration (Telerik.Web.UI.HtmlChart.ChartLegendPosition) with the following values: Bottom, Left, Right, Top.
ReversedDefines whether the items in the legend will be reversed. Values are True or False.
TextStyleControls the appearance of the labels in this element. See the Labels and Titles Font Settings article for detailed information.
VisibleDefines whether the chart legend is shown. Values are True or False.

Attribute Property in Main Tag > PlotArea > Appearance > FillStyle

NameDescription
BackgroundColorThe background color of the plot area. Can take a common color name or a hex value.

Attribute Properties in Main Tag > PlotArea > Appearance > TextStyle

NameDescription
MarginTakes from one to four integers that specify all the margins the PlotArea will have in pixels.

For example:

  • Margin="15" —all four margins are 15px.

  • Margin="15 30" —top and bottom margins are 15px; right and left margins are 30px.

  • Margin="15 30 45" —top margin is 15px; right and left margins are 30px; bottom margin is 45px.

  • Margin="15 30 45 60" —top margin is 15px; right margin is 30px; bottom margin is 45px; left margin is 60px;

Attribute Properties in Main Tag > PlotArea > CommonTooltipsAppearance

NameDescription
BackgroundColorThe background color of the tooltips for the items from this series. Can take a common color name or a hex value. If it is not set explicitly the control will pick one according to currenly used Skin.
ColorThe text color of the tooltips for the items from this series. Can take a common color name or a hex value. If it is not set explicitly the control will pick one according to the currently used Skin.
ClientTemplateA string for the client template that will be applied to the tooltips when they render. It can use any column from the data source given to the chart through the following syntax: #=dataItem.ColumnName# where the string delimited inside #=.....# is the expression to be evaluated. The tooltips are HTML so HTML can be used outside of the expression tags. See here for more information.
DataFormatStringThe format string that will form the labels' text. The {0} placeholder is used to denote the Y value of the item. For the ScatterSeries and ScatterLineSeries you can use {1} for the X value. Although CandlestickSeries ToolTips have already predefined pattern by design it can be modified through {0} , {1} , {2} , {3} and {4} placeholders that denotes accordingly the Open, High, Low, Close and the corresponding XAxis item's value.
SharedDefines whether the chart will display a single tooltip for every category. Values are True or False.
SharedTemplateA string for the shared template that will be applied to the tooltips when they render. It can use the points (the category points) and category (the category name) fields through the following syntax: #= category #, #= points[0].series.name#, #= points[0].value # where the string delimited inside #=.....# is the expression to be evaluated. The tooltips are HTML so HTML can be used outside of the expression tags. See here for more information.
VisibleDefines whether the tooltips will be shown. Values are True or False.

See Also