Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q1 2012 released 04/11/2012
select
  • Rate / Review ▼

    • Give your Feedback:

      Rate this demo:


Chart / AutoTextWrap

Choose the desired values in the RadioButtonList controls. Each RadioButtonList updates the corresponding RadChart setting.

Wrap Title

Wrap Legend


Did you know that you can add Telerik Silverlight Charts to your ASP.NET applications?

RadControls for Silverlight


  • RadChart provides automatic text wrapping. Just set AutoTextWrap property to true and RadChart will wrap the text for the following items:
    • Chart Title
    • Chart Legend Item Labels
    • Axis Item Labels
    • Axis Labels
    • MarkedZone Labels
    • EmptySeriesMessage Label
    • DataTable text elements

    In addition, you can contorl all these individually -- set AutoTextWrap to true , but disable some of the items and vice-versa. In the above example RadChart calculates the available space for the X axis item labels (the vertical axis labels) and does not wrap the text as there is no room for two-line labels. The chart elements are resized accordingly thanks to the automatic layout functionality.

    You can find more details about automatic text-wrapping in Radchart in this help article.

     

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Chart_Examples_Features_Text_Wrap.DefaultCS" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Charting" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <qsf:HeadTag ID="Headtag1" runat="server" />
    </head>
    <body class="BODY">
        <form id="form1" runat="server">
            <qsf:Header ShowSkinChooser="false" ID="Header1" runat="server" NavigationLanguage="c#" />
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1">
                <div class="bigModule">
                    <div class="bigModuleBottom">
                        <div class="title">
                            Choose the desired values in the RadioButtonList controls. Each RadioButtonList
                            updates the corresponding RadChart setting.
                            <br />
                            <br />
                            <table>
                                <tr>
                                    <td>
                                        <fieldset>
                                            <legend>Wrap Title</legend>
                                            <asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
                                            </asp:RadioButtonList>
                                        </fieldset>
                                    </td>
                                    <td>
                                        <fieldset>
                                            <legend>Wrap Legend</legend>
                                            <asp:RadioButtonList ID="RadioButtonList2" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RadioButtonList2_SelectedIndexChanged">
                                            </asp:RadioButtonList>
                                        </fieldset>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <br />
                <div>
                    <telerik:RadChart ID="RadChart1" runat="server" DataSourceID="SqlDataSource1" AutoTextWrap="true"
                        Skin="Wood" AutoLayout="true" Height="400px" Width="680px" SeriesOrientation="Horizontal">
                        <Series>
                            <telerik:ChartSeries DataYColumn="UnitPrice" Name="Ten Most Expensive Products">
                            </telerik:ChartSeries>
                        </Series>
                        <PlotArea>
                            <XAxis DataLabelsColumn="TenMostExpensiveProducts">
                            </XAxis>
                        </PlotArea>
                        <ChartTitle>
                            <TextBlock Text="Ten Most Expensive Products in the Northwind database">
                                <Appearance AutoTextWrap="True">
                                </Appearance>
                            </TextBlock>
                        </ChartTitle>
                    </telerik:RadChart>
                </div>
            </telerik:RadAjaxPanel>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                SelectCommand="Ten Most Expensive Products" SelectCommandType="StoredProcedure">
            </asp:SqlDataSource>
            <qsf:Footer runat="server" ID="Footer1" ShowCodeViewer="true" />
        </form>
    </body>
    </html>

Get more than expected!

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2012 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451