This article explains How to apply gradient color for ranges in WPF circular gauge (SfCircularGauge)
You can achieve the above UI using the below code snippet
[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>
How to customize the range in WPF circular Gauge
How to Set a start and end values for range in WPF circular Gauge
How to set a width for range in WPF circular Gauge
How to bind a range color to scale tick and labels in WPF circular Gauge
How to set a position for range in WPF circular Gauge