How to smartly handle the axis labels in an SfCartesianChart

Cartesian charts provide customization options for axis labels, sometimes axis labels can overlap due to chart dimensions and label size. This article demonstrates how to intelligently arrange overlapping axis labels using the LabelsIntersectAction property in .NET MAUI SfCartesianChart.

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, which axis labels don't have space that 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);