How to set the background color to the circular area in Xamarin.Forms circular gauge (SfCircularGauge)
This article describes how to set the background color to the circular area in Xamarin.Forms SfCircularGauge.
You can set the background color to the circular area by creating a dummy scale for SfCircularGauge.
To construct the implementation by the following steps:
Step1: Create an instance of SfCircularGauge.
Step 2: Added two circular scales into the scales collection of circular gauge.
Scale 1: The first scale is used to display the SfCircularGauge circular area background color, with ticks and labels disabled, and to set RimColor, ScaleStartOffset to 0, and ScaleEndOffset to 1.
Scale 2: The second scale is used to display the rim, scale, ticks, labels, ranges, and pointers.
[XAML]
<gauge:SfCircularGauge> <gauge:SfCircularGauge.Scales> <gauge:Scale SweepAngle="360" ShowTicks="False" ShowLabels="False" ScaleStartOffset="0" ScaleEndOffset="1" RimColor="#0004af" > </gauge:Scale> <gauge:Scale SweepAngle="360" LabelFontSize="20" LabelColor="White" RimThickness="30" RimColor="Red" ShowLastLabel="False"> <gauge:Scale.MajorTickSettings> <gauge:TickSettings Thickness="5" StartOffset="0.9" EndOffset="0.97" Color="White"></gauge:TickSettings> </gauge:Scale.MajorTickSettings> <gauge:Scale.MinorTickSettings> <gauge:TickSettings Thickness="5" Color="White"></gauge:TickSettings> </gauge:Scale.MinorTickSettings> <gauge:Scale.Pointers> <gauge:NeedlePointer Value="60" Color="Red" KnobColor="Red" Thickness="25" KnobRadius="25" /> </gauge:Scale.Pointers> </gauge:Scale> </gauge:SfCircularGauge.Scales> </gauge:SfCircularGauge>
See also
How to add an annotation to the gauge?
How to export the circular gauge?
How to customize the circular gauge header?
How to change the position of ticks?
