How to Display Axis Labels for Minor Tick Lines in .NET MAUI Toolkit Charts?

This article offers a comprehensive guide on how to display Axis Labels for Minor Tick Lines in .NET MAUI Toolkit Cartesian Chart.

The SfCartesianChart includes support for Annotations, allowing developers to enhance data visualization. While axis labels are not displayed automatically for minor ticks, you can use TextAnnotation to manually place custom labels at the positions of minor tick lines, effectively simulating axis labels for them.

Learn step-by-step instructions and gain insights to display Axis Labels for Minor Tick Lines.

Configure the Toolkit Cartesian Chart
Define SfCartesianChart with both X-axis and Y-axis set as NumericalAxis to represent numeric data. Add a LineSeries to visualize data points.

XAML

<chart:SfCartesianChart>

   <chart:SfCartesianChart.XAxes>
       <chart:NumericalAxis Minimum="2002" Interval="2" Maximum="2020"/>
   </chart:SfCartesianChart.XAxes>

   <chart:SfCartesianChart.YAxes>
       <chart:NumericalAxis Minimum="0" Maximum="120" Interval="20"/>
   </chart:SfCartesianChart.YAxes>

   ......

   <chart:LineSeries ItemsSource="{Binding WheatCultivationData}"
                     XBindingPath="Year"
                     YBindingPath="Value"
                     Label="Wheat"
                     ShowMarkers="True"/>

   <chart:LineSeries ItemsSource="{Binding RiceCultivationData}"
                     XBindingPath="Year"
                     YBindingPath="Value"
                     Label="Rice"
                     ShowMarkers="True"/>

   <chart:LineSeries ItemsSource="{Binding MaizeCultivationData}"
                     XBindingPath="Year"
                     YBindingPath="Value"
                     Label="Maize"
                     ShowMarkers="True"/>

</chart:SfCartesianChart> 

Display the Axis Labels for Minor Tick Lines

Enable minor ticks by setting the MinorTicksPerInterval property on the axis to display additional tick marks between major intervals.This code uses code-behind logic to dynamically add TextAnnotation labels to a SfCartesianChart by converting X-axis values to pixel coordinates with ValueToPoint. It calculates midpoints between visible labels and places annotations precisely using properties like X1, Y1, Text and LabelStyle and CoordinateUnit to Pixel, applying offsetX and offsetY for fine-tuned alignment during the SizeChanged event.

XAML

<chart:SfCartesianChart>

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

   ......

</chart:SfCartesianChart> 

C#

public partial class MainPage : ContentPage
{
   private double offsetX = -0.45;
   private double offsetY = 17;
   
   public MainPage()
   {
       InitializeComponent();
       this.SizeChanged += MainPage_SizeChanged;
   }
   
   private void MainPage_SizeChanged(object? sender, EventArgs e)
   {
       Dispatcher.Dispatch(async () =>
       {
           await Task.Delay(300);
           var labels = new Dictionary<double, string>();
           var visiblelabels = XAxis.VisibleLabels;
           for (int i = 1; i < visiblelabels.Count; i++)
           {
               double midYear = (Convert.ToDouble(visiblelabels[i - 1].Content) + Convert.ToDouble(visiblelabels[i].Content)) / 2;
               labels.Add(midYear, midYear.ToString());
           }
           
           chart.Annotations.Clear();
           foreach (var item in labels)
           {
               AddDynamicAnnotation(item.Key + offsetX, chart.SeriesBounds.Height + offsetY, item.Value);
           }
       });
   }
   
   public void AddDynamicAnnotation(double xAxisValue, double yValue, string labelText)
   {
       // Convert axis values to screen points
       var x = chart.ValueToPoint(XAxis, xAxisValue);
       
       // Create the annotation
       var annotation = new TextAnnotation
       {
           X1 = x,
           Y1 = yValue,
           Text = labelText,
           CoordinateUnit = ChartCoordinateUnit.Pixel,
           LabelStyle = new ChartAnnotationLabelStyle
           {
               FontAttributes = FontAttributes.Bold,
               FontSize = 11,
               TextColor = Colors.Black
           }
       };
       chart.Annotations.Add(annotation);
   }
}

Output:

Download the complete sample from GitHub.

Conclusion:
I hope you enjoyed learning about how to display axis labels for minor tick lines in .NET MAUI Cartesian Chart.

You can refer to our .NET MAUI Toolkit Chart’s feature tour page to learn about its other groundbreaking feature representations and documentation to understand how to present and manipulate data.

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

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!