How to hide data labels in 100% stacked Blazor Charts?

This article explains how to hide specific data labels in a 100% stacked chart.

Hiding data labels in a stacked chart

Blazor Charts provides support to hide specific data labels using the OnDataLabelRender event. This event is triggered while rendering each data label in the chart series. By utilizing this event, you can hide the data label text based on a condition.

The following code example demonstrates how to hide labels less than 1% by setting the Text argument as empty in the OnDataLabelRender event.

Index.razor

@using Syncfusion.Blazor.Charts
<SfChart>
 <ChartEvents OnDataLabelRender="LabelRender"></ChartEvents>
 <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
 <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
     <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
 </ChartPrimaryXAxis>
 <ChartPrimaryYAxis LabelFormat="{value}%">
 </ChartPrimaryYAxis>
 <ChartSeriesCollection>
     <ChartSeries DataSource="@ChartPoints" XName="Month" YName="AppleSales" Width="2" Name="Apple" Type="Syncfusion.Blazor.Charts.ChartSeriesType.StackingBar100">
         <ChartMarker>
             <ChartDataLabel Visible="true" Position="Syncfusion.Blazor.Charts.LabelPosition.Bottom"></ChartDataLabel>
         </ChartMarker>
     </ChartSeries>
     <ChartSeries DataSource="@ChartPoints" XName="Month" YName="OrangeSales" Width="2" Name="Orange" Type="Syncfusion.Blazor.Charts.ChartSeriesType.StackingBar100">
     <ChartMarker>
             <ChartDataLabel Visible="true" Position="Syncfusion.Blazor.Charts.LabelPosition.Bottom"></ChartDataLabel>
         </ChartMarker>
     </ChartSeries>
     <ChartSeries DataSource="@ChartPoints" XName="Month" YName="Wasteage" Width="2" Name="Wastage" Type="Syncfusion.Blazor.Charts.ChartSeriesType.StackingBar100">
     <ChartMarker>
             <ChartDataLabel Visible="true" Position="Syncfusion.Blazor.Charts.LabelPosition.Bottom"></ChartDataLabel>
         </ChartMarker>
     </ChartSeries>
 </ChartSeriesCollection>
 <ChartTooltipSettings Enable="true" Format="${point.x} : <b>${point.y} (${point.percentage}%)</b>"></ChartTooltipSettings>
</SfChart>
@code {
 public List<StackedBar100ChartData> ChartPoints { get; set; } = new List<StackedBar100ChartData>
 {
     new StackedBar100ChartData { Month = "Jan", AppleSales = 6, OrangeSales = 6, Wasteage = 1 },
     new StackedBar100ChartData { Month = "Feb", AppleSales = 8, OrangeSales = 8, Wasteage = 1.5 },
     new StackedBar100ChartData { Month = "Mar", AppleSales = 12, OrangeSales = 11, Wasteage = 2 },
     new StackedBar100ChartData { Month = "Apr", AppleSales = 15, OrangeSales = 16, Wasteage = 2.5 },
     new StackedBar100ChartData { Month = "May", AppleSales = 0.5, OrangeSales = 21, Wasteage = 3 },
     new StackedBar100ChartData { Month = "Jun", AppleSales = 0.3, OrangeSales = 25, Wasteage = 3.5 }
 };
 public class StackedBar100ChartData
 {
     public string Month { get; set; }
     public double AppleSales { get; set; }
     public double OrangeSales { get; set; }
     public double Wasteage { get; set; }
 }
 void LabelRender(Syncfusion.Blazor.Charts.TextRenderEventArgs args)
 {
     if (double.Parse(args.Text.TrimEnd('%')) < 1)
     {
         args.Text = String.Empty;
     }
 }
}

The following screenshot illustrates the output of the code snippet.

Output

Hide Zero Labels

Conclusion

I hope you enjoyed learning how to hide specific data labels in a 100% stacked chart.

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!