Can't remove whitespace above or below RadialGauge when creating a half gauge

[Víctor Marino]

Hello.

I'm trying to create a half RadialGauge, setting its startAngle to 180 and its endAngle to 0.

Everything looks as intended, however there is a lot of whitespace below the chart, essentially taking up as much space as if I were creating a full 360º gauge:

I've tried setting the "canScaleToFit" property to true, however that only seems to align the gauge to the bottom... which means the same whitespace is now above the chart instead of below:

I've also tried to put the chart inside a container and shrink down the container's height, but as expected, that only makes the chart smaller (both in width and height), as it constrains the whole chart rather than clipping the whitespace.

Can you please advise on how I could trim the excess vertical space around the chart?

Thanks!

Víctor.

[Sriram Kiran Senthilkumar]

Hi Victor, 

  

Greetings from Syncfusion. We have analyzed your scenario and we would like to share some information about the rendering of the half radial gauge. The half radial gauge gets rendered based on the radius of the gauge. For example, say if the container containing the SfRadialGauge widget has width and height of 300x300 and the radius of the radial gauge is 150 then the gauge gets rendered according to its diameter (2 x radius of the gauge = 300) and due to this only there is a white space in the bottom of the half radial gauge. For better understanding, say if the container has different width and height (say 300x800), we will always take the lowest dimension (here it is the width) to render the radial gauge. This is the default behaviour. 

Also, to mention that setting the canScaleToFit property to true helps in only positioning the axis and its features based on the provided start and end angle. That is, it renders the radial gauge at the center of the container. This is the default behaviour. 

Please get in touch with us if you require further assistance on this. 

  

Regards, 

Sriram Kiran. 

[Víctor Marino]

Thanks for your response.

So currently, there is no way to trim the excess whitespace when plotting a half RadialGauge? Is there any workaround I can use in Flutter to "cover" that whitespace with something else?

If not, are you planning to add any options to tackle this issue in the future? I don't see how I can use the half gauge in its current state when there's additional content above and below it. That extra whitespace is way too big and noticeable for the user.

[Sriram Kiran Senthilkumar]

Hi Victor, 

  

We are sorry that we cannot provide any workaround to trim the whitespace when plotting half Radial gauge because as stated earlier, we will use the containers lowest dimensions to render the half Radial gauge and so due to this behaviour it will not be possible to trim the whitespaces. And also, as this is the default rendering behaviour of the Radial gauge, we cannot consider your suggestion as a feature request. 

  

Regards, 

Sriram Kiran. 

[Antti]

Hi all!

This may come a bit late, but recently I stumbled on this very same problem and I managed to tackle it with Flutter Material widget called Align. 

Setting 

canScaleToFit: true 

from SfRadialGauge and 

Align(child: SfRadialGauge, heightFactor: *less than 1.0*)

gave me the result I wanted for now.

Antti

[Víctor Marino]

Thanks so much for bothering to post your solution Antti!

I ended up removing the radial gauge from my app altogether and replacing it with a different visualization, as the whitespace made it look horrible for the user.

But next time I need to plot one I'll give this a try 😉

Víctor.

[Praveen Gopalsamy]

Hi Antti/ Victor, 

Thank you for your updates. 

Please let us know if you need any further assistance in this. 

  

Regards, 

Praveen G. 

[Ben]

Many thanks for posting this solution!

[Yuvaraj Gajaraj]

Most Welcome. Kindly get back to us if you have further queries. We are always happy to assist you.