Articles in this section
Category / Section

How to apply gradient color for ranges in Xamarin.Forms SfCircularGauge

1 min read

SfCircularGauge contains a collection of scales, and each scale contains sub elements such as ranges, pointers, and labels.

Ranges contain a collection of range elements, and each range begins and ends at the specified values within a scale. You can apply the gradient color to a range element using the GradientStops property to give smooth color transition. 

The following code sample demonstrates how to apply the gradient color to a range element in circular gauge.


    <gauge:Range EndValue="100" Offset="1">
            <gauge:GaugeGradientStop Color="Yellow" Value="0"/>
            <gauge:GaugeGradientStop Color="Red" Value="50"/>
            <gauge:GaugeGradientStop Color="Blue" Value="100"/>



Scale scale = new Scale();
Range range = new Range();
range.EndValue = 100;
range.Offset = 1;
range.GradientStops = new ObservableCollection<GaugeGradientStop>()
    new GaugeGradientStop(){Color= Color.Yellow,  Value = 0},
    new GaugeGradientStop(){Color= Color.Red,  Value = 50},
    new GaugeGradientStop(){Color= Color.Blue,  Value = 100},




Xamarin.Forms SfCircularGauge Gradient Range

Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment