Set CircularGauge background for the gauge it's self?

[Jesse Knott]

Hello, I am trying to set the background color for a SfCircularGauge. When I set the background color it makes the entire pane a different color (square area). Can I just make the face of the gauge a specific color? (Just the circular area)

Cheers!

Jesse

[Sridevi Sivakumar]

Hi Jesse Knott,

We have analysed your requirement and we would like to inform you that we don't have a direct property to set the background for the circular area in circular gauge.

So we have achieved your requirement by creating dummy scale for full region in first and set RimColor as per the below code snippet.

Code snippet[XAML]: 

     <gauge:SfCircularGauge Margin="10" > 

                <gauge:SfCircularGauge.Scales> 

                    <gauge:Scale StartAngle="0" SweepAngle="360" ShowRim="True" ShowTicks="False" ShowLabels="False" 

                                 ScaleStartOffset="0" ScaleEndOffset="1" RimColor="LightBlue" > 

                    </gauge:Scale> 

  

                <gauge:Scale  ScaleStartOffset="0.8" ScaleEndOffset="0.85" LabelOffset="0.6" RimColor="LightGray" > 

                        <gauge:Scale.Ranges> 

                            <gauge:Range InnerStartOffset="0.4" InnerEndOffset="0.4" 

                                         OuterEndOffset="0.5" OuterStartOffset="0.5" StartValue="0" EndValue="40" /> 

                        </gauge:Scale.Ranges> 

                        <gauge:Scale.MajorTickSettings> 

                            <gauge:TickSettings StartOffset="0.8" EndOffset="0.7"></gauge:TickSettings> 

                        </gauge:Scale.MajorTickSettings> 

                        <gauge:Scale.MinorTickSettings> 

                            <gauge:TickSettings StartOffset="0.8" EndOffset="0.75"></gauge:TickSettings> 

                        </gauge:Scale.MinorTickSettings> 

                        <gauge:Scale.Pointers> 

                            <gauge:NeedlePointer Value="60" /> 

                            <gauge:RangePointer StartOffset="0.8" EndOffset="0.85" Value="60" /> 

                        </gauge:Scale.Pointers> 

                    </gauge:Scale> 

                </gauge:SfCircularGauge.Scales> 

            </gauge:SfCircularGauge> 

Screenshot: 

Sample:  https://www.syncfusion.com/downloads/support/forum/162049/ze/CircularGaugeSample1075664498

Please check with the sample and it meets your requirement. Let us know if you need any further assistance.

Regards,
Sridevi S.  

 

[Jesse Knott]

I was just considering if that would be a good alternative! Lol!

I have a specific rim color on my current scale, but if I remember correctly the face areas are transparent so I can just create a third scale and keep it behind my other two scales.

Thanks!!

[Sridevi Sivakumar]

Hi Jesse Knott

Thanks for your update.

Since, don't have direct support for this requirement. So, we have achieved that via empty scale with desired background.

Let us know if you need any further assistance.

Regards,
Sridevi S.