How to Change Position of Axis Label and TickLine in .NET MAUI Chart ?

This article provides a comprehensive guide on changing the position of Axis Label and Axis TickLines in the .NET MAUI Toolkit Cartesian Chart.

The SfCartesianChart offers support for LabelsPosition and TickPosition properties for axes. These properties let you customize the placement of AxisLabels and TickLines, allowing you to position labels inside or outside the axis and adjust TickLines for improved readability and visual clarity.

Learn step-by-step instructions and gain insights to change the position of AxisLabel and Axis TickLines.

Configure the Toolkit Cartesian Chart
Define SfCartesianChart with a CategoryAxis for the X-axis and a NumericalAxis for the Y-axis. Add a LineSeries to visualize data points.

XAML

<chart:SfCartesianChart>

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

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

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

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

   .....

   <chart:LineSeries ItemsSource="{Binding TaskUsageData}"
                 XBindingPath="Task"
                 YBindingPath="Chrome"
                 ShowMarkers="True"
                 Label="Chrome"/>

   <chart:LineSeries ItemsSource="{Binding TaskUsageData}"
                 XBindingPath="Task"
                 YBindingPath="Photoshop"
                 ShowMarkers="True"
                 Label="Photoshop"/>

   <chart:LineSeries ItemsSource="{Binding TaskUsageData}"
                 XBindingPath="Task"
                 YBindingPath="VisualStudio"
                 ShowMarkers="True"
                 Label="VisualStudio"/>

</chart:SfCartesianChart> 

C#

var chart = new SfCartesianChart();

var categoryAxis = new CategoryAxis();
chart.XAxes.Add(categoryAxis);

var numericalAxis = new NumericalAxis();
chart.YAxes.Add(numericalAxis);

chart.Series.Add(new LineSeries()
{
   ItemsSource = new ViewModel().TaskUsageData,
   XBindingPath = "Task",
   YBindingPath = "Chrome",
   ShowMarkers = true,
   Label = "Chrome"
});

chart.Series.Add(new LineSeries()
{
   ItemsSource = new ViewModel().TaskUsageData,
   XBindingPath = "Task",
   YBindingPath = "Photoshop",
   ShowMarkers = true,
   Label = "Photoshop"
});

chart.Series.Add(new LineSeries()
{
   ItemsSource = new ViewModel().TaskUsageData,
   XBindingPath = "Task",
   YBindingPath = "VisualStudio",
   ShowMarkers = true,
   Label = "VisualStudio"
}); 

Customize the Axis Label and Tick Lines Position
The LabelsPosition and TickPosition properties allow you to control the placement of axis labels and tick lines. When set to Inside, these properties position the labels and tick lines within the chart area.

XAML

<chart:SfCartesianChart>
     ........

   <chart:SfCartesianChart.XAxes>
       <chart:CategoryAxis LabelsPosition="Inside" LabelPlacement="BetweenTicks" ShowMajorGridLines="True" TickPosition="Inside">
           ......
       </chart:CategoryAxis>
   </chart:SfCartesianChart.XAxes>

   <chart:SfCartesianChart.YAxes>
       <chart:NumericalAxis LabelsPosition="Inside" ShowMajorGridLines="True" Minimum="0" Maximum="100" Interval="20" TickPosition="Inside">
           .......
       </chart:NumericalAxis>
   </chart:SfCartesianChart.YAxes>

  .......
</chart:SfCartesianChart> 

C#

var chart = new SfCartesianChart();

var categoryAxis = new CategoryAxis()
{
   LabelsPosition = AxisElementPosition.Inside,
   LabelPlacement = LabelPlacement.BetweenTicks,
   ShowMajorGridLines = true,
   TickPosition = AxisElementPosition.Inside,
   ......
};
chart.XAxes.Add(categoryAxis);

var numericalAxis = new NumericalAxis()
{
   LabelsPosition = AxisElementPosition.Inside,
   ShowMajorGridLines = true,
   Minimum = 0,
   Maximum = 100,
   Interval = 20,
   TickPosition = AxisElementPosition.Inside,
   .......
};
chart.YAxes.Add(numericalAxis);
...... 

Output:

Conclusion:
I hope you enjoyed learning how to change the position of axis labels and tick lines in .NET MAUI Chart.

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

For current customers, 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.

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