How to Display y-axis Label Values as Strings in Blazor Charts?

This article explains how to display Y-axis label values as strings in Blazor Charts.

Display Y-Axis Label Values as Strings

Blazor Charts provides an option to display Y-axis label values as strings. This can be achieved by utilizing the OnAxisLabelRender event to render the Y-axis label values as strings.

In this code snippet, the OnAxisLabelRender event is utilized to render custom Y-axis labels as strings. The LabelRender method modifies the default numeric labels on the Y-axis to display predefined string values.

The StringArray contains the custom labels to be displayed. As the LabelRender method is triggered for each label, it sets the Text of the Y-axis labels based on the StringArray, cycling through the values.

Index.razor

@using Syncfusion.Blazor.Charts

<SfChart Title="Alaska Weather Statistics - 2016">
   <ChartEvents OnAxisLabelRender="LabelRender"></ChartEvents>
   <ChartTooltipSettings Enable="true">
   </ChartTooltipSettings>
   <ChartPrimaryXAxis Interval="1" LabelPlacement="Syncfusion.Blazor.Charts.LabelPlacement.OnTicks" ValueType="Syncfusion.Blazor.Charts.ValueType.Category" Title="Months"></ChartPrimaryXAxis>
   <ChartPrimaryYAxis Title="Temperature (Celsius)" Minimum="-25" Maximum="25" Interval="10" EdgeLabelPlacement="EdgeLabelPlacement.Shift"></ChartPrimaryYAxis>
   <ChartSeriesCollection>
       <ChartSeries IsClosed="true" DataSource="@ChartPoints" Name="Germany" XName="Month" Width="2" Opacity="1" YName="GER_Temp" Type="@SeriesType">
           <ChartMarker IsFilled="true" Visible="true" Height="7" Width="7" Shape="ChartShape.Pentagon"></ChartMarker>
       </ChartSeries>
       <ChartSeries IsClosed="true" DataSource="@ChartPoints" Name="England" XName="Month" Width="2" Opacity="1" YName="ENG_Temp" Type="@SeriesType">
           <ChartMarker IsFilled="true" Visible="true" Height="7" Width="7" Shape="ChartShape.Pentagon"></ChartMarker>
       </ChartSeries>
   </ChartSeriesCollection>
   <ChartLegendSettings EnableHighlight="true"></ChartLegendSettings>
</SfChart>

@code {
   String[] StringArray = new String[] { "-TwentyFive", "-Fifteen", "-Five", "Five", "Fifteen", "TwentyFive" };
   public int Count = 0;
   
   public void LabelRender(Syncfusion.Blazor.Charts.AxisLabelRenderEventArgs args)
   {
       if (Count >= 6)
           Count = 0;
       if (args.Axis.Name == "PrimaryYAxis")
       {
           args.Text = StringArray[Count];
           Count++;
       }
   }

   private Syncfusion.Blazor.Charts.ChartSeriesType SeriesType { get; set; } = Syncfusion.Blazor.Charts.ChartSeriesType.Polar;
   
   public List<PolarLineChartData> ChartPoints { get; set; } = new List<PolarLineChartData>
   {
       new PolarLineChartData { Month = "Jan", GER_Temp = -7.1, ENG_Temp = -17.4 },
       new PolarLineChartData { Month = "Feb", GER_Temp = -3.7, ENG_Temp = -15.6  },
       new PolarLineChartData { Month = "Mar", GER_Temp = 0.8, ENG_Temp = -12.3  },
       new PolarLineChartData { Month = "Apr", GER_Temp = 6.3, ENG_Temp = -5.3 },
       new PolarLineChartData { Month = "May", GER_Temp = 13.3, ENG_Temp = 1.0 },
       new PolarLineChartData { Month = "Jun", GER_Temp = 18.0, ENG_Temp =  6.9  },
       new PolarLineChartData { Month = "Jul", GER_Temp = 19.8 , ENG_Temp = 9.4 },
       new PolarLineChartData { Month = "Aug", GER_Temp = 18.1, ENG_Temp = 7.6 },
       new PolarLineChartData { Month = "Sep", GER_Temp = 13.1 , ENG_Temp = 2.6 },
       new PolarLineChartData { Month = "Oct", GER_Temp = 4.1, ENG_Temp = -4.9},
       new PolarLineChartData { Month = "Nov", GER_Temp = -3.8, ENG_Temp = -13.4 },
       new PolarLineChartData { Month = "Dec", GER_Temp = -6.8, ENG_Temp = -16.4 },
   };
   
   public class PolarLineChartData
   {
       public string Month { get; set; }
       public double GER_Temp { get; set; }
       public double ENG_Temp { get; set; }
   }
} 

The following screenshot illustrates the output of the code snippet.

Live Sample for Displaying Y-Axis Label Values as Strings

Conclusion

I hope you enjoyed learning how to display y-axis label values as strings 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, support portal, or feedback portal. We are always happy to assist you!