Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 02 Jan 2023 15:03 by ADMIN
Release 2.0.0
John
Created on: 21 Aug 2019 14:17
Category: Charts
Type: Feature Request
7
Allow charts to resize / reformat on changes to browser zoom or resize

If a chart is too narrow and x-axis labels overlap, the user can zoom out and refresh the charts to allow the labels to fit. This feature request is to allow the charts to reformat themselves as the zoom level is changed (without having to refresh the page). Steps to reproduce:

    • Make browser narrow (say half screen)
    • Change zoom to 500%
    • Go to https://demos.telerik.com/blazor-ui/chart/line-chart
    • See line chart is squished with overlapping x-axis labels
    • Zoom out to 100%
    • ­See line chart remains squished with overlapping x-axis labels even though there is a lot more room
    • Now refresh the page
    • See line chart is no longer squished with x-axis labels visible

9 comments
ADMIN
Stamo Gochev
Posted on: 02 Jan 2023 15:03

Hi Emanuel,

Thanks for your contribution - a team member will review the changes and post updates in the pull request.

Regards,
Stamo Gochev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Emanuel
Posted on: 28 Dec 2022 10:09

Hi, I created a pull request.

Regards

Emanuel

ADMIN
Stamo Gochev
Posted on: 28 Dec 2022 05:05

Hi Emanuel,

As the responsive chart example is publicly available at:

https://github.com/telerik/blazor-ui/tree/master/chart/responsive-chart

would you like to open a pull request with your suggestion for the improvement? Your contribution will be highly appreciated.

Regards,
Stamo Gochev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Emanuel
Posted on: 21 Dec 2022 14:45

Just a note on the "responsive-chart" solution. In the windowResizeHandler.js you should change to the correct ASSEMBLY NAME, not the namespace of the solution. They will not always be the same ;)

max
Posted on: 28 Apr 2021 11:23
syncfusion, radzen , component one ... all have responsive chart without any configuration
ADMIN
Marin Bratanov
Posted on: 01 Jan 2021 09:45

Hello Irene,

This has been available since 2.0.0 which was more than a year ago, you can find example of making a chart responsive here and here.

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Irene
Posted on: 31 Dec 2020 17:50
Are there plans for this to be responsive in the near future?
ADMIN
Marin Bratanov
Posted on: 16 Sep 2019 06:17

Hello,

In the upcoming 2.0.0 release, the .Refresh() method of the chart will re-render it. This means that you will be able to call it from anywhere in your code to resize the chart. A basic example is available in the documentation (see the end of the article, even though I have made a mistake in the method name - it is Refresh() and not Resize(), and it should not have been live yet): https://docs.telerik.com/blazor-ui/components/chart/overview#chart-size.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
ADMIN
Marin Bratanov
Posted on: 22 Aug 2019 06:26
Hello John,

Ultimately, that would probably have to be done through a sort of a .Resize() or .Redraw() method that the chart needs to expose, so it can re-render with its settings and new dimensions. The way you would use that is to call it from a JS Invokable method in your component when needed (e.g., when a zoom change is detected, or orientation change, or window.resize, this will depend on the app). Of course, at this moment I am mostly guessing, as this topic needs detailed research before it can be implemented.

At the moment, redrawing the component is perhaps the easiest way to get this done - changing properties, navigating between views, etc. Of course, this is less than ideal, which is why I am keeping this enhancement idea open (I just took the liberty of amending the title a little). I've added your vote, and you can also Follow the page to get status updates.


Regards,
Marin Bratanov
Progress Telerik UI for Blazor
Create an account Log In
View
Type
Status
Category