Ranges

Range is a visual element, which begins and ends at specified values within a scale.

Setting start and end values for range

Start and end values of ranges are set by using the StartValue and EndValue properties.

<gauge:SfCircularGauge>
    
         <gauge:SfCircularGauge.Scales>

            <gauge:Scale />

        <gauge:Scale.Ranges>
             <gauge:Range StartValue="0" EndValue="50" />
        </gauge:Scale.Ranges>

         </gauge:SfCircularGauge.Scales>	
	
     </gauge:SfCircularGauge>
SfCircularGauge circularGauge = new SfCircularGauge();
    ObservableCollection<Scale> scales = new ObservableCollection<Scale>();
    Scale scale = new Scale();
    Range range = new Range();
    range.StartValue = 0;
    range.EndValue = 50;
    scale.Ranges.Add(range);
    scales.Add(scale);
    circularGauge.Scales = scales;

Range customization

An UI of a range is customized by using the Color and Thickness properties. First, you should set the Offset property for range, then increase the thickness of the range.

<gauge:SfCircularGauge>
   
         <gauge:SfCircularGauge.Scales>

             <gauge:Scale   RimThickness="10" RimColor="#E0E0E0" LabelColor="#424242" 
                       LabelOffset="0.9"  MinorTicksPerInterval="3">
					   
                    <gauge:Scale.MajorTickSettings>
                        <gauge:TickSettings Thickness="3" Length="10" Offset="0.8"/>
                    </gauge:Scale.MajorTickSettings>
					
                    <gauge:Scale.MinorTickSettings>
                        <gauge:TickSettings Length="5" Offset="0.8"/>
                    </gauge:Scale.MinorTickSettings>
					
	          </gauge:Scale>

        <gauge:Scale.Ranges>
            <gauge:Range StartValue="0" EndValue="50" Thickness="70"  Offset="0.8"  Color = "Pink"/>
        </gauge:Scale.Ranges>

         </gauge:SfCircularGauge.Scales>	

     </gauge:SfCircularGauge>
SfCircularGauge circularGauge = new SfCircularGauge();
    ObservableCollection<Scale> scales = new ObservableCollection<Scale>();
    Scale scale = new Scale();
	scale.RimThickness = 10;
    scale.RimColor = Color.FromHex("#E0E0E0");
    scale.LabelColor = Color.FromHex("#424242");
    scale.MajorTickSettings.Thickness = 3;
    scale.LabelOffset = 0.9;
    scale.MinorTickSettings.Length = 5;
    scale.MajorTickSettings.Length = 10;
    scale.MajorTickSettings.Offset = 0.8;
    scale.MinorTickSettings.Offset = 0.8;
     scale.MinorTicksPerInterval = 3;
    Range range = new Range();
    range.StartValue = 0;
    range.EndValue = 50;
	range.Thickness = 70;
    range.Offset = 0.8; 
    range.Color = Color.Pink;
    scale.Ranges.Add(range);
    scales.Add(scale);
    circularGauge.Scales = scales;

Setting position for range

The range can be placed inside the scale, outside the scale, or on the scale by using the following two ways:

1.The Offset property with the Thickness property.

<gauge:SfCircularGauge>
    
         <gauge:SfCircularGauge.Scales>

            <gauge:Scale />

        <gauge:Scale.Ranges>
                <gauge:Range StartValue = "0" EndValue = "100" Offset = "0.3" Thickness = "20"/>
        </gauge:Scale.Ranges>

         </gauge:SfCircularGauge.Scales>	
	
     </gauge:SfCircularGauge>
SfCircularGauge circularGauge = new SfCircularGauge();
    ObservableCollection<Scale> scales = new ObservableCollection<Scale>();
    Scale scale = new Scale();
    Range range = new Range();
    range.StartValue = 0;
    range.EndValue = 100;
    range.Offset = 0.3; 
	range.Thickness = 20;
    scale.Ranges.Add(range);
    scales.Add(scale);
    circularGauge.Scales = scales;

2.The InnerStartOffset, InnerEndOffset, OuterStartOffset, and OuterEndOffset properties.

<gauge:SfCircularGauge>
    
         <gauge:SfCircularGauge.Scales>

            <gauge:Scale />

        <gauge:Scale.Ranges>
                <gauge:Range StartValue="10" EndValue="80" InnerStartOffset = "0.83" InnerEndOffset = "0.6" OuterStartOffset = "0.85" OuterEndOffset =" 0.8"/>
        </gauge:Scale.Ranges>

         </gauge:SfCircularGauge.Scales>	

     </gauge:SfCircularGauge>
SfCircularGauge circularGauge = new SfCircularGauge();
    ObservableCollection<Scale> scales = new ObservableCollection<Scale>();
    Scale scale = new Scale();
    Range range = new Range();
    range.StartValue = 10;
    range.EndValue = 80;
    range.InnerStartOffset = 0.83;
    range.InnerEndOffset = 0.6;
    range.OuterStartOffset = 0.85;
    range.OuterEndOffset = 0.8;
    scale.Ranges.Add(range);
    scales.Add(scale);
    circularGauge.Scales = scales;

Setting multiple ranges

In addition to the default range, you can add n number of ranges to a scale by using the Ranges property.

<gauge:SfCircularGauge>
   
	    <gauge:SfCircularGauge.Headers>
                <gauge:Header Text="Poor" Position="0.1,0.55" TextSize="20" ForegroundColor="#F03E3E" FontAttributes = "Bold"/>
				<gauge:Header Text="Good" Position="0.87,0.55" TextSize="20" ForegroundColor="#27beb7" FontAttributes = "Bold"/>
            </gauge:SfCircularGauge.Headers>
			
         <gauge:SfCircularGauge.Scales>

             <gauge:Scale  StartValue = "0" EndValue = "100" StartAngle = "180" SweepAngle = "180" Interval = "10"
			                ShowLabels = "False" ShowTicks = "False" ShowRim = "False" RimThickness = "40" 
							RadiusFactor = "0.9" RimColor = "#e0e0e0">	
							
                    <gauge:Scale.Pointers>
                        <gauge:NeedlePointer  Value="70" KnobRadius="0" KnobStrokeColor = "#0682F6" KnobStrokeWidth = "6"
                                    Color="OrangeRed" KnobColor="White" LengthFactor="0.66" Type="Triangle" Thickness = "10"/>
                        </gauge:Scale.Pointers>   
					  <gauge:Scale.Ranges>
                        <gauge:Range StartValue = "0" EndValue = "35" Color = "#F03E3E" Thickness = "40" Offset = "0.9" />
						<gauge:Range StartValue = "35" EndValue = "75" Color = "#FFDD00" Thickness = "40" Offset = "0.9" />
						<gauge:Range StartValue = "75" EndValue = "100" Color = "#27beb7" Thickness = "40" Offset = "0.9" />
                    </gauge:Scale.Ranges>

 
	          </gauge:Scale>

         </gauge:SfCircularGauge.Scales>	
		 
   
     </gauge:SfCircularGauge>
SfCircularGauge circularGauge = new SfCircularGauge();
    ObservableCollection<Scale> scales = new ObservableCollection<Syncfusion.SfGauge.XForms.Scale>();
    Scale scale = new Syncfusion.SfGauge.XForms.Scale();
    scale.StartValue = 0;
    scale.EndValue = 100;
    scale.StartAngle = 180;
    scale.SweepAngle = 180;
    scale.Interval = 10;
    scale.ShowLabels = false;
    scale.ShowTicks = false;
    scale.ShowRim = false;
    scale.RimThickness = 40;
    scale.RadiusFactor = 0.9;
    scale.RimColor = Color.FromHex("#e0e0e0");

    Header header1 = new Header();
    header1.Text = "Poor";
    header1.TextSize = 20;
    header1.Position = new Point(0.1, 0.55);
    header1.ForegroundColor = Color.FromHex("#F03E3E");
    header1.FontAttributes = FontAttributes.Bold;
    circularGauge.Headers.Add(header1);

    Header header2 = new Header();
    header2.Text = "Good";
    header2.TextSize = 20;
    header2.Position = new Point(0.87, 0.55);
    header2.ForegroundColor = Color.FromHex("#27beb7");
    header2.FontAttributes = FontAttributes.Bold;
    circularGauge.Headers.Add(header2);

     //Poor
    Range range = new Range();
    range.StartValue = 0;
	range.EndValue = 35;
    range.Offset = 0.9;
    range.Thickness = 40;
    range.Color = Color.FromHex("#F03E3E");
    scale.Ranges.Add(range);       

	//Average
    Range range1 = new Range();
	range1.StartValue = 35;
    range1.EndValue = 75;
    range1.Offset = 0.9;
    range1.Thickness = 40;
    range1.Color = Color.FromHex("#FFDD00");
    scale.Ranges.Add(range1);       

    //Good
    Range range2 = new Range();
    range2.StartValue = 75;
	range2.EndValue = 100;
    range2.Offset = 0.9;
    range2.Thickness = 40;
    range2.Color = Color.FromHex("#27beb7");
    scale.Ranges.Add(range2);

    NeedlePointer pointer = new NeedlePointer();
    pointer.Thickness = 10;
    pointer.LengthFactor = 0.66;
    pointer.Color = Color.OrangeRed;
    pointer.KnobColor = Color.White;
    pointer.Type = PointerType.Triangle;
    pointer.KnobRadius = 0;
    pointer.Value = 70;
    pointer.KnobStrokeColor = Color.FromHex("#0682F6");
    pointer.KnobStrokeWidth = 6;
    scale.Pointers.Add(pointer); 
    scales.Add(scale);
    circularGauge.Scales = scales;

Setting gradient color for range

You can give smooth color transition to range by specifying the different colors based on range value.

<gauge:SfCircularGauge>
     
         <gauge:SfCircularGauge.Scales>

             <gauge:Scale  LabelFontSize = "16" ShowRim = "False" 
                          LabelOffset = "0.95" StartValue = "0" EndValue = "100" Interval = "10" RimThickness="28" MinorTicksPerInterval ="4" >		
						  
						  <gauge:Scale.MajorTickSettings>
                 <gauge:TickSettings Thickness="1" EndOffset="0.83" StartOffset="0.75" Length="8" />
             </gauge:Scale.MajorTickSettings>
			 
			 <gauge:Scale.MinorTickSettings>
                 <gauge:TickSettings  Thickness="0.7"  EndOffset="0.79" StartOffset="0.75"/>
             </gauge:Scale.MinorTickSettings>
						  
                     <gauge:Scale.Ranges>
                        <gauge:Range StartValue = "0" EndValue = "100" Thickness = "30" Offset = "0.6">
						  <gauge:Range.GradientStops>
                                <gauge:GaugeGradientStop Value="0" Color="#30B32D"/>
                                <gauge:GaugeGradientStop Value="50" Color="#FFDD00"/>
								<gauge:GaugeGradientStop Value="80" Color="#F03E3E"/>
                            </gauge:Range.GradientStops>
                        </gauge:Range>
						
                    </gauge:Scale.Ranges>
 
	          </gauge:Scale>

         </gauge:SfCircularGauge.Scales>	
	
     </gauge:SfCircularGauge>
SfCircularGauge circularGauge = new SfCircularGauge();
    ObservableCollection<Scale> scales = new ObservableCollection<Syncfusion.SfGauge.XForms.Scale>();
    Scale scale = new Syncfusion.SfGauge.XForms.Scale();          
    scale.StartValue = 0;
    scale.EndValue = 100;
    scale.Interval = 10;
    scale.LabelFontSize = 16;          
    scale.LabelOffset = 0.95;           
    scale.RimThickness = 28;        
    scale.ShowRim = false;
    scale.MinorTicksPerInterval = 4;

    TickSettings major = new TickSettings();
    major.Thickness = 1;
    major.EndOffset = 0.83;
    major.StartOffset = 0.75;
    major.Length = 8;
    scale.MajorTickSettings = major;

    TickSettings minor = new TickSettings();
    minor.Thickness = 0.7;
    minor.EndOffset = 0.79;
    minor.StartOffset = 0.75;
    scale.MinorTickSettings = minor;
    scales.Add(scale);
    circularGauge.Scales = scales;

    Range range = new Range();
    range.Offset = 0.6;
    range.Thickness = 30;
    range.StartValue = 0;
    range.EndValue = 100;
    scale.Ranges.Add(range);

    ObservableCollection<GaugeGradientStop> gradientColor1 = new ObservableCollection<GaugeGradientStop>();

    GaugeGradientStop gaugeGradientStop = new GaugeGradientStop();
    gaugeGradientStop.Value = 0;
    gaugeGradientStop.Color = Color.FromHex("#30B32D");
    gradientColor1.Add(gaugeGradientStop);
	
    GaugeGradientStop gaugeGradientStop1 = new GaugeGradientStop();
    gaugeGradientStop1.Value = 50;
    gaugeGradientStop1.Color = Color.FromHex("#FFDD00");
    gradientColor1.Add(gaugeGradientStop1);
	
    GaugeGradientStop gaugeGradientStop2 = new GaugeGradientStop();
    gaugeGradientStop2.Value = 80;
    gaugeGradientStop2.Color = Color.FromHex("#F03E3E");
    gradientColor1.Add(gaugeGradientStop2);

    range.GradientStops = gradientColor1;
	
    circularGauge.Scales = scales;