Multiple Font Sizes for Multi line Titles

2 posts, 0 answers
  1. Rodney
    Rodney avatar
    40 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.

    Thanks

    Rodney

  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 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('@', '');
                    currTE.style.font = "25px Arial,Helvetica,sans-serif";
                }
            }
        }
    </script>
    <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
        <ChartTitle Text="first line \n @second line"></ChartTitle>
        <PlotArea>
            <Series>
                <telerik:ColumnSeries Name="Series 1">
                    <SeriesItems>
                        <telerik:CategorySeriesItem Y="30" />
                        <telerik:CategorySeriesItem Y="10" />
                        <telerik:CategorySeriesItem Y="20" />
                    </SeriesItems>
                </telerik:ColumnSeries>
            </Series>
            <XAxis>
                <LabelsAppearance RotationAngle="33"></LabelsAppearance>
                <Items>
                    <telerik:AxisItem LabelText="Item 1" />
                    <telerik:AxisItem LabelText="Item 2" />
                    <telerik:AxisItem LabelText="Item 3" />
                </Items>
            </XAxis>
        </PlotArea>
    </telerik:RadHtmlChart>

    You may also find a similar approach in this feedback item - http://feedback.telerik.com/Project/108/Feedback/Details/38633

    Regards,
    Danail Vasilev
    Telerik
    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. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top