How to Display Axis Labels for Minor Tick Lines in Blazor Charts?

This article explains how to display axis labels for minor tick lines in Blazor Charts.

Display Axis Labels for Minor Tick Marks

Blazor Charts provides an option to display axis labels for minor tick lines. This can be achieved by utilizing ChartAnnotation to render custom axis labels for minor tick lines.

In this code snippet, ChartAnnotation is utilized to render custom axis labels for minor tick lines on a chart. The Chart component displays a weather report with temperature data, and ChartAnnotation is used to place custom labels at specific positions on the chart. The ChartAnnotation~~~~ elements are configured with X and Y values representing their positions on the chart. Each annotation uses a ContentTemplate to define the label’s appearance, allowing for custom formatting such as font size and style.

Index.razor

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Charts


<SfChart ID="chart" Title="NC Weather Report - 2016">
   <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime"
                      TickPosition="AxisPosition.Outside" LabelPosition="AxisPosition.Outside"
                      IntervalType="Syncfusion.Blazor.Charts.IntervalType.Days" PlotOffset="0"
                      Interval="1" MinorTicksPerInterval="1"
                      Format="d MMM" EdgeLabelPlacement="EdgeLabelPlacement.Shift">
       <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
       <ChartAxisMinorTickLines Width="2" Height="10" Color="#C8D1D4" />
       <ChartAxisMajorTickLines Width="2" Height="20" Color="#647A90" />
       <ChartBorder Width="0" />
       <ChartAxisLabelStyle Size="12px"
                            Color=""
                            FontWeight="600" />
       <ChartAxisLineStyle Width="1" Color="#C6CCD2" />
       <ChartAxisMajorGridLines Width="1" Color="rgba(198,204,210,0.25)" />
       <ChartAxisMinorGridLines Width="1" Color="rgba(198,204,210,0.25)" />
   </ChartPrimaryXAxis>
   <ChartPrimaryYAxis LabelFormat="{value}°C">
       <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
       <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
   </ChartPrimaryYAxis>
   <ChartSeriesCollection>
       <ChartSeries DataSource="@SplineData" Name="Max Temp" XName="Days" Width="2"
                    Opacity="1" YName="MaxTemp" Type="ChartSeriesType.Spline">
           <ChartMarker Visible="true" Width="7" Height="7">
           </ChartMarker>
       </ChartSeries>
       <ChartSeries DataSource="@SplineData" Name="Avg Temp" XName="Days" Width="2"
                    Opacity="1" YName="AvgTemp" Type="ChartSeriesType.Spline">
           <ChartMarker Visible="true" Width="7" Height="7">
           </ChartMarker>
       </ChartSeries>
       <ChartSeries DataSource="@SplineData" Name="Min Temp" XName="Days" Width="2"
                    Opacity="1" YName="MinTemp" Type="ChartSeriesType.Spline">
           <ChartMarker Visible="true" Width="7" Height="7">
           </ChartMarker>
       </ChartSeries>
   </ChartSeriesCollection>
   <ChartAnnotations>
       <ChartAnnotation X="@xVal" Y="@yVal" Region="Regions.Chart" CoordinateUnits="Units.Pixel">
           <ContentTemplate>
               <div style="font-size:12px;font-size: medium; font-style: italic">8</div>
           </ContentTemplate>
       </ChartAnnotation>
       <ChartAnnotation X="@xVal1" Y="@yVal" Region="Regions.Chart" CoordinateUnits="Units.Pixel">
           <ContentTemplate>
               <div style="font-size:12px;font-size: medium; font-style: italic">15</div>
           </ContentTemplate>
       </ChartAnnotation>
       <ChartAnnotation X="@xVal2" Y="@yVal" Region="Regions.Chart" CoordinateUnits="Units.Pixel">
           <ContentTemplate>
               <div style="font-size:12px;font-size: medium; font-style: italic">32</div>
           </ContentTemplate>
       </ChartAnnotation>
       <ChartAnnotation X="@xVal3" Y="@yVal" Region="Regions.Chart" CoordinateUnits="Units.Pixel">
           <ContentTemplate>
               <div style="font-size:12px;font-size: medium; font-style: italic">2</div>
           </ContentTemplate>
       </ChartAnnotation>
       <ChartAnnotation X="@xVal4" Y="@yVal" Region="Regions.Chart" CoordinateUnits="Units.Pixel">
           <ContentTemplate>
               <div style="font-size:12px;font-size: medium; font-style: italic">14</div>
           </ContentTemplate>
       </ChartAnnotation>
       <ChartAnnotation X="@xVal5" Y="@yVal" Region="Regions.Chart" CoordinateUnits="Units.Pixel">
           <ContentTemplate>
               <div style="font-size:12px;font-size: medium; font-style: italic">32</div>
           </ContentTemplate>
       </ChartAnnotation>
   </ChartAnnotations>
</SfChart>

@code {
   public string xVal = "13%";
   
   public string yVal = "120%";

   public string xVal1 = "30%";

   public string xVal2 = "47%";

   public string xVal3 = "63%";

   public string xVal4 = "80%";

   public string xVal5 = "97%";

   public List<SplineChartData> SplineData = new List<SplineChartData>
   {
       new SplineChartData { Days = new DateTime(2024, 8, 4), MaxTemp = 15, AvgTemp = 10, MinTemp = 2 },
       new SplineChartData { Days = new DateTime(2024, 8, 5), MaxTemp = 22, AvgTemp = 18, MinTemp = 12 },
       new SplineChartData { Days = new DateTime(2024, 8, 6), MaxTemp = 32, AvgTemp = 28, MinTemp = 22 },
       new SplineChartData { Days = new DateTime(2024, 8, 7), MaxTemp = 31, AvgTemp = 28, MinTemp = 23 },
       new SplineChartData { Days = new DateTime(2024, 8, 8), MaxTemp = 29, AvgTemp = 26, MinTemp = 19 },
       new SplineChartData { Days = new DateTime(2024, 8, 9), MaxTemp = 24, AvgTemp = 20, MinTemp = 13 },
       new SplineChartData { Days = new DateTime(2024, 8, 10), MaxTemp = 18, AvgTemp = 15, MinTemp = 8 }
   };

   public class SplineChartData
   {
       public DateTime Days { get; set; }
       public double MaxTemp { get; set; }
       public double AvgTemp { get; set; }
       public double MinTemp { get; set; }
   }
} 

The following screenshot illustrates the output of the code snippet.

Live Sample for Displaying Axis Labels for Minor Tick Lines

Conclusion

I hope you enjoyed learning how to display axis labels for minor tick lines in Blazor Charts.

You can refer to our Blazor Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Chart 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, Direct-Trac, or feedback portal. We are always happy to assist you!