How to add progressive (non-linear) scale in .NET MAUI Radial Gauge (SfRadialGauge)
This article describes how to add the progressive scale using the Syncfusion .NET MAUI 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.
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.
// Generated the 9 non-linear interval labels from 0 to 150.
// Instead of actual generated labels.
protected override List<GaugeLabelInfo> GenerateVisibleLabels()
{
List<GaugeLabelInfo> customLabels = new List<GaugeLabelInfo>();
for (int i = 0; i < 9; i++)
{
double value = CalculateLabelValue(i);
GaugeLabelInfo label = new GaugeLabelInfo
{
Value = value,
Text = value.ToString()
};
customLabels.Add(label);
}
return customLabels;
}
// To return the label value based on interval
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 ValueToFactor method of the custom axis renderer class.
public override double ValueToFactor(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 ShowTicks="False"
Maximum="150">
<gauge:RadialAxis.AxisLineStyle>
<gauge:RadialLineStyle ThicknessUnit="Factor"
Thickness="0.1" />
</gauge:RadialAxis.AxisLineStyle>
</local:RadialAxisExt>
</gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>
Step 5: Include the RangePointer and NeedlePointer to annotate the desired value.
XAML
<gauge:SfRadialGauge>
<gauge:SfRadialGauge.Axes>
<local:RadialAxisExt ShowTicks="False"
Maximum="150">
<gauge:RadialAxis.AxisLineStyle>
<gauge:RadialLineStyle ThicknessUnit="Factor"
Thickness="0.1" />
</gauge:RadialAxis.AxisLineStyle>
<gauge:RadialAxis.Pointers>
<gauge:RangePointer Value="60"
PointerWidth="0.1"
WidthUnit="Factor">
<gauge:RangePointer.GradientStops>
<gauge:GaugeGradientStop Value="5"
Color="#FF9E40DC" />
<gauge:GaugeGradientStop Value="60"
Color="#FFE63B86" />
</gauge:RangePointer.GradientStops>
</gauge:RangePointer>
<gauge:NeedlePointer NeedleLengthUnit="Factor"
NeedleFill="#FFCB7EDF"
Value="60"
IsInteractive="True"
NeedleStartWidth="8"
NeedleEndWidth="14"
KnobRadius="0">
</gauge:NeedlePointer>
</gauge:RadialAxis.Pointers>
</local:RadialAxisExt>
</gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>
Output
View sample in the GitHub.
See also
How to create an application using the .NET MAUI Radial Gauge?
How to customize the Range pointer?
How to customize the Needle pointer?
How to position and customize annotation?
