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

Multiple Font Sizes for Multi line Titles

1 Answer 113 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Rodney
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.

Thanks

Rodney

1 Answer, 1 is accepted

Sort by
0
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('@', '');
                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
Tags
Chart (HTML5)
Asked by
Rodney
Top achievements
Rank 2
Answers by
Danail Vasilev
Telerik team
Share this question
or