How to Customize Data Labels Using Events in Blazor Charts?

This article explains how to customize data labels using the OnDataLabelRender event in Blazor Charts.

Customize data labels using an Event

Blazor Charts provides the ability to customize data labels dynamically using the OnDataLabelRender event. You can modify the label’s text by setting the Text property of the event argument.

The following example demonstrates how to format data labels to display values in thousands (e.g., 30K instead of 30000) using the OnDataLabelRender event.

@using Syncfusion.Blazor.Charts

<SfChart>
   <ChartEvents OnDataLabelRender="DataLabelRenderEvent"></ChartEvents>
   <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
   <ChartSeriesCollection>
       <ChartSeries DataSource="@WeatherReports" XName="X" YName="Y" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Column">
           <ChartMarker>
               <ChartDataLabel Visible="true" />
           </ChartMarker>
       </ChartSeries>
   </ChartSeriesCollection>
</SfChart>

@code {
   public void DataLabelRenderEvent(Syncfusion.Blazor.Charts.TextRenderEventArgs args)
   {
        args.Text = (args.Point.YValue / 1000).ToString("0.#") + "K";
   }
   public class Data
   {
       public string X { get; set; }
       public double Y { get; set; }
   }

   public List<Data> WeatherReports = new List<Data>
   {
       new Data{ X= "Jan", Y= 30000 },
       new Data{ X= "Feb", Y= 35000 },
       new Data{ X= "Mar", Y= 20000 },
       new Data{ X= "Apr", Y= 45000 },
       new Data{ X= "May", Y= 25000 },
       new Data{ X= "Jun", Y= 40000 }
   };
} 

Output

The following screenshot illustrates the customized data labels in the chart:

Live Sample

You can view a live demo of customizing data labels using the OnDataLabelRender event here.

Conclusion:

We hope you found this guide helpful in learning how to customize data labels using events in Blazor Charts. For more features, visit our Blazor Charts feature tour page to learn about its other groundbreaking features, documentation, and how to quickly get started with configuration specifications. You can also explore our Blazor Charts example to understand how to create and manipulate data.

For current customers, our Blazor components are available on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to evaluate our Blazor Charts and other Blazor components.

If you have any questions 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!