How to add progressive (non-linear) scale in WinUI Radial Gauge (SfRadialGauge)?
This article describes how to add the progressive scale using the Sycfusion WinUI Radial Gauge control.
You can show the progressive scale (non-linear) using the SfRadialGauge control by extending a custom axis renderer from RadialAxis class.
Step 1: Create a custom axis renderer class by extending it from the RadialAxis.
C#:
public class RadialAxisExt : RadialAxis
{
}
Step 2: The text value of the labels can be changed as required, visible labels by overriding the GenerateVisibleLabels method of the custom axis renderer.
C#:
public override List<AxisLabelData> GenerateVisibleLabels()
{
List<AxisLabelData> customLabels = new List<AxisLabelData>();
for (int i = 0; i < 9; i++)
{
double value = CalculateLabelValue(i);
AxisLabelData label = new AxisLabelData
{
Value = value,
Text = value.ToString(CultureInfo.CurrentCulture)
};
customLabels.Add(label);
}
return customLabels;
}
private double CalculateLabelValue(double value)
{
if (value == 0)
{
return 0;
}
else if (value == 1)
{
return 2;
}
else if (value == 2)
{
return 5;
}
else if (value == 3)
{
return 10;
}
else if (value == 4)
{
return 20;
}
else if (value == 5)
{
return 30;
}
else if (value == 6)
{
return 50;
}
else if (value == 7)
{
return 100;
}
else
{
return 150;
}
}
Step 3: The visible label values are converted to a factor value (from 0 to 1) on the axis range by overriding the ValueToCoefficient method of the custom axis renderer class.
C#:
public override double ValueToCoefficient(double value)
{
if (value >= 0 && value <= 2)
{
return (value * 0.125) / 2;
}
else if (value > 2 && value <= 5)
{
return (((value - 2) * 0.125) / (5 - 2)) + (1 * 0.125);
}
else if (value > 5 && value <= 10)
{
return (((value - 5) * 0.125) / (10 - 5)) + (2 * 0.125);
}
else if (value > 10 && value <= 20)
{
return (((value - 10) * 0.125) / (20 - 10)) + (3 * 0.125);
}
else if (value > 20 && value <= 30)
{
return (((value - 20) * 0.125) / (30 - 20)) + (4 * 0.125);
}
else if (value > 30 && value <= 50)
{
return (((value - 30) * 0.125) / (50 - 30)) + (5 * 0.125);
}
else if (value > 50 && value <= 100)
{
return (((value - 50) * 0.125) / (100 - 50)) + (6 * 0.125);
}
else if (value > 100 && value <= 150)
{
return (((value - 100) * 0.125) / (150 - 100)) + (7 * 0.125);
}
else
{
return 1;
}
}
Step 4: Create the RadialGauge and add the RadialAxis by customizing the axis range as desired.
XAML:
<gauge:SfRadialGauge> <gauge:SfRadialGauge.Axes> <local:RadialAxisExt Maximum="150" ShowTicks="False" AxisLineWidthUnit="Factor" AxisLineWidth="0.15"> </local:RadialAxisExt> </gauge:SfRadialGauge.Axes> </gauge:SfRadialGauge>
Step 5: Include the RangePointer and NeedlePointer to annotate the desired value.
XAML:
<gauge:RadialAxis.Pointers> <gauge:NeedlePointer EnableAnimation="True" Value="60" NeedleLengthUnit="Factor" NeedleLength="0.8" NeedleStartWidth="10" NeedleEndWidth="15" KnobRadius="0"> <gauge:NeedlePointer.AnimationEasingFunction> <CircleEase EasingMode="EaseIn" /> </gauge:NeedlePointer.AnimationEasingFunction> <gauge:NeedlePointer.NeedleFill> <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"> <GradientStop Color="#CB7BDF" Offset="0.25" /> <GradientStop Color="#77CB7EDF" Offset="0.75" /> </LinearGradientBrush> </gauge:NeedlePointer.NeedleFill> </gauge:NeedlePointer> <gauge:RangePointer EnableAnimation="True" Value="60" PointerWidth="0.15" WidthUnit="Factor"> <gauge:RangePointer.AnimationEasingFunction> <CircleEase EasingMode="EaseIn" /> </gauge:RangePointer.AnimationEasingFunction> <gauge:RangePointer.GradientStops> <gauge:GaugeGradientStop Value="5" Color="#FF9E40DC" /> <gauge:GaugeGradientStop Value="45" Color="#FFE63B86" /> </gauge:RangePointer.GradientStops> </gauge:RangePointer> </gauge:RadialAxis.Pointers>
Output:
See also
How to create an application using the WinUI Radial Gauge?
How to customize the Range pointer?
How to customize the Needle pointer?
How to position and customize annotation?
