How to Change the Position of Axis Label and Axis TickLines in .NET MAUI Cartesian Chart ?

This article offers a comprehensive guide on how to change the position of Axis Label and Axis TickLines in .NET MAUI Toolkit Cartesian Chart.

The SfCartesianChart provides support for LabelsPosition and TickPosition properties for axes, allowing you to customize the placement of AxisLabels and TickLines. These properties let you 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 CategoryAxis for the X-axis and 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, enhancing readability and visual clarity.

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 about how to change the position of axis label and axis ticklines in .NET MAUI toolkit 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!