How to Display DateTime Axis Without Trim or Hide in Blazor Charts?

This article explains how to render edge labels on a DateTime axis in a Blazor Charts without them being trimmed or hidden.

Display edge label without hide or trim

When axis labels are rotated, the last (edge) label on the DateTime axis axis may be automatically trimmed or hidden to prevent overlap due to limited space. This behavior is intended to prevent label overlap and maintain chart readability.

To overcome this, you can increase the right margin of the chart using the ChartMargin.Right property. By allocating additional space on the right side, the edge label has enough space to be displayed fully. The value assigned to the right margin should be based on the width of the axis labels. For wider labels, a larger margin value (e.g., 70) is recommended, while narrower labels may only require a smaller value.

Adjusting the chart margin in this way ensures that the last DateTime axis label is clearly visible, enhancing the overall presentation and usability of the chart.

The following code example demonstrates how to specify right margin for chart.

Code Snippet

@using Syncfusion.Blazor.Charts
<SfChart Title="Alaska Weather Statistics - 2016">
   <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
   <ChartMargin Right="70"></ChartMargin>
   <ChartPrimaryXAxis LabelFormat="MMM dd, yyyy" LabelRotation="45" Interval="7" IntervalType="Syncfusion.Blazor.Charts.IntervalType.Days" 
   ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" EdgeLabelPlacement="EdgeLabelPlacement.Shift">
       <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
   </ChartPrimaryXAxis>
   <ChartPrimaryYAxis Minimum="0" Maximum="280" Interval="20" EdgeLabelPlacement="EdgeLabelPlacement.Shift">
       <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
       <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
       <ChartAxisMinorTickLines Width="0"></ChartAxisMinorTickLines>
   </ChartPrimaryYAxis>
   <ChartSeriesCollection>
       <ChartSeries DataSource="@ChartPoints" XName="Period" YName="MaxTemp" Opacity="1" Name="Warmest" Width="2" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Line">
           <ChartMarker Visible="true" Height="8" Width="8" IsFilled="true" Shape="ChartShape.Circle">
           </ChartMarker>
       </ChartSeries>
       <ChartSeries DataSource="@ChartPoints" XName="Period" YName="MinTemp" Opacity="1" Name="Coldest" Width="2" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Line">
           <ChartMarker Visible="true" Height="8" Width="8" IsFilled="true" Shape="ChartShape.Circle">
           </ChartMarker>
       </ChartSeries>
   </ChartSeriesCollection>
   <ChartLegendSettings Visible="true"></ChartLegendSettings>
</SfChart>
@code{
   public List<DateTimeData> ChartPoints { get; set; } = new List<DateTimeData>
   {
       new DateTimeData { Period = new DateTime(2025, 4, 28), MaxTemp = 260,  MinTemp = 270 },
       new DateTimeData { Period = new DateTime(2025, 5, 5),  MaxTemp = 240,  MinTemp = 250},
       //...
   };
   public class DateTimeData
   {
       public DateTime Period { get; set; }
       public Nullable<double> MaxTemp { get; set; }
       public double MinTemp { get; set; }
   }
} 

Output

Sample

Edge Label Without Hide or Trim

Conclusion

I hope you enjoyed learning about how to display DateTime axis without trim or hide in Blazor Charts.

You can refer to our Blazor Chart’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our Blazor Chart Documentation to understand how to present and manipulate data.

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

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