Last Updated: 28 Jan 2020 15:20 by ADMIN
Created on: 25 Nov 2019 23:23
Category: HtmlChart
Type: Feature Request
Provide a way to specify font-weight for text elements in the Kendo chart widget.

We want the Kendo chart widget (RadHtmlChart actually) to blend in with the webpage we use it in. In this page, we use font-weight 300. Since there is no way to specify the font-weight in the chart, we have had to use a hack to specify it:


            function chartLoad(chart, args) {
                chart.get_kendoWidget().setOptions({ title: { font: "20px sans-serif; font-weight: 300" }});


This is not only a clumpsy hack, but it also make use of a custom skin impossible (for setting the font).

Posted on: 28 Jan 2020 15:20

Hi Fredrik,

Thanks a lot for your feature suggestion. We have transferred it to the RadHtmlChart backlog, so you can track its progress here:


For the time being, the HtmlChart's title weight can be set either through its udnerlying Kendo UI widget (like found by you), or through the  ChartTitle.Appearance.TextStyle.Bold property (accepting only Boolean values):

        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="700" Height="480px">
            <ChartTitle Text="Some Title">
                    <TextStyle Bold="true" />

Progress Telerik

Get quickly onboarded and successful with UI for ASP.NET AJAX with the Virtual Classroom technical trainings, available to all active customers. Learn More.
Posted on: 27 Jan 2020 08:53

Thanks, I wasn't aware of that.

For the RadHtmlChart, though, it still would have to meant that we would have to use JavaScript, since there is no way to specify the font CSS string using the API, i.e. the by configuring the TextStyle class.

So, please provide FontWeight as a parameter to the TextStyle class.


Alex Hajigeorgieva
Posted on: 24 Jan 2020 07:39

Hi, Fredrik,

The font property accepts the font weight, however, you should add it before the size following the standard font syntax:


title: {
    text: "Title",
    font: "300 20px sans-serif"

// or

title: {
    text: "Title",
    font: "bold 20px sans-serif"

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.