How to apply gradient color for ranges in WPF circular gauge (SfCircularGauge)

2 mins read

This KB article explains how to apply the gradient color for ranges in Syncfusion WPF SfCircularGauge control, as shown below.

Range_Gradient_Color

The above UI obtained by using the GradientStops support in range with the following steps

Step1: Create an instance of SfCircularGauge.

Step 2: Added the CircularScale into the scales collection of the radial gauge. The CircularScale defines the radius, start angle, sweep direction, sweep angle, overall minimum, and maximum values, frequency of labels, and tick marks.

Step 3: Added the CircularRange to the Ranges collection of CircularScale.

Step 4: You can give a color transition to the range by specifying the different colors using the GradientStops property of range. By using the Value and Color properties of GradientStops, you can adjust the color transition range for each color.

[XAML]

        <gauge:SfCircularGauge>
            <gauge:SfCircularGauge.Scales>
                <gauge:CircularScale LabelStroke =”IndianRed” LabelOffset=”0.77” LabelPosition=”Custom” MinorTicksPerInterval=”5” RangePosition=”Custom” TickPosition=”Custom” RimStroke=”White”>
                    <gauge:CircularScale.Ranges>
                        <gauge:CircularRange StartValue=”0” EndValue=”85” Offset=”0.5” StrokeThickness=”40” >
                            <gauge:CircularRange.GradientStops>
                                <gauge:GaugeGradientStop Value=”15” Color=”OrangeRed”/>
                                <gauge:GaugeGradientStop Value=”50” Color=”#FFDD00”/>
                                <gauge:GaugeGradientStop Value="80" Color="Green"/>
                            </gauge:CircularRange.GradientStops>
                        </gauge:CircularRange>
                    </gauge:CircularScale.Ranges>
                    <gauge:CircularScale.MajorTickSettings>
                        <gauge:MajorTickSetting  Length="20" Stroke="IndianRed" StrokeThickness="2"  Offset="0.7"  />
                    </gauge:CircularScale.MajorTickSettings>
                    <gauge:CircularScale.MinorTickSettings>
                        <gauge:MinorTickSetting  Stroke="IndianRed"  StrokeThickness="2" Offset="0.65"  />
                    </gauge:CircularScale.MinorTickSettings>
                    <gauge:CircularScale.Pointers>
                        <gauge:CircularPointer PointerType="NeedlePointer" Visibility="Collapsed"/>
                    </gauge:CircularScale.Pointers>
                </gauge:CircularScale>
            </gauge:SfCircularGauge.Scales>
        </gauge:SfCircularGauge>

View the sample in GitHub.

How to apply gradient color for ranges in WPF circular gauge (SfCircularGauge)

See also

Access denied