We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

SfCircularGauge - pointer z-index

Hi there,

how can we prevent that the pointers of the large clock are behind the small clock?



Cheers,
Volker



3 Replies

IR Indumathi Ravi Syncfusion Team October 19, 2022 08:30 AM

Hi Volker,


Thank you for contacting Syncfusion support.


We can achieve your scenario by setting the "ZIndex" property in the "CircularGaugeAnnotation" tag with the inner Circular Gauge component to "-1". Please find the code snippet for the same below.


Code Snippet:

<div class="control-section">

    <SfCircularGauge Background="transparent">

        <CircularGaugeAxes>

            <CircularGaugeAxis>

                //..

               //..

                <CircularGaugeAnnotations>

                    <CircularGaugeAnnotation Angle="290" Radius="0%" ZIndex="-1">

                        <ContentTemplate>

                            <div style="margin-left: -50%;">

                                <SfCircularGauge  Height="150px" Width="150px" Background="transparent">

                                    <CircularGaugeAxes>

                                        <CircularGaugeAxis>

                                      //..

                                     //..            

                                        </CircularGaugeAxis>

                                    </CircularGaugeAxes>

                                </SfCircularGauge>

                            </div>

                        </ContentTemplate>

                    </CircularGaugeAnnotation>

                </CircularGaugeAnnotations>

            </CircularGaugeAxis>

        </CircularGaugeAxes>

    </SfCircularGauge>

</div>


We have created a sample to demonstrate the same and it can be found from the below link.

https://www.syncfusion.com/downloads/support/directtrac/general/ze/CircularGauge2118511977

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


Regards,

Indumathi R.



VO Volker October 20, 2022 09:40 AM

Hi Ravi,


this is what I get when I run your sample:


Cheers,
Volker



IR Indumathi Ravi Syncfusion Team October 21, 2022 12:39 PM

Hi Volker,


We rechecked the provided sample and found that the inner Circular Gauge is rendered as an annotation in the outer Circular Gauge. We recorded a screen capture video while testing the provided sample, which can be found at the link below.


https://www.syncfusion.com/downloads/support/directtrac/general/ze/Gauge-1259824270


Please ensure that your application refers to the most recent package and script files. Please let us know if you need any further assistance.


Regards,

Indumathi R.


Loader.
Live Chat Icon For mobile
Up arrow icon