Circular Gauge fails to show ticks.

[Sergio Marcelo]

I have circular gauge with values from 0 to 0.2

The gauge doesn't show Minor ticks and in the major tick shows an incorrect 0.15 value tick.

The control code is the follow.

Can you help me? Thank you!

<SfCircularGauge Width="100%" Height="100%">

            <CircularGaugeAxes>

                <CircularGaugeAxis StartAngle="270" EndAngle="90" Minimum="0" Maximum="0.2" Radius="80%">

                    <CircularGaugeAxisMajorTicks Interval="0.05" Height="10" Width="3" UseRangeColor="true" Position="Position.Inside">

                    </CircularGaugeAxisMajorTicks>

                    <CircularGaugeAxisMinorTicks Interval="0.01" Height="5" Width="2" UseRangeColor="true" Position="Position.Inside" >

                    </CircularGaugeAxisMinorTicks>

                    <CircularGaugeAxisLabelStyle Format="n2" />

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

                    <CircularGaugeAxisLabelStyle UseRangeColor="true">

                        <CircularGaugeAxisLabelFont Size="12px" FontFamily="Segoe UI" FontStyle="Regular" />

                    </CircularGaugeAxisLabelStyle>

                    <CircularGaugeAnnotations>

                        <CircularGaugeAnnotation Radius="30%" Angle="0" ZIndex="1">

                            <ContentTemplate>

                                <div><span class="annotationText" style="font-size:14px; color:#9E9E9E;">Val</span></div>

                            </ContentTemplate>

                        </CircularGaugeAnnotation>

                        <CircularGaugeAnnotation Radius="40%" Angle="180" ZIndex="1">

                            <ContentTemplate>

                                <div><span class="annotationText" style="font-size:20px; color:#424242;">0.2</span></div>

                            </ContentTemplate>

                        </CircularGaugeAnnotation>

                    </CircularGaugeAnnotations>

                    <CircularGaugeRanges>

                        <CircularGaugeRange Start="0" End="0.1" Color="#30B32D" StartWidth="10" EndWidth="10" RoundedCornerRadius="0" />

                        <CircularGaugeRange Start="0.1" End="0.19" Color="#FFDD00" StartWidth="10" EndWidth="10" RoundedCornerRadius="0" />

                        <CircularGaugeRange Start="0.19" End="0.2" Color="#F03E3E" StartWidth="10" EndWidth="10" RoundedCornerRadius="0" />

                    </CircularGaugeRanges>

                    <CircularGaugePointers>

                        <CircularGaugePointer Value="0.2" Radius="60%" PointerWidth="9">

                            <CircularGaugePointerAnimation Enable="true" />

                            <CircularGaugeCap Radius="7" />

                            <CircularGaugeNeedleTail Length="18%" />

                        </CircularGaugePointer>

                    </CircularGaugePointers>

                </CircularGaugeAxis>

            </CircularGaugeAxes>

        </SfCircularGauge>

Attachment: screenshot_4a1fead5.zip

[Swetha Babu]

Hi Sergio, 

 

Thank you for contacting Syncfusion support. 

 

When we validated the provided code, the height of the minor ticks was very small, making it difficult to see. We increased the minor ticks height to "7" by using the "Height" property in the "CircularGaugeMinorTicks" class. To limit the incorrect value, we can round off the axis value using the "RoundingPlaces" property in the "CircularGaugeAxis" class, for example, 0.15 in your case. 

 

However, we have created the simple blazor application using the provided sample code to demonstrate the same and it can be downloaded from the below link. 

https://www.syncfusion.com/downloads/support/forum/165915/ze/CircularGauge1759079945 

 

Screenshot: 

 

 

Please let us know if the above sample meets your requirement. Also, please let us know if you need any further assistance. 

 

Regards, 

Swetha Babu.

[Sergio Marcelo]

Thank you so much Swetha!, now is clear for me.

[Swetha Babu]

Hi Sergio, 

 

Thank you for your update. 

 

We are happy to hear that the reported problem has been resolved. 

 

Please let us know if you need any further assistance. 

 

Regards, 

Swetha Babu