Please refer to the ticket for more details.
Hi,
Thanks a lot for the Feature request, Kasim.
Our developers researched the possibilities for such improvement further and the only way to achieve it with the current implementation of RadHtmlChart is to nest RadPageLayout inside the chart. Unfortunately, this will be a major breaking change in the control affecting all of the clients which are relying on the current structure of the HtmlChart and we cannot afford breaking them.
Even if we handle the window.resize event and resize the chart automatically (not to mention that this might cause performance hit in many scenarios), this will not work in scenarios in which the chart is placed in resizable parent (e.g. RadSplitter), so the resizing depends a lot on the layout implemented by the developer themselves.
Unfortunately, all the reasons above make us decline this request in order to keep the behavior of the chart fast and consistant. For anyone interested in such functionality, you can detect the screen size on the server and to set the server properties of the chart accordingly with RadDeviceDetectionFramework:
https://docs.telerik.com/devtools/aspnet-ajax/controls/raddevicedetectionframework
Regards,
Vessy
Progress Telerik
Kasim(Customer):
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
Kasim:
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.
Vessy:
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:
Kasim:
When I text formatting in my other controls, I can use viewport based calculated font sizes instead of fixed font sizes.
e.g.
font-size:calc(100vh*16/1200);
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?
Vessy:
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:
Kasim:
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.
Vessy:
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: