Circular gauge overflow.
Hello,
I am using the circular gauge component. However, it is overflowing in its container:
Can you show me a way to fit the component correctly?
The code is:
<div class="col-md-4" style="height:500px;">
<SfCircularGauge Height="100%" Width="100%" MoveToCenter=true AllowMargin="false">
<CircularGaugeAxes>
<CircularGaugeAxis StartAngle="240" EndAngle="120" Minimum="-15" Maximum="15" Radius="125%">
<CircularGaugeAxisLineStyle Width="0"></CircularGaugeAxisLineStyle>
<CircularGaugeAxisLabelStyle Position="Syncfusion.Blazor.CircularGauge.Position.Outside" Offset="-18">
<CircularGaugeAxisLabelFont Size="12px" FontFamily="inherit">
</CircularGaugeAxisLabelFont>
</CircularGaugeAxisLabelStyle>
<CircularGaugeAxisMajorTicks Height="12" Width="1.5" Interval="2" Offset="16">
</CircularGaugeAxisMajorTicks>
<CircularGaugeAxisMinorTicks Height="0" Width="0">
</CircularGaugeAxisMinorTicks>
<CircularGaugeRanges>
<CircularGaugeRange Start="-15" End="-5" StartWidth="40" EndWidth="40" Color="#006100" Radius="90%" />
<CircularGaugeRange Start="-5" End="0" StartWidth="40" EndWidth="40" Color="#30B32D" Radius="90%" />
<CircularGaugeRange Start="0" End="5" StartWidth="40" EndWidth="40" Color="#F03E3E" Radius="90%" />
<CircularGaugeRange Start="5" End="15" StartWidth="40" EndWidth="40" Color="#800000" Radius="90%" />
</CircularGaugeRanges>
<CircularGaugePointers>
<CircularGaugePointer Value=@(5) Radius="80%" NeedleEndWidth="2" PointerWidth="5">
<CircularGaugeCap Radius="8">
<CircularGaugeCapBorder Width="2"></CircularGaugeCapBorder>
</CircularGaugeCap>
</CircularGaugePointer>
</CircularGaugePointers>
</CircularGaugeAxis>
</CircularGaugeAxes>
</SfCircularGauge>
</div>
Thank you.
Hi Krasimir,
When analyzing the provided scenario, we observed that the height of the component exceeds its width. Consequently, the Circular Gauge radius, calculated based on the width, causes the Gauge to render outside of the container when a radius of "125%" is specified. This behavior is due to the Circular Gauge's radius being determined by the width and height of the component. If the height exceeds the width, the radius is calculated using the component’s width. Conversely, if the width is greater than the height, the radius is calculated using the component’s height.
To address this issue in the provided sample, we have adjusted the "Radius" property to "100%", resulting in the Circular Gauge rendering properly within the container. You can access the updated sample from the link below.
https://blazorplayground.syncfusion.com/VthptqBHLSdVhWXl
Please
let us know if you need any further assistance.
