Linear Gauge - Strange Pointer at small PointerValues

[Christopher]

Hello,

I am trying to create a Linear Gauge component that resembles a Progress Bar, but I am running into an issue when the PointerValue is near the beginning of the axis. In the below image, the PointerValue is 0, but there is a small amount of green shown on the left side, and creates a strange shape.

How can I get rid of this green shape at the left side? When the PointerValue is a higher value, it looks fine:

Here is the component code:

<SfLinearGauge Orientation="Orientation.Horizontal" Background="transparent" Height="@Height" Width="@Width">

        <LinearGaugeContainer Width="30" RoundedCornerRadius="15" BackgroundColor="#D6D6D6" Type="ContainerType.RoundedRectangle">

            <LinearGaugeContainerBorder Width="1" />

            <LinearGaugeAxes>

                <LinearGaugeAxis Minimum="0" Maximum="@Expense.Amount">

                    <LinearGaugeLine Width="0" />

                    <LinearGaugeMajorTicks Interval="10" Height="0" />

                    <LinearGaugeMinorTicks Interval="1" Height="0" />

                    <LinearGaugeAxisLabelStyle>

                        <LinearGaugeAxisLabelFont Size="0"></LinearGaugeAxisLabelFont>

                    </LinearGaugeAxisLabelStyle>

                    <LinearGaugePointers>

                        <LinearGaugePointer PointerValue="@Expense.AmountPaid" Height="30" Width="30" Type="Point.Bar" Color="green" />

                    </LinearGaugePointers>

                    <LinearGaugeAnnotations>

                        <LinearGaugeAnnotation AxisIndex="0" AxisValue="@(Expense.AmountPaid/2)" X="0" Y="0" ZIndex="1">

                            <ContentTemplate>

                                <div style="font-size: 15px;color: white;margin-top: 3px;">[email protected] / [email protected]</div>

                            </ContentTemplate>

                        </LinearGaugeAnnotation>

                    </LinearGaugeAnnotations>

                </LinearGaugeAxis>

            </LinearGaugeAxes>

        </LinearGaugeContainer>

    </SfLinearGauge>

[email protected] / [email protected]

[Indumathi Ravi]

Hi Christopher, 

 

Thank you for contacting Syncfusion Support.
 

  

We are able to reproduce the reported issue with the provided code snippet. We have considered this as a defect and logged a defect report for the same. However, we will include the fix for the reported issue in our weekly patch release which is expected to be available by the second week of February 2022. Please find the below feedback link to keep track of the reported issue. 

  

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

 

Regards, 

Indumathi R. 

[Indumathi Ravi]

Hi Christopher, 

  

Thank you for your patience. 

  

We have fixed the reported issue in the Linear Gauge component and included the fix in our weekly patch release(v19.4.52). Please update the "Syncfusion.Blazor.LinearGauge" package in your application to resolve the reported issue. Please find the link of the package below. 

https://www.nuget.org/packages/Syncfusion.Blazor.LinearGauge/ 

  

Please let us know if you need any further assistance. 

  

Regards, 

Indumathi R.