Circular gauge does not resize when browser resizes

[Michael Aston]

I have some charts and a circular gauge inside a dashboard layout. When the browser resizes the charts automatically resize (I have no code for this) but the circular gauge does not. See the attached video.

How can I get the circular gauge to resize like the charts when the browser resizes?

Regards,

Mike

Attachment: 20201203_15h26_03_a73947cc.zip

[Swetha Babu]

Hi Michael,

Thank you for contacting Syncfusion support.

At present, we do not support for browser resize handling in the Circular gauge component. However, we will check this and update you with further details on December 8, 2020.

Regards,
Swetha Babu

[Swetha Babu]

Hi Michael,

Thank you for your patience.

We do not support responsiveness in the Circular gauge component. We have analyzed the reported issue and considered this a usability feature. We have added this to our features list. We will include the fix for the implementation in our upcoming Volume 4 SP1 release which is expected to be rolled out at the end of January, 2021. Please find the below feedback link to keep track of the reported issue. 

  

https://www.syncfusion.com/feedback/20451

Please let us know if you need any further assistance.

Regards,
Swetha Babu

[Swetha Babu]

Hi Michael,

Thank you for your patience.

We have included the fix for the reported issue of "Circular Gauge does not resize when the browser resizes" in our Essential Studio 2020 Volume 4 service pack(v18.4.0.39) and is available for download under the following link.

https://www.syncfusion.com/forums/161973/essential-studio-2020-volume-4-service-pack-release-v18-4-0-39-is-available-for-download

 

The Circular gauge component will resize while the browser is resized when then the width is set as “100%” with Width property. 

We thank you for your support and appreciate your patience in waiting for this release. Please get back to us if you would require further assistance.

Regards,
Swetha Babu 

[Michael Aston]

Ok the gauge does resize now but it does not resize correctly. Using 18.4.0.43

See attached video. The radar chart sizes correctly but the dial does not.

@using Syncfusion.Blazor.CircularGauge;

@namespace vx.Website.Components

    <div style="height:100%; width:100%">

        <SfCircularGauge Title="Chart title" Height="100%" Width="100%" @ref=@CircularGauge>

            <CircularGaugeAxes>

                <CircularGaugeAxis StartAngle="210" EndAngle="150" Minimum="0" Maximum="100" Radius="80%">

                    <CircularGaugeAxisLineStyle Width="10" Color="transparent" />

                    <CircularGaugeAxisLabelStyle>

                        <CircularGaugeAxisLabelFont Size="12px"/>

                    </CircularGaugeAxisLabelStyle>

                    <CircularGaugeAxisMajorTicks Height="10" Offset="5" UseRangeColor=@true />

                    <CircularGaugeAxisMinorTicks Height="0" Width="0" UseRangeColor=@true />

                    <CircularGaugeTooltipSettings Enable="true" ShowAtMousePosition="true"/>

                    <CircularGaugeRanges>

                        <CircularGaugeRange Start="@LowRangeStart" End="@LowRangeEnd" Color="@LowRangeColor" StartWidth="@LowRangeStartWidth" EndWidth="@LowRangeEndWidth" RoundedCornerRadius="@LowRangeCornerRadius" />

                        <CircularGaugeRange Start="@MediumRangeStart" End="@MediumRangeEnd" Color="@MediumRangeColor" StartWidth="@MediumRangeStartWidth" EndWidth="@MediumRangeEndWidth" RoundedCornerRadius="@MediumRangeCornerRadius" />

                        <CircularGaugeRange Start="@HighRangeStart" End="@HighRangeEnd" Color="@HighRangeColor" StartWidth="@HighRangeStartWidth" EndWidth="@HighRangeEndWidth" RoundedCornerRadius="@HighRangeCornerRadius" />

                    </CircularGaugeRanges>

                    <CircularGaugePointers>

                        <CircularGaugePointer Value="65" Radius="60%" PointerWidth="8">

                            <CircularGaugePointerAnimation Enable=@true />

                            <CircularGaugeCap Radius="7" />

                            <CircularGaugeNeedleTail Length="18%" />

                        </CircularGaugePointer>

                    </CircularGaugePointers>

                    <CircularGaugeAxisLabelStyle Format="{value}%" />

                </CircularGaugeAxis>

            </CircularGaugeAxes>

        </SfCircularGauge>

    </div>

    @code {

        // Test data

        private double LowRangeStart = 0;

        private double LowRangeEnd = 40;

        private string LowRangeColor = "#CCFFCC";

        private string LowRangeStartWidth = "20";

        private string LowRangeEndWidth = "20";

        private double LowRangeCornerRadius = 0;

        private double MediumRangeStart = 40;

        private double MediumRangeEnd = 80;

        private string MediumRangeColor = "#FFCC99";

        private string MediumRangeStartWidth = "20";

        private string MediumRangeEndWidth = "20";

        private double MediumRangeCornerRadius = 0;

        private double HighRangeStart = 80;

        private double HighRangeEnd = 120;

        private string HighRangeColor = "#FF9999";

        private string HighRangeStartWidth = "20";

        private string HighRangeEndWidth = "20";

        private double HighRangeCornerRadius = 0;

    }

<style>

    .e-chart {

        width: inherit !important;

        height: inherit !important;

    }

</style>

Attachment: 20210222_13h27_24_8752689d.zip

[Swetha Babu]

Hi Michael,

Thank you for your update.

When we analyzed the provided video, we came to know that you have placed the circular gauge inside a layout component. We have tested the reported issue by placing the circular gauge inside our Blazor Dashboard layout component. We are unable to reproduce the reported issue. When we tried to resize the browser, the circular gauge gets resized based on the browser resize. However, we have recorded a video when we tried to reproduce the reported issue and the same can be downloaded from the following link.

https://www.syncfusion.com/downloads/support/forum/160322/ze/CirculargaugeVideo675779053

We have created a simple Blazor application using the provided sample code and the same can be downloaded from the below link.

https://www.syncfusion.com/downloads/support/forum/160322/ze/circulargauge1657495503

Please ensure that the NuGet cache is cleared before installing our packages. If the issue still persists, please modify the above application to reproduce the reported issue and share the same to us. It will be helpful for us to analyze further and assist you better.

Regards,
Swetha Babu

[Michael Aston]

Thanks for the sample. I can reproduce the issue with it. Attached is the video 2021-02-24_19h33_59.zip this shows the issue with your sample. The steps I used are:

1) Browser to restore size. The dial does not resize.

2) Browser to max size. Dial resizes but to the size for when the browser was restored.

Also note that the bottom border of the dashboard layout tile is clipped by the chart.

Also attached is my test case and video of reproducing the issue with it.

Attachment: DialResize_83fbfc45.zip

[Swetha Babu]

Hi Michael,

Thank you for your update.

We are able to reproduce the reported issue. We will check the reported issue and update you with further details on March 1, 2021.

Regards,
Swetha Babu 

[Swetha Babu]

Hi Michael,

Sorry for the inconvenience caused.

When resizing the window, the Circular gauge gets resized before the dashboard layout gets rendered. So we are not able to get the height and width of the layout panel to render the Circular gauge properly. However, we have raised a query regarding this to our dashboard layout team internally. We will update you with further details on March 3, 2021.

Regards,
Swetha Babu

[Swetha Babu]

Hi Michael,

Thank you for your patience.

When we place the Circular gauge inside the dashboard layout control and resize the window, the layout is resized after the gauge gets resized. So the circular gauge is not able to get the proper client height and width. We can fix this in the application level, by refreshing the Circular gauge component using the Refresh method in the window resize of the dashboard layout control. But this event is not available with the Dashboard layout component. 

  

We have raised a request for providing event support for this. So we have considered the event support as implementation and added it to our features request list. However, we will include the fix for the implementation in any of our upcoming releases. Please find the below feedback link to keep track of the reported implementation.

https://www.syncfusion.com/feedback/22906

 

Once this implementation is available, we can resize the Circular gauge within the dashboard layout in the window resize event. 

Please let us know if you need any further assistance.

Regards,
Swetha Babu 

[Michael Aston]

Any progress on this? Currently its not possible to use the Circular gauge on the dashboardlayout component.

Out of interest why does this issue effect the SfCircularGauge but not SfChart?

[Sabari Anand Senthamarai Kannan]

Hi Michael, 

 

Thank you for your update. 

 

Please find the details for your query from the below table. 

 

Query	Details
Any progress on this? Currently its not possible to use the Circular gauge on the dashboardlayout component.	We have forwarded this query to our internal team. We will update on this once they have responded.
Out of interest why does this issue effect the SfCircularGauge but not SfChart?	As we mentioned before, the Circular Gauge component renders fast before the rendering of the Dashboard Layout component while resizing of the browser window. So, this issue is occurring in the resize event. However, we will check again with the Chart component and update you with further details on March 26, 2021.

 

Regards, 

Sabari Anand

[Sabari Anand Senthamarai Kannan]

Hi Michael, 

 

Thank you for your patience. 

 

We will include the fix for the event implementation in Dashboard layout in our weekly NuGet release which is expected to be available by the mid of April 2021. We also checked with Circular Gauge component for the reported issue. As we mentioned, the reported issue is due to the unavailability of size of the parent element when resized. However, once the fix for Dashboard layout is available, this issue will be resolved. 

 

Regards, 

Sabari Anand

[Swetha Babu]

Hi Michael,

Sorry for the inconvenience caused.

We have not included the fix for the event implementation in DashboardLayout in our weekly NuGet release due to some technical issues. However, we will include the fix for the reported issue in our upcoming weekly patch release which is expected to be available by the end of April 2021.

Regards,
Swetha Babu

[Michael Aston]

Found this problem also effects SfAccumulationChart. Will the fix also resolve this?

[Swetha Babu]

Hi Michael,  

   

We can refresh the accumulation chart in dashboard layout using the OnResizeStop event to resize the chart on browser resize. We have prepared sample based on your requirement.   

   

<SfDashboardLayout CellSpacing="@(new double[]{20 ,20 })" AllowResizing="true" Columns="2">  

    <DashboardLayoutEvents OnResizeStop="ResizeStop"></DashboardLayoutEvents>  

       //…  

       <SfAccumulationChart ID="chart1" @ref="chartObj1" Title="Mobile Browser Statistics">  

      </SfAccumulationChart>  

     //….  

</SfDashboardLayout>  

@code  

{  

    SfAccumulationChart chartObj1;  

    public void ResizeStop(Syncfusion.Blazor.Layouts.ResizeArgs args)  

    {  

        this.chartObj1.Refresh();  

    }  

}  

   

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/AccResize1976464687.zip  

   

Please revert us if you have any concerns.  

 

Regards, 

Swetha Babu

[Michael Aston]

That's not it.

Like the circular gauge the accumulation chart does not resize correctly to its parent div even with width and height on the div set to 100% and inherited when in a dashboard layout tile. 

You reported in this thread that the fix for the circular gauge was a change to the dashboard layout. What I'm asking is will this also fix the issue with the accumulation chart?

[Michael Aston]

Attached is a video of the drawing issues we are seeing with the accumulation chart in the dashboard layout:

1) The chart labels are initially drawn in the top left of the dashboard even though the chart is rendered in the bottom right.

2) The chart initially renders larger then the dashboard tile then re-renders to the correct size.

Attachment: 20210426_14h10_33_53603f24.zip

[Durga Gopalakrishnan]

Hi Michael, 

We have ensured your reported scenario with attached video. Please check with below suggestions. 

1) The chart labels are initially drawn in the top left of the dashboard even though the chart is rendered in the bottom right. 

We are not clear about your exact query. Please share us sample or video reference for reported scenario, so that it will be helpful for us to proceed further. 

2) The chart initially renders larger then the dashboard tile then re-renders to the correct size. 

We have considered this as a bug and logged a defect report. This fix will be available in our upcoming weekly patch release which is scheduled to be rolled out on 11^th May 2021. We appreciate your patience until then. You can keep track of the bug from the below feedback link. 

Feedback Link : https://www.syncfusion.com/feedback/24755/  

 

If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal.  

 

Please revert us if you have any concerns. 

 

Regards, 

Durga G 

[Michael Aston]

1) The chart labels are initially drawn in the top left of the dashboard even though the chart is rendered in the bottom right. 

In the video I attached as the dashboard layout page loads look below the dropdown in the top left hand corner and you will see that the labels for the accumulation charts are briefly displayed.

[Durga Gopalakrishnan]

Hi Michael, 

We have ensured your reported scenario with attached video, unfortunately we are unable to replicate an issue from our end. We have attached tested sample for your reference.  

Screenshot : 

 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ChartsDashboard1114135155.zip 

Please try to replicate an issue in above sample or provide us an issue reproduced sample, so that it will be helpful for us to proceed further. 

Regards, 

Durga G 

[Sabari Anand Senthamarai Kannan]

Hi Micheal, 

 

Sorry for the inconvenience caused. 

 

We have not included the event implementation in the Dashboard layout control to resolve the Circular Gauge issue in our weekly NuGet release. However, the fix will be available in the weekly NuGet release which is scheduled for the start of May 2021. 

 

Regards, 

Sabari Anand 

[Sabari Anand Senthamarai Kannan]

Hi Michael, 

Sorry for the inconvenience caused. 

We have included the “OnWindowResize” event in the DashboardLayout component. But it did not resolve the reported issue in the Circular Gauge component. The event is triggered before the dashboard panel is sized after the window resize. So, the Circular Gauge component is unable to get the correct size after the resize of the panel in the dashboard. We have recorded the video when we analyzed this issue with the latest fix. Please find the video below for your reference. 

https://www.syncfusion.com/downloads/support/forum/160322/ze/gauge_issue-2047472630 

However, we will check with our dashboard layout team and update you the solution for this. We will update you with further details on May 6, 2021. 

Regards, 

Sabari Anand

[Sabari Anand Senthamarai Kannan]

Hi Michael, 

 

Thank you for your patience. 

 

We have discussed with our dashboard layout team and planned to expand the event in the dashboard layout when the panel is resized in their window resize event. In this proposed event, the issue in the Circular Gauge will be resolved. The fix for this event implementation will be available in our weekly NuGet release which is expected to be available by the third week of May 2021. 

 

Regards, 

Sabari Anand

[Swetha Babu]

Hi Michel, 

 

Sorry for the inconvenience caused. 

We are planning to fix the reported problem in circular gauge itself instead of extending events in dashboard layout which looks like a workaround. We have now validated our source code and will work on, test and include the fix in our weekly NuGet release, which is scheduled for July 9^th, 2021 without further delay. 

Regards, 

Swetha Babu

[Michael Aston]

Thanks for the update.

[Swetha Babu]

Hi Michael, 

 

Thank you for your update. 

 

We will let you know once the fix is included in our weekly NuGet release.  

 

Please let us know if you need further assistance. 

 

Regards, 

Swetha Babu

[Swetha Babu]

Hi Michael, 

 

Sorry for the inconvenience caused. 

 

We have not included the fix for the reported issue in our weekly NuGet release. However, the fix for the reported issue will be included in our upcoming Volume 2 main release which is scheduled for the end of June, 2021. Please find the below feedback link to keep track of the reported issue. 

 

https://www.syncfusion.com/feedback/26064 

 

Please let us know if you need further assistance. 

 

Regards, 

Swetha Babu.

[Sabari Anand Senthamarai Kannan]

Hi Michael, 

Thank you for your patience. 

We analyzed and recognized that the Circular Gauge renders ahead of the Dashboard Layout component. So, the Dashboard Layout component requires an architecture change in-order to resolve this issue, which will be available in Volume 3, 2021 release.  

However, as a temporary solution, we can fix this issue at the application level by calling "Refresh()" method of the Circular Gauge component for every few milliseconds in the "Resizing" event of the component. Please find the code snippet below for your reference. 

Code Snippet: 

<SfCircularGauge @ref="CircularGauge" Width="100%" Height="100%"> 

    <CircularGaugeEvents Resizing="Resizing"></CircularGaugeEvents> 

… 

</CircularGauge> 

@code{ 

    public SfCircularGauge CircularGauge; 

    public DateTime RefreshDateTime; 

    public void Resizing(Syncfusion.Blazor.CircularGauge.ResizeEventArgs args) 

    { 

        if (RefreshDateTime == new DateTime() || (DateTime.Now - RefreshDateTime).TotalMilliseconds > 20) 

        { 

            RefreshDateTime = DateTime.Now; 

            CircularGauge.Refresh(); 

        } 

    } 

} 

NOTE: If you are facing any issue while resizing the window with Dashboard Layout and Circular Gauge in your application, try changing the highlighted value above ("20" which is in milliseconds). 

We have created a simple sample to demonstrate the same and we have also recorded a video to show how the sample works. The sample and the video can be downloaded from the below link. 

Sample: https://www.syncfusion.com/downloads/support/forum/160322/ze/DashboardResize-1511487600 

Video: https://www.syncfusion.com/downloads/support/forum/160322/ze/Screenrecord-1068705452 

Please let us know if you need any further assistance. 

Regards, 

Sabari Anand

[Michael Aston]

That works better. Still  neVolume 3, 2021 fix though.

[Swetha Babu]

Hi Michael, 

 

Thank you for your update. 

 

Please find the below feedback link to keep track of the reported issue. We will let you know once the fix is available in our Volume 3 2021 main release. 

 

https://www.syncfusion.com/feedback/26638 

 

Please let us know if you need further assistance. 

 

Regards, 

Swetha Babu.