How to handle overlapping axis labels in .NET MAUI Cartesian Chart?

3 mins read

The .NET MAUI Cartesian Charts provide various customization options for axis labels, allowing for flexibility and personalization. To ensure optimal readability and prevent potential overlapping of axis labels due to chart dimensions and label sizes, this article demonstrates how to intelligently arrange overlapping axis labels using the LabelsIntersectAction property in .NET MAUI Cartesian Chart.

Step 1:
Begin by initializing the SfCartesianChart following the guidelines in the documentation.

Step 2:
The LabelsIntersectAction property of the axis is utilized to prevent overlapping of axis labels. The available values are as follows:

None:
If LabelsIntersectAction is set to None, axis labels are arranged by default, potentially overlapping each other.

[XAML]

<chart:SfCartesianChart>
 <chart:SfCartesianChart.XAxes>
    <chart:DateTimeAxis LabelsIntersectAction="None"/>
</chart:SfCartesianChart.XAxes>
....
</chart:SfCartesianChart>

[C#]

SfCartesianChart chart = new SfCartesianChart();
DateTimeAxis primaryAxis = new DateTimeAxis()
{
    LabelsIntersectAction = AxisLabelsIntersectAction.None,
};
chart.XAxes.Add(primaryAxis);
...

Hide:
When LabelsIntersectAction is set to Hide, axis labels without sufficient space to render are hidden.

[XAML]

<chart:SfCartesianChart >
<chart:SfCartesianChart.XAxes>
 <chart:DateTimeAxis LabelsIntersectAction="Hide"/>
</chart:SfCartesianChart.XAxes>
....
</chart:SfCartesianChart>

[C#]

SfCartesianChart chart = new SfCartesianChart();
DateTimeAxis primaryAxis = new DateTimeAxis()
{
    LabelsIntersectAction = AxisLabelsIntersectAction.Hide,
};
chart.XAxes.Add(primaryAxis);
...

MultipleRows:
When LabelsIntersectAction is set to MultipleRows, axis labels are arranged into multiple rows when there is insufficient space.

[XAML]

<chart:SfCartesianChart >
<chart:SfCartesianChart.XAxes>
    <chart:DateTimeAxis LabelsIntersectAction="MultipleRows"/>
</chart:SfCartesianChart.XAxes>
....
</chart:SfCartesianChart>

[C#]

SfCartesianChart chart = new SfCartesianChart();
DateTimeAxis primaryAxis = new DateTimeAxis()
{
    LabelsIntersectAction = AxisLabelsIntersectAction.MultipleRows,
};
chart.XAxes.Add(primaryAxis);
...

Wrap:
When setting the Wrap option for LabelsIntersectAction, you should set the width of the axis label using the MaxWidth property available in ChartAxisLabelStyle to facilitate appropriate text wrapping. Additionally, use the WrappedLabelAlignment property to align the wrapped axis label.

[XAML]

<chart:SfCartesianChart>
 <chart:SfCartesianChart.XAxes>
   <chart:DateTimeAxis LabelsIntersectAction="Wrap">
     <chart:DateTimeAxis.LabelStyle >
       <chart:ChartAxisLabelStyle  MaxWidth="28" 
                                  WrappedLabelAlignment="Center"/>
     </chart:DateTimeAxis.LabelStyle>
   </chart:DateTimeAxis>
 </chart:SfCartesianChart.XAxes>
...
</chart:SfCartesianChart>

[C#]

SfCartesianChart chart = new SfCartesianChart();
DateTimeAxis primaryAxis = new DateTimeAxis()
{
    LabelsIntersectAction = AxisLabelsIntersectAction.Wrap,
};
ChartAxisLabelStyle chartAxisLabelStyle = new ChartAxisLabelStyle()
{
    MaxWidth = 28,
    WrappedLabelAlignment = ChartAxisLabelAlignment.Center
};
primaryAxis.LabelStyle = chartAxisLabelStyle;
chart.XAxes.Add(primaryAxis);

Download the complete sample from GitHub.

Conclusion
I hope you enjoyed how to handle overlapping axis labels in .NET MAUI Cartesian Chart.

Refer to our .NET MAUI Chart feature tour page to learn about its other groundbreaking feature representations. You can also explore 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!

Did you find this information helpful?

Yes

Comments (0)

How to handle overlapping axis labels in .NET MAUI Cartesian Chart?

Access denied