How to rotate axis labels in .NET MAUI Chart (SfCartesianChart)?
The .NET MAUI Chart allows for rotating the axis labels in the Cartesian chart. The LabelRotation property is used to define the rotation angle for label content. This article explains how to rotate the axis labels in the SfCartesianChart, as shown in the following code example.
[Xaml]
<ContentPage.BindingContext>
<model:ViewModel></model:ViewModel>
</ContentPage.BindingContext>
<chart:SfCartesianChart>
<chart:SfCartesianChart.Title>
<Label Text="Height Comparison"
FontAttributes="Bold"
FontSize="Title"
VerticalOptions="Center"
HorizontalOptions="Center"/>
</chart:SfCartesianChart.Title>
<chart:SfCartesianChart.XAxes>
<chart:CategoryAxis LabelRotation="60" >
<chart:CategoryAxis.Title>
<chart:ChartAxisTitle Text="Name"/>
</chart:CategoryAxis.Title>
</chart:CategoryAxis>
</chart:SfCartesianChart.XAxes>
<chart:SfCartesianChart.YAxes>
<chart:NumericalAxis LabelRotation="60">
<chart:NumericalAxis.Title>
<chart:ChartAxisTitle Text="Height (in cm)"/>
</chart:NumericalAxis.Title>
</chart:NumericalAxis>
</chart:SfCartesianChart.YAxes>
<chart:ColumnSeries ItemsSource="{Binding Data}"
XBindingPath="Name"
YBindingPath="Height">
</chart:ColumnSeries>
</chart:SfCartesianChart>
[C#]
SfCartesianChart chart = new SfCartesianChart();
this.BindingContext = new ViewModel();
chart.Title = new Label
{
Text = "Height Comparison",
FontAttributes = FontAttributes.Bold,
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center,
FontSize = 15,
};
// Initializing primary axis
CategoryAxis primaryAxis = new CategoryAxis()
{
LabelRotation = 60,
Title = new ChartAxisTitle()
{
Text = "Name"
},
};
chart.XAxes.Add(primaryAxis);
//Initializing secondary Axis
NumericalAxis secondaryAxis = new NumericalAxis()
{
LabelRotation = 60,
Title = new ChartAxisTitle()
{
Text = "Height (in cm)",
},
};
chart.YAxes.Add(secondaryAxis);
//Initialize the two series for SfChart
ColumnSeries series = new ColumnSeries()
{
ItemsSource = (new ViewModel()).Data,
XBindingPath = "Name",
YBindingPath = "Height"
};
//Adding Series to the Chart Series Collection
chart.Series.Add(series);
this.Content = chart;
Output
|
Download the complete sample on GitHub.
Conclusion
I hope you enjoyed learning how to rotate the axis labels in the .NET MAUI Chart (SfCartesianChart).
You can refer to our .NET MAUI Chart feature tour page to learn about its other groundbreaking feature representations. You can also learn how to present and manipulate data by exploring our .NET MAUI Chart documentation to understand how to present and manipulate data.
For current customers, check out our .NET MAUI from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Chart and other .NET MAUI components.
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!
