Axis line in .NET MAUI Chart

1 Jan 20252 minutes to read

Customization

Cartesian chart axis provides support to customize the style of axis line by defining the AxisLineStyle property as shown in the below code snippet.

<chart:SfCartesianChart>
    . . .
    <chart:SfCartesianChart.XAxes>
        <chart:NumericalAxis>
            <chart:NumericalAxis.AxisLineStyle>
                <chart:ChartLineStyle StrokeWidth="2"
                                      Stroke="Red"/>
            </chart:NumericalAxis.AxisLineStyle>
        </chart:NumericalAxis>
    </chart:SfCartesianChart.XAxes>
    . . .
</chart:SfCartesianChart>
SfCartesianChart chart = new SfCartesianChart();
. . .
NumericalAxis primaryAxis = new NumericalAxis();
ChartLineStyle axisLineStyle = new ChartLineStyle()
{
    Stroke = Colors.Red,
    StrokeWidth = 2,
};
primaryAxis.AxisLineStyle = axisLineStyle;
chart.XAxes.Add(primaryAxis);
. . .
this.Content = chart;

Axis line customization support in MAUI Chart

Offset

The padding to the axis line is defined by using the AxisLineOffset property.

<chart:SfCartesianChart>
    . . .
    <chart:SfCartesianChart.XAxes>
        <chart:NumericalAxis AxisLineOffset="25">
            <chart:NumericalAxis.AxisLineStyle>
                <chart:ChartLineStyle StrokeWidth="2"
                                      Stroke="Red"/>
            </chart:NumericalAxis.AxisLineStyle>
        </chart:NumericalAxis>
    </chart:SfCartesianChart.XAxes>
</chart:SfCartesianChart>
SfCartesianChart chart = new SfCartesianChart();
. . .
NumericalAxis primaryAxis = new NumericalAxis();
primaryAxis.AxisLineOffset = 25;
ChartLineStyle axisLineStyle = new ChartLineStyle()
{
    Stroke = Colors.Red,
    StrokeWidth = 2,
};
primaryAxis.AxisLineStyle = axisLineStyle;

chart.XAxes.Add(primaryAxis);
. . .
this.Content = chart;

Padding support for axis line in WinUI