How to add a logarithmic scale in .NET MAUI Radial Gauge?

This article describes how to add a logarithmic axis to the .NET MAUI Radial Gauge control.

Step 1: To add the logarithmic scale, first create a custom axis class by extending it from RadialAxis class.

C#

public class RadialAxisExt : RadialAxis
{
   
}

Step 2: To change the text value of the labels to the logarithmic label format, override the GenerateVisibleLabels method in the custom axis class.

C#

 protected override List<GaugeLabelInfo> GenerateVisibleLabels()
{
    List<GaugeLabelInfo> customLabels = new List<GaugeLabelInfo>();
 
    var _minimum = (int)logBase(this.Minimum, 10);
    var _maximum = (int)logBase(this.Maximum, 10);
    for (var i = _minimum; i <= _maximum; i++)
    {
        int value = (int)Math.Floor(Math.Pow(10, i));// logBase  value is 10
        GaugeLabelInfo label = new GaugeLabelInfo
        {
            Value = value,
            Text = value.ToString()
        };
 
        customLabels.Add(label);
    }
 
    labelsCount = customLabels.Count;
    return customLabels;
}

double logBase(double value, double baseValue)
{
    return Math.Log(value) / Math.Log(baseValue);
}

Step 3: To find the axis factor values based on the respective logarithmic value, override the ValueToFactor method of the custom axis class and implement the logic below for converting the values.

C#

public override double ValueToFactor(double value)
{ 
    return logBase(value, 10) / (labelsCount - 1);
}

Step 4: Now, create the Radial Gauge control by referring to the getting-started documentation and using the custom radial axis class extended from the radial axis.

XAML

<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <local:RadialAxisExt Minimum="1" 
                             Maximum="10000">
            …
        </local:RadialAxisExt>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>

Step 5: Add the NeedlePointer to annotate the desired value.

XAML

<local:RadialAxisExt.Pointers>
   <gauge:NeedlePointer Value="1000" />
</local:RadialAxisExt.Pointers>

Output

Download the complete sample on GitHub.

Conclusion

I hope you enjoyed learning how to add a logarithmic scale to a .NET MAUI Radial Gauge using a custom axis class.

You can refer to our .NET MAUI Radial Gauge feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI Radial Gauge documentation to understand how to create and manipulate data.

 For current customers, check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls.

Please let us know in the comments section if you have any queries or require clarification. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!