SfCircularGauge - pointer z-index

[Volker]

Hi there,

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



Cheers,
Volker

[Indumathi Ravi]

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.

[Volker]

Hi Ravi,

this is what I get when I run your sample:


Cheers,
Volker

[Indumathi Ravi]

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.