This is a migrated thread and some comments may be shown as answers.

Multiple Font Sizes for Multi line Titles

1 Answer 98 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 2
Rodney asked on 29 Dec 2015, 06:54 PM

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.



1 Answer, 1 is accepted

Sort by
Danail Vasilev
Telerik team
answered on 04 Jan 2016, 07:34 AM
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
Chart (HTML5)
Asked by
Top achievements
Rank 2
Answers by
Danail Vasilev
Telerik team
Share this question