HtmlChart - Multiline Labels

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

You can split labels and titles in RadHtmlChart into multiple lines by using the "\n" line feed characters. The feature is available since Q3 2014.

Note: Tooltips in RadHtmlChart are rendered as pure HTML and therefore you must use <br /> tags for line breaks there.

  • 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" Width="800px" Height="500px" Skin="Silk">
            <ChartTitle Text="Top 3 Economies of \n India"></ChartTitle>
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries Name="Year:\n2011-12">
                        <LabelsAppearance>
                            <ClientTemplate>
                                #=series.name#\n
                                GDP: #=value#
                            </ClientTemplate>
                        </LabelsAppearance>
                        <TooltipsAppearance>
                            <ClientTemplate>
                                #=series.name#<br />
                                GDP: #=value#<br />
                                State: #=category#
                            </ClientTemplate>
                        </TooltipsAppearance>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="1199000" />
                            <telerik:CategorySeriesItem Y="679000" />
                            <telerik:CategorySeriesItem Y="662000" />
                        </SeriesItems>
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries Name="Year:\n2012-13">
                        <LabelsAppearance>
                            <ClientTemplate>
                                #=series.name#\n
                                GDP: #=value#
                            </ClientTemplate>
                        </LabelsAppearance>
                        <TooltipsAppearance>
                            <ClientTemplate>
                                #=series.name#<br />
                                GDP: #=value#<br />
                                State: #=category#
                            </ClientTemplate>
                        </TooltipsAppearance>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="1372000" />
                            <telerik:CategorySeriesItem Y="768000" />
                            <telerik:CategorySeriesItem Y="754000" />
                        </SeriesItems>
                    </telerik:ColumnSeries>
                </Series>
                <XAxis>
                    <Items>
                        <telerik:AxisItem LabelText="Maha-\nrashtra" />
                        <telerik:AxisItem LabelText="Uttar\nPradesh" />
                        <telerik:AxisItem LabelText="Andhra\nPradesh" />
                    </Items>
                </XAxis>
                <YAxis>
                    <TitleAppearance Text="Nominal GDP\n(in Crores of Rupees)"></TitleAppearance>
                    <MinorGridLines Visible="false" />
                </YAxis>
            </PlotArea>
        </telerik:RadHtmlChart>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?