How to format y-axis labels and tooltips in a Blazor Chart?

This article explains how to format y-axis labels and tooltips in a Blazor Chart using property and event.

Formatting y axis labels and tooltip

Blazor Charts provides an option to format the y axis labels using LabelFormat property and OnAxisLabelRender event.

To view the chart series tooltip text and y axis labels in different format, you need to specify the format required for tooltip in axis LabelFormat property, then you can change the axis label format in OnAxisLabelRender event. Using this you can view labels and tooltip is required format.

The below code example demonstrates how to format axis label and tooltip.

Index.razor

@using Syncfusion.Blazor.Charts
@code{
 string labelformat = "N";
 string labelformat2 = "N10";
}
<input type="text" @bind="@labelformat" />
<input type="text" @bind="@labelformat2" />
<SfChart>
 <ChartPrimaryYAxis LabelFormat="@labelformat2" ValueType="Syncfusion.Blazor.Charts.ValueType.Double">
 </ChartPrimaryYAxis>
 <ChartPrimaryXAxis LabelFormat="yyyy" Format="M/dd/yyyy" EnableAutoIntervalOnZooming="true" IntervalType="IntervalType.Hours" ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime"></ChartPrimaryXAxis>
 <ChartTooltipSettings Enable="true">
 </ChartTooltipSettings>
 <ChartEvents OnAxisLabelRender="AxisLabelEvent"></ChartEvents>
 <ChartSeriesCollection>
     <ChartSeries DataSource="@Data" XName="XValue" YName="YValue">
         <ChartMarker Visible="true" />
     </ChartSeries>
 </ChartSeriesCollection>
</SfChart>
@code{
 public class ChartData
 {
     public DateTime XValue { get; set; }
     public double YValue { get; set; }
 }
 public List<ChartData> Data = getchart();
 public static List<ChartData> getchart()
 {
     Random random = new Random();
     List<ChartData> newchart = new();
     for (int i = 0; i < 1000; i++)
     {
         DateTime xValue = DateTime.UtcNow.AddDays(i + 1);
         double yValue = random.NextDouble();
         newchart.Add(new ChartData { XValue = xValue, YValue = yValue });
     }
     return newchart;
 }
 public void AxisLabelEvent(AxisLabelRenderEventArgs args)
 {
     double axisLabel = Convert.ToDouble(args.Text);
     args.Text = axisLabel.ToString(labelformat);
 }
} 

The following screenshot illustrates the output of the code snippet.

Output

Tooltip Format Demo

Conclusion

I hope you enjoyed learning how to format y axis label and tooltip in different format in Blazor Chart Component.

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!