Tick Lines in .NET MAUI Chart

29 Oct 20244 minutes to read

Tick lines are the small lines which is drawn on the axis line representing the axis labels. Tick lines will be drawn outside of the axis by default.

And also minor tick lines can be added to the axis by defining the MinorTicksPerInterval property. This property will add the minor tick lines to every interval based on value.

NOTE

For category axis, minor tick lines are not applicable. Since it is rendered based on index positions.

XAML

<chart:SfCartesianChart>
    . . .
    <chart:SfCartesianChart.XAxes>
        <chart:NumericalAxis MinorTicksPerInterval="4"/>
    </chart:SfCartesianChart.XAxes>

    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis/>
    </chart:SfCartesianChart.YAxes>
</chart:SfCartesianChart>

C#

SfCartesianChart chart = new SfCartesianChart();
. . .
NumericalAxis primaryAxis = new NumericalAxis()
{
    MinorTicksPerInterval = 4 
};
chart.XAxes.Add(primaryAxis);

NumericalAxis secondaryAxis = new NumericalAxis();
chart.YAxes.Add(secondaryAxis);

this.Content = chart;

Positioning the ticks

The tick lines can be positioned inside or outside the chart area using the TickPosition property. TickPosition property default value is AxisElementPosition.Outside.

XAML

<chart:SfCartesianChart>
    . . .  
    <chart:SfCartesianChart.XAxes>
        <chart:CategoryAxis/>
    </chart:SfCartesianChart.XAxes>

    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis TickPosition="Inside"/>
    </chart:SfCartesianChart.YAxes>
</chart:SfCartesianChart>

C#

SfCartesianChart chart = new SfCartesianChart();
CategoryAxis primaryAxis = new CategoryAxis();
NumericalAxis secondaryAxis = new NumericalAxis()
{
    TickPosition = AxisElementPosition.Inside
};

chart.XAxes.Add(primaryAxis);
chart.YAxes.Add(secondaryAxis);

this.Content = chart;

Customization

Both major and minor tick lines can be customized by using the MajorTickStyle and MinorTickStyle properties respectively. They provide options to change the StrokeWidth, TickSize, Stroke of tick lines. By default minor tick lines will not be visible.

XAML

<chart:SfCartesianChart>
    . . .
    <chart:SfCartesianChart.XAxes>
        <chart:NumericalAxis MinorTicksPerInterval="4">
            <chart:NumericalAxis.MajorTickStyle>
                <chart:ChartAxisTickStyle Stroke="Red"
                                          StrokeWidth="1"
                                          TickSize="10"/>
            </chart:NumericalAxis.MajorTickStyle>
            
            <chart:NumericalAxis.MinorTickStyle>
                <chart:ChartAxisTickStyle Stroke="Red" StrokeWidth="1"/>
            </chart:NumericalAxis.MinorTickStyle>
        </chart:NumericalAxis>
    </chart:SfCartesianChart.XAxes>

    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis/>
    </chart:SfCartesianChart.YAxes>
</chart:SfCartesianChart>

C#

SfCartesianChart chart = new SfCartesianChart();
. . .
NumericalAxis numerical = new NumericalAxis();
numerical.MinorTicksPerInterval = 4;

numerical.MajorTickStyle = new ChartAxisTickStyle()
{
    StrokeWidth = 1,
    Stroke = Colors.Red,
    TickSize = 10,
};

numerical.MinorTickStyle = new ChartAxisTickStyle()
{
    StrokeWidth = 1,
    Stroke = Colors.Red,
};

chart.XAxes.Add(numerical);

NumericalAxis secondaryAxis = new NumericalAxis();
chart.YAxes.Add(secondaryAxis);

this.Content = chart;