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

Conclusion:

We hope you found this guide helpful in learning How to display rotated edge label without cropping in Blazor Charts. For more features, visit our [Blazor Charts feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our [Blazor Charts example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!