Pending Review
Last Updated: 31 Mar 2019 03:13 by Kasim
Created on: 31 Mar 2019 03:08
Category: HtmlChart
Type: Feature Request
RadHtmlChart to have ViewBox Settings to handle changing screen resolutions

Please refer to the ticket for more details.


1 comment
Posted on: 31 Mar 2019 03:13


I would like to set the font size of Tooltip, labels, and legends to be dynamic based on the viewport size. The size I am setting using function. How can I apply the same to other texts in the

Vessy(Telerik Admin):

You can change the font settings of the chart labels by passing the desired values to the Kendo widget of the chart, redrawing the widget after that. Please, note that this is a time consuming operation and may lead to performance issues (you may want to stop the animation of the chart as well). The properties you need are:
 - legend.labels.font
 - series[0].labels.font
 - .labels.font
 - valueAxis.labels.font



This solution is not workable as it is making the page load extremely slow. Is it not possible to set a  to point to the associated elements as property during the design time instead of having a javascript to fix the font.


Yes, as pointed in my previous reply, this is a operation but setting these options through the client object of the chart is the only way to do it dynamically. If setting the values directly through the markup of the control is an acceptable solution, though, you can do it like follows:


When I text formatting in my other controls, I can use viewport based calculated font sizes instead of fixed font sizes.



Where  represents the height of the viewport. It is quick setting and does not impact of the application. 

Can we have similar settings for font size in the chart control?



The main difference between RadHtmlChart and of the other controls in our suite is that the chart is rendered via SVG object which does not allow applying of standard CSS styles (like the elements do). This is why, the only way to the styling of the chart is to do it grammatically, so the control will render its SVG objects depending o the set options.

The only remaining solution I can suggest you is to try passing the desired options to the chart directly through its setOptions() method (without redrawing it) and see if this will improve the performance better:


Can a property be added to RadHtmlChart control to pass the viewBox settings

This way once the viewBox settings are done properly, the control along with the text inside will scale proportionally. This will make it truly scalable for any size of the screen.


I cannot help but agree with you that such property will be useful, but the possibility for is implementation in RadHtmlChart has to be researched further by our developers. I will suggest you submit a feature request for such functionality in or Feedback portal so we can prioritize the item depending on the demand for it: