How to display rotated edge label without cropping in Blazor Charts?

This article explains how to display the rotated x axis labels without cropping at right edge in Blazor Charts.

Displaying rotated label without cropping

Blazor Charts provides an option to render edge rotated x axis label without cropping using the ChartMargin Right property.

When LabelRotation is applied to ChartPrimaryXAxis, the axis labels are rotated, which can cause the last label to be cropped if it extends outside the chart boundaries. This can be resolved by setting a Right value in ChartMargin, which ensures the last label is displayed fully without cropping.

The below code example demonstrates how to render rotated last label without cropping.

@using Syncfusion.Blazor.Charts
<SfChart>
   <ChartMargin Right="45"></ChartMargin>
   <ChartPrimaryXAxis Interval="1" LabelRotation="45" LabelFormat="dd/MM/yyyy" ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime"></ChartPrimaryXAxis>
   <ChartSeriesCollection>
       <ChartSeries Width="2" DataSource="@WeatherReports" XName="XValue" YName="YValue" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Line">
       </ChartSeries>
   </ChartSeriesCollection>
</SfChart>
@code {
   public class ChartData
   {
       public DateTime XValue { get; set; }
       public double YValue { get; set; }
   }
   public List<ChartData> WeatherReports = new List<ChartData>
   {
       new ChartData { XValue = new DateTime(2005, 01, 01), YValue = 37 },
       new ChartData { XValue = new DateTime(2006, 01, 01), YValue = 18 },
       //...
   };
} 

Output

Live Sample for Displaying Edge Label Without Cropping