Articles in this section
Category / Section

How to add multiple range gradient brushes to CircularGauge

1 min read

Multiple ranges can be added to a single scale in the gauge, and each range can be specified with gradient color.

The following code snippet demonstrates how to add multiple ranges to a scale.


CircularRange range1 = new CircularRange();
            range1.StartValue = 0;
            range1.EndValue = 70;
            range1.OuterStartOffset = 0.9;
            range1.OuterEndOffset = 0.9;
            range1.InnerStartOffset = 0.7;
            range1.InnerEndOffset = 0.7;
CircularRange range2 = new CircularRange();
            range2.StartValue = 0;
            range2.EndValue = 40;
            range2.OuterStartOffset = 0.7;
            range2.OuterEndOffset = 0.7;
            range2.InnerStartOffset = 0.5;
            range2.InnerEndOffset = 0.5;


The gradient colors can be applied to the ranges. The following code snippet demonstrates how to specify gradient colors to the ranges.


ObservableCollection<GaugeGradientStop> gradientColor1 = new ObservableCollection<GaugeGradientStop>();
            GaugeGradientStop gaugeGradientStop = new GaugeGradientStop();
            gaugeGradientStop.Value = 0;
            gaugeGradientStop.Color = Color.WhiteSmoke;
            GaugeGradientStop gaugeGradientStop1 = new GaugeGradientStop();
            gaugeGradientStop1.Value = 50;
            gaugeGradientStop1.Color = Color.Olive;
range1.GradientStops = gradientColor1;


Sample for specifying gauge with multiple ranges with gradient colors being applied to the ranges:


Adding multiple ranges to scale using Xamarin SfCircularGauge

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