Resize of charts when browser size change

[Alberto]

I have 2 horizontal charts that are set to 100% width, when resizing the browser the charts are not resize to be 100% of the new browser size so they are left out of the window.

Is there any way to do this? could you add this feature to your charts so they can autoajust to any resolution when resizing the browser?

[Marin Bratanov]

Hi Alberto,

You can Follow the progress of such a feature in the following page (I have added your vote already): https://feedback.telerik.com/blazor/1426274-allow-charts-to-resize-reformat-on-changes-to-browser-zoom-or-resize.

This is unlikely to be "automatic", however, because there are far too many events/use cases for it to work out of the box. Elements in the layout may resize without the browser resizing, for example, so that cannot be captured by us, or a browser resize may not trigger a new layout size, but we cannot know we must not redraw the charts. Thus, the approach for making charts responsive is for us to expose a method that lets you do that,  so you can call it when needed by your business logic.

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor

[Shawn]

The Grid widget is automatic on resize.  Is there something special about the Chart widget that makes it not possible to be automatic?

[Marin Bratanov]

Hello Shawn,

The grid is HTML so it can use responsive design (things like em units, percentage widths, and so on). The charts are not - they would be impossible to style and render correctly if they were, and it would destroy performance. So, the charts are either SVG elements, or a <canvas>, depending on how you choose to render them, which cannot be responsive in the same CSS manner. Hence, the need for an explicit method call that can invoke re-calculations of the size. The following sample project shows one way to do that: https://github.com/telerik/blazor-ui/tree/master/chart/responsive-chart

 

Regards,
Marin Bratanov
Progress Telerik