ChartAxisLabelStyle doesn't start at the beginning of the Axis

[Junior Saravia]

I'm currently migrating a Xamarin app to NET Maui v8.0.100.

When I use this code, I see differences between platforms (some Hours on the Maui version are not shown) so I'd like to know how to modify it to have the same result as Xamarin.

<chart:DateTimeAxis.LabelStyle>

    <chart:ChartAxisLabelStyle LabelFormat="hh tt" TextColor="Black" FontSize="9"/>

</chart:DateTimeAxis.LabelStyle>



Difference:

Attachment: MauiSample8_20679429.zip

[Saiyath Ali Fathima Bee Moidhin Abdhul Kathar]

Hi Junior Saravia,

We would like to inform you that we can position the axis label at the desired position using the EdgeLabelsDrawingMode property. For your reference, we have provided the code snippet and demo below.

 <chart:SfCartesianChart.XAxes>

     <chart:DateTimeAxis IntervalType="Minutes" EdgeLabelsDrawingMode="Center"

                           Interval="10"

                           Minimum="{Binding MinDate}"

                           Maximum="{Binding MaxDate}">

         <chart:DateTimeAxis.LabelStyle>

             <chart:ChartAxisLabelStyle LabelFormat="hh:mm tt" TextColor="Black" FontSize="9"/>

         </chart:DateTimeAxis.LabelStyle>

     </chart:DateTimeAxis>

 </chart:SfCartesianChart.XAxes>

 

 <chart:SfCartesianChart.YAxes>

     <chart:NumericalAxis Interval="10" Maximum="0" Minimum="100"  EdgeLabelsDrawingMode="Center">

         <chart:NumericalAxis.LabelStyle>

             <chart:ChartAxisLabelStyle  TextColor="Black" FontSize="9"/>

         </chart:NumericalAxis.LabelStyle>

     </chart:NumericalAxis>

 </chart:SfCartesianChart.YAxes>

UG for Edge Labels Drawing Mode -  https://help.syncfusion.com/maui/cartesian-charts/axis/axislabels#edge-labels-drawing-mode

Regards,

Saiyath Ali Fathima M

[Junior Saravia]

I followed the above code snippet and it worked well on Android version.

The final numbers are cut on iOS.

It happens on iPhone 13 simulator (iOS v15.2) - iPhone 15 simulator (iOS v17.0)

[Saiyath Ali Fathima Bee Moidhin Abdhul Kathar]

Hi Junior Saravia,

 

We would like to inform you that we can adjust the axis edge label using the PlotOffsetEnd property. For your reference, we have provided the code snippet and API reference below.

 

 <chart:SfCartesianChart.XAxes>

     <chart:DateTimeAxis IntervalType="Minutes" EdgeLabelsDrawingMode="Center" PlotOffsetEnd="20"

Interval="10"

Minimum="{Binding MinDate}"

Maximum="{Binding MaxDate}">

<chart:DateTimeAxis.LabelStyle>

             <chart:ChartAxisLabelStyle LabelFormat="hh:mm tt" TextColor="Black" FontSize="9"/>

</chart:DateTimeAxis.LabelStyle>

     </chart:DateTimeAxis>

 </chart:SfCartesianChart.XAxes>

 

 <chart:SfCartesianChart.YAxes>

     <chart:NumericalAxis Interval="10" Maximum="0" Minimum="100"  EdgeLabelsDrawingMode="Center"  PlotOffsetEnd="20">

<chart:NumericalAxis.LabelStyle>

<chart:ChartAxisLabelStyleTextColor="Black" FontSize="9"/>

</chart:NumericalAxis.LabelStyle>

     </chart:NumericalAxis>

 </chart:SfCartesianChart.YAxes>

 

• PlotOffsetStart - https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html#Syncfusion_Maui_Charts_ChartAxis_PlotOffsetStart
• PlotOffsetEnd - https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html#Syncfusion_Maui_Charts_ChartAxis_PlotOffsetEnd

 

Regards,

Saiyath Ali Fathima M