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;
            scale1.CircularRanges.Add(range1);
 
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;
            scale1.CircularRanges.Add(range2);

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;
            gradientColor1.Add(gaugeGradientStop);
 
            GaugeGradientStop gaugeGradientStop1 = new GaugeGradientStop();
            gaugeGradientStop1.Value = 50;
            gaugeGradientStop1.Color = Color.Olive;
            gradientColor1.Add(gaugeGradientStop1);
 
range1.GradientStops = gradientColor1;

Sample for specifying gauge with multiple ranges with gradient colors being applied to the ranges: https://github.com/SyncfusionExamples/How-to-add-multiple-range-gradient-brushes-in-SfCircularGauge-

Screenshot

Adding multiple ranges to scale using Xamarin SfCircularGauge

Did you find this information helpful?

Yes

Comments (0)

How to add multiple range gradient brushes to CircularGauge

Screenshot

Access denied