Axis line in .NET MAUI Cartesian Chart

10 Jul 20263 minutes to read

The axis line in .NET MAUI Cartesian Chart visually represents the axis itself in the chart area. You can customize its appearance, including stroke color, width, and dash patterns, using the AxisLineStyle property. Additionally, you can control the spacing between the axis and the chart area using the AxisLineOffset property.

NOTE

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

Customizing axis line style

The AxisLineStyle property allows you to customize the axis line appearance. The ChartLineStyle class provides the following properties:

• Stroke — Sets the color of the axis line.
• StrokeWidth — Sets the width of the axis line in pixels.
• DashArray — Sets the dash pattern for the axis line (e.g., solid, dotted, dashed).

XAML

<chart:SfCartesianChart>
    <chart:SfCartesianChart.XAxes>
        <chart:NumericalAxis>
            <chart:NumericalAxis.AxisLineStyle>
                <chart:ChartLineStyle StrokeWidth="2" Stroke="Red"/>
            </chart:NumericalAxis.AxisLineStyle>
        </chart:NumericalAxis>
    </chart:SfCartesianChart.XAxes>
    <!-- code omitted for brevity -->
</chart:SfCartesianChart>

C#

SfCartesianChart chart = new SfCartesianChart();

NumericalAxis primaryAxis = new NumericalAxis();
ChartLineStyle axisLineStyle = new ChartLineStyle()
{
    Stroke = Colors.Red,
    StrokeWidth = 2
};
primaryAxis.AxisLineStyle = axisLineStyle;
chart.XAxes.Add(primaryAxis);
// code omitted for brevity
this.Content = chart;

Axis line offset

The AxisLineOffset property controls the distance between the axis line and the chart area in device-independent pixels (DIPs). The default value is 0. A positive value moves the axis line away from the chart area, while a negative value moves it closer.

XAML

<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>
    <!-- code omitted for brevity -->
</chart:SfCartesianChart>

C#

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);
// code omitted for brevity
this.Content = chart;