How to Customize Axis Labels Using LabelFormat in Blazor Charts?

This article explains how to customize axis labels using the LabelFormat property in Blazor Charts.

Customize axis labels with LabelFormat

Blazor Charts allows you to customize axis labels by setting the LabelFormat property on the axis. You can format date and numeric values, and even insert line breaks using the br tag for multi-line labels.

Example

In the following example, the x-axis labels (dates) are customized to display both date and time in two lines using br tag. The y-axis labels are formatted to include a degree Celsius symbol (e.g., 10°C).

@using Syncfusion.Blazor.Charts
<SfChart Title="Alaska Weather Statistics - 2016">
       <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
   <ChartPrimaryXAxis LabelFormat="dd/MM<br>HH:mm" ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime">
           <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
       </ChartPrimaryXAxis>
       <ChartPrimaryYAxis Minimum="-20" Maximum="30" Interval="10" EdgeLabelPlacement="EdgeLabelPlacement.Shift" LabelFormat="{value}°C">
           <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="Syncfusion.Blazor.Charts.ChartShape.Pentagon">
                   <ChartDataLabel Visible="true" Position="Syncfusion.Blazor.Charts.LabelPosition.Top">
                   </ChartDataLabel>
               </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="Syncfusion.Blazor.Charts.ChartShape.Diamond">
                   <ChartDataLabel Visible="true" Position="Syncfusion.Blazor.Charts.LabelPosition.Top">
                   </ChartDataLabel>
               </ChartMarker>
           </ChartSeries>
       </ChartSeriesCollection>
       <ChartLegendSettings Visible="true"></ChartLegendSettings>
   </SfChart>
@code{
   public List<DateTimeData> ChartPoints { get; set; } = new List<DateTimeData>
   {
       new DateTimeData { Period = new DateTime(2016, 3, 07, 13, 05, 00), MaxTemp = 6.3, MinTemp = -5.3},
       new DateTimeData { Period = new DateTime(2016, 4, 15, 14, 10, 00), MaxTemp = 13.3, MinTemp = 1.0 },
       new DateTimeData { Period = new DateTime(2016, 5, 10, 15, 15, 00), MaxTemp = 18.0, MinTemp = 6.9 },
       new DateTimeData { Period = new DateTime(2016, 6, 17, 16, 20, 00), MaxTemp = 19.8, MinTemp = 9.4 },
       new DateTimeData { Period = new DateTime(2016, 7, 13, 17, 25, 00), MaxTemp = 18.1, MinTemp = 7.6 },
       new DateTimeData { Period = new DateTime(2016, 8, 11, 18, 30, 00), MaxTemp = 13.1, MinTemp = 2.6 },
       new DateTimeData { Period = new DateTime(2016, 9, 16, 19, 35, 00), MaxTemp = 4.1, MinTemp = -4.9 }
   };
   public class DateTimeData
   {
       public DateTime Period { get; set; }
       public double MaxTemp { get; set; }
       public double MinTemp { get; set; }
   }
} 

Output

The following screenshot illustrates the customized axis labels:

Live Sample

You can try a live sample demonstrating how to customize axis labels using LabelFormat here.

Conclusion:

We hope you found this guide helpful in learning How to customize axis labels using LabelFormat 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!