Multiple Font Sizes for Multi line Titles

2 posts, 0 answers
  1. Rodney
    Rodney avatar
    36 posts
    Member since:
    Mar 2015

    Posted 29 Dec 2015 Link to this post

    Is there a way to create a Multiline title so that the font size and style is different for the second line?

    I want my main title, first line, to be larger while the second line, subtitle, should be smaller and italic. I'm setting all my title attributes currently on the server side.



  2. Danail Vasilev
    Danail Vasilev avatar
    1476 posts

    Posted 04 Jan Link to this post

    Hello Rodney,

    The desired functionality is not supported out of the box by the chart. 

    You can, however, manually apply the font style by getting the element with JavaScript.

    <script type="text/javascript">
        function pageLoad() {
            $ = $telerik.$;
            var textEl = $('text');
            for (var i = 0; i < textEl.length; i++) {
                var currTE = textEl[i];
                if (currTE.textContent.indexOf("@") != -1) {
                    currTE.textContent = currTE.textContent.replace('@', '');
           = "25px Arial,Helvetica,sans-serif";
    <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
        <ChartTitle Text="first line \n @second line"></ChartTitle>
                <telerik:ColumnSeries Name="Series 1">
                        <telerik:CategorySeriesItem Y="30" />
                        <telerik:CategorySeriesItem Y="10" />
                        <telerik:CategorySeriesItem Y="20" />
                <LabelsAppearance RotationAngle="33"></LabelsAppearance>
                    <telerik:AxisItem LabelText="Item 1" />
                    <telerik:AxisItem LabelText="Item 2" />
                    <telerik:AxisItem LabelText="Item 3" />

    You may also find a similar approach in this feedback item -

    Danail Vasilev
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. DevCraft R3 2016 release webinar banner
Back to Top