How to Display Rotated Edge Label without Cropping in Blazor Charts?

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

Displaying rotated label without cropping

Blazor Charts provides an option to render edge rotated x-axis labels 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 code example below demonstrates how to render a 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 labels without cropping in Blazor Charts. For more features, visit our Blazor Charts feature tour page to learn about its other groundbreaking features, documentation, and how to quickly get started with configuration specifications. You can also explore our Blazor Charts example to understand how to create and manipulate data.

For current customers, our Blazor components are available on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to evaluate our Blazor Charts and other Blazor components.

If you have any questions 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!