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

Resize of charts when browser size change

3 Answers 1006 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Alberto
Top achievements
Rank 1
Alberto asked on 12 Sep 2019, 12:11 PM

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?

3 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 13 Sep 2019, 05:08 AM

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

0
Shawn
Top achievements
Rank 2
answered on 18 Jun 2020, 03:43 AM
The Grid widget is automatic on resize.  Is there something special about the Chart widget that makes it not possible to be automatic?
0
Marin Bratanov
Telerik team
answered on 18 Jun 2020, 06:22 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Charts
Asked by
Alberto
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Shawn
Top achievements
Rank 2
Share this question
or