Axis line in .NET MAUI Polar Chart

15 Jul 20262 minutes to read

Customization

The polar chart axis provides support for customizing the style of the axis line by defining the AxisLineStyle property, as shown in the code sample below.

NOTE

Prerequisite: Ensure that the required NuGet package is installed, the necessary namespaces are imported, and the SfPolarChart control is properly configured in your application. For detailed setup and configuration instructions, refer to the Getting Started guide.

NOTE

The customization of axis lines using the AxisLineStyle property can only be applied to the secondary axis.

<chart:SfPolarChart>
    <!-- code omitted for brevity -->
    <chart:SfPolarChart.SecondaryAxis>
        <chart:NumericalAxis>
            <chart:NumericalAxis.AxisLineStyle>
                <chart:ChartLineStyle StrokeWidth = "2" Stroke = "Red"/>
            </chart:NumericalAxis.AxisLineStyle>
        </chart:NumericalAxis>
    </chart:SfPolarChart.SecondaryAxis>
</chart:SfPolarChart>
SfPolarChart chart = new SfPolarChart();
// code omitted for brevity
NumericalAxis secondaryAxis = new NumericalAxis();
ChartLineStyle axisLineStyle = new ChartLineStyle()
{
    Stroke = Colors.Red,
    StrokeWidth = 2
};
secondaryAxis.AxisLineStyle = axisLineStyle;
chart.SecondaryAxis = secondaryAxis;

this.Content = chart;

Offset

The padding for the axis line is defined by using the AxisLineOffset property. The value is specified in pixels (px).

<chart:SfPolarChart>
    <!-- code omitted for brevity -->
    <chart:SfPolarChart.SecondaryAxis>
        <chart:NumericalAxis AxisLineOffset = "25">
            <chart:NumericalAxis.AxisLineStyle>
                <chart:ChartLineStyle StrokeWidth = "2" Stroke = "Red"/>
            </chart:NumericalAxis.AxisLineStyle>
        </chart:NumericalAxis>
    </chart:SfPolarChart.SecondaryAxis>
</chart:SfPolarChart>
SfPolarChart chart = new SfPolarChart();
// code omitted for brevity
NumericalAxis secondaryAxis = new NumericalAxis();
secondaryAxis.AxisLineOffset = 25;
ChartLineStyle axisLineStyle = new ChartLineStyle()
{
    Stroke = Colors.Red,
    StrokeWidth = 2
};
secondaryAxis.AxisLineStyle = axisLineStyle;
chart.SecondaryAxis = secondaryAxis;

this.Content = chart;