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.