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

Automatic Text-wrapping

RadChart has been replaced by RadHtmlChart, Telerik's client-side charting component. If you are considering RadChart for new development, examine the RadHtmlChart documentation and online demos first to see if it will fit your development needs. If you are already using RadChart in your projects, you can migrate to RadHtmlChart by following these articles: Migrating Series, Migrating Axes, Migrating Date Axes, Migrating Databinding, Features parity. Support for RadChart is discontinued as of Q3 2014, but the control will remain in the assembly so it can still be used. We encourage you to use RadHtmlChart for new development.

RadChart supports automatic Notepad-like word-wrapping functionality for the following text elements:

Chart Title
Chart Legend Item Labels
Axis Item Labels
Axis Labels
MarkedZone Labels
EmptySeriesMessage Label
DataTable-related text elements

Automatic text-wrapping is disabled by default. The chart control provides fine-grained API that allows you to enable wrapping for all elements, or alternatively on individual element basis.

The behavior is controlled either via the RadChart.AutoTextWrap property that enables text-wrapping globally for all supported chart elements, or you can set the AutoTextWrap properties for the respective chart elements. Setting a value for individual element always takes precedence i.e. you can have the global RadChart.AutoTextWrap property set to true, and still disable the text-wrapping for the title by setting its respective AutoTextWrap property to false.

AutoTextWrap properties that control the wrapping settings for individual elements (usually under Appearance on the respective TextBlock for each element):

Chart Title (ChartTitle.TextBlock.Appearance.AutoTextWrap)
Legend-related
- For all legend items (Legend.Appearance.ItemTextAppearance.AutoTextWrap)
- For individual legend item (Legend -> Items -> LabelItem.TextBlock.Appearance.AutoTextWrap)
Axis-related
- For axis label (Axis.AxisLabel.Appearance.AutoTextWrap)
- For all axis item labels (Axis.Appearance.TextAppearance.AutoTextWrap)
- For individual axis item label (Axis -> Items -> ChartAxisItem.TextBlock.AutoTextWrap)
DataTable text elements (PlotArea.DataTable.Appearance.AutoTextWrap)
MarkedZone Labels (ChartMarkedZone.Label.TextBlock.Appearance.AutoTextWrap)
EmptySeriesMessage (PlotArea.EmptySeriesMessage.TextBlock.Appearance.AutoTextWrap)

Text-wrapping enabled for all chart elements:

XML

<telerik:RadChart ID="RadChart1" runat="server" DataSourceID="AccessDataSource1"
	AutoTextWrap="true" Skin="Wood" AutoLayout="true" Height="500px" Width="700px"
	SeriesOrientation="Horizontal">
	<Series>
		<telerik:ChartSeries DataYColumn="UnitPrice" Name="Product Unit Price">
		</telerik:ChartSeries>
	</Series>
	<Series>
		<telerik:ChartSeries DataYColumn="UnitPrice" Name="Product Unit Price">
		</telerik:ChartSeries>
	</Series>
	<PlotArea>
		<XAxis AutoScale="false">
			<Items>
				<telerik:ChartAxisItem TextBlock-Text="Cote de Blaye" />
				<telerik:ChartAxisItem TextBlock-Text="Thuringer Rostbratwurst" />
				<telerik:ChartAxisItem TextBlock-Text="Mishi Kobe Niku" />
				<telerik:ChartAxisItem TextBlock-Text="Sir Rodney's Marmalade" />
				<telerik:ChartAxisItem TextBlock-Text="Carnarvon Tigers" />
				<telerik:ChartAxisItem TextBlock-Text="Raclette Courdavault" />
				<telerik:ChartAxisItem TextBlock-Text="Manjimup Dried Apples" />
				<telerik:ChartAxisItem TextBlock-Text="Tarte au sucre" />
				<telerik:ChartAxisItem TextBlock-Text="Ipoh Coffee" />
				<telerik:ChartAxisItem TextBlock-Text="Rossle Sauerkraut" />
			</Items>
		</XAxis>
	</PlotArea>
	<ChartTitle>
		<Appearance Dimensions-Margins="0,50,0,50">
		</Appearance>
		<TextBlock Text="Ten Most Expensive Products: AutoTextWrap set to true globally." />
	</ChartTitle>
</telerik:RadChart>
<asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="-/Nwind.mdb"
	SelectCommand="SELECT * FROM [Ten Most Expensive Products]"></asp:AccessDataSource>

Result:

Text-wrapping enabled for all elements, but explicitly disabled for the axis item labels:

XML

<telerik:RadChart ID="RadChart2" runat="server" DataSourceID="AccessDataSource1"
	AutoTextWrap="true" Skin="Metal" AutoLayout="true" Height="500px" Width="700px"
	SeriesOrientation="Horizontal">
	<Series>
		<telerik:ChartSeries DataYColumn="UnitPrice" Name="Product Unit Price">
		</telerik:ChartSeries>
	</Series>
	<Series>
		<telerik:ChartSeries DataYColumn="UnitPrice" Name="Product Unit Price">
		</telerik:ChartSeries>
	</Series>
	<PlotArea>
		<XAxis AutoScale="false">
			<Appearance TextAppearance-AutoTextWrap="false">
			</Appearance>
			<Items>
				<telerik:ChartAxisItem TextBlock-Text="Cote de Blaye" />
				<telerik:ChartAxisItem TextBlock-Text="Thuringer Rostbratwurst" />
				<telerik:ChartAxisItem TextBlock-Text="Mishi Kobe Niku" />
				<telerik:ChartAxisItem TextBlock-Text="Sir Rodney's Marmalade" />
				<telerik:ChartAxisItem TextBlock-Text="Carnarvon Tigers" />
				<telerik:ChartAxisItem TextBlock-Text="Raclette Courdavault" />
				<telerik:ChartAxisItem TextBlock-Text="Manjimup Dried Apples" />
				<telerik:ChartAxisItem TextBlock-Text="Tarte au sucre" />
				<telerik:ChartAxisItem TextBlock-Text="Ipoh Coffee" />
				<telerik:ChartAxisItem TextBlock-Text="Rossle Sauerkraut" />
			</Items>
		</XAxis>
	</PlotArea>
	<ChartTitle>
		<Appearance Dimensions-Margins="0,50,0,50">
		</Appearance>
		<TextBlock Text="Ten Most Expensive Products: AutoTextWrap set to true globally, wrapping disabled for axis item labels explicitly." />
	</ChartTitle>
</telerik:RadChart>
<asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="-/Nwind.mdb"
	SelectCommand="SELECT * FROM [Ten Most Expensive Products]"></asp:AccessDataSource>

Result:

Text-wrapping enabled only for the axis item labels explicitly:

XML

<telerik:RadChart ID="RadChart3" runat="server" DataSourceID="AccessDataSource1"
	Skin="Marble" AutoLayout="true" Height="500px" Width="700px" SeriesOrientation="Vertical">
	<Series>
		<telerik:ChartSeries DataYColumn="UnitPrice" Name="Product Unit Price">
		</telerik:ChartSeries>
	</Series>
	<Series>
		<telerik:ChartSeries DataYColumn="UnitPrice" Name="Product Unit Price">
		</telerik:ChartSeries>
	</Series>
	<PlotArea DataTable-Visible="false">
		<XAxis AutoScale="false">
			<Appearance TextAppearance-TextProperties-Color="Black">
				<TextAppearance AutoTextWrap="true" TextProperties-Font="Georgia, 10pt">
				</TextAppearance>
				<LabelAppearance Position-AlignedPosition="Left" RotationAngle="45">
				</LabelAppearance>
			</Appearance>
			<Items>
				<telerik:ChartAxisItem TextBlock-Text="Cote de Blaye" />
				<telerik:ChartAxisItem TextBlock-Text="Thuringer Rostbratwurst" />
				<telerik:ChartAxisItem TextBlock-Text="Mishi Kobe Niku" />
				<telerik:ChartAxisItem TextBlock-Text="Sir Rodney's Marmalade" />
				<telerik:ChartAxisItem TextBlock-Text="Carnarvon Tigers" />
				<telerik:ChartAxisItem TextBlock-Text="Raclette Courdavault" />
			</Items>
		</XAxis>
	</PlotArea>
	<ChartTitle>
		<TextBlock Text="Sample Chart Products: wrapping only axis item labels." />
	</ChartTitle>
</telerik:RadChart>
<asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="-/Nwind.mdb"
	SelectCommand="SELECT * FROM [Ten Most Expensive Products]"></asp:AccessDataSource>

Result: