How to display data labels inside segments in .NET MAUI SfCartesian Chart?

This article explains how to display data labels inside segments in a .NET MAUI SfCartesian Chart for clearer data visualization.

In .NET MAUI, data labels can be positioned inside column segments by utilizing the LabelPlacement property of ChartDataLabelSettings and the BarAlignment property of CartesianDataLabelSettings, which are available in the CartesianSeries. These properties enable the adjustment of label positions. Furthermore, label customization is possible through the LabelTemplate property.

Step 1: Initialize the Syncfusion .NET MAUI SfCartesianChart

Initialize the Syncfusion .NET MAUI SfCartesianChart using this documentation.

[XAML]

<charts:SfCartesianChart>
      .   .   .   .
</charts:SfCartesianChart> 

[C#]

SfCartesianChart charts = new SfCartesianChart(); 

Step 2: Enable the data labels for the chart’s series

Data labels can be enabled or disabled using the ShowDataLabels property in ChartSeries. The default value for ShowDataLabels is false.

Refer the following Code snippet.

[XAML]

<charts:SfCartesianChart >

.    .    .    .

       <charts:SfCartesianChart.Series>
           <charts:ColumnSeries ItemsSource="{Binding Data}" 
                                PaletteBrushes="{Binding CustomBrushes}"
                                XBindingPath="Name"
                                YBindingPath="Value"
                                ShowDataLabels="True">
                                
       </charts:SfCartesianChart.Series>
       
   </charts:SfCartesianChart> 

[C#]

.     .      .

ColumnSeries columnSeries = new ColumnSeries
{
   XBindingPath = "Name",
   YBindingPath = "Value",
   ShowDataLabels = true,
};

columnSeries.SetBinding(ColumnSeries.ItemsSourceProperty, "Data");
columnSeries.SetBinding(ColumnSeries.PaletteBrushesProperty, "CustomBrushes");

chart.Series.Add(columnSeries); 

Step 3: Customize the data label using LabelTemplate

Data labels can be customized to meet specific requirements using the LabelTemplate. The LabelTemplate binding context is always ChartDataLabel, which includes a business model accessible via its Item property. You can directly use this Item property in your bindings for data access. In our scenario, we utilize the label as a template, bind the Name property data of the business model to text, modify the FontAttribute and TextColor, and alter the label’s orientation through Rotation.

Refer the following code example.

[XAML]

.    .    .    .

       <charts:SfCartesianChart.Series>
           <charts:ColumnSeries >
               .    .    .    . 
               <charts:ColumnSeries.LabelTemplate>
                   <DataTemplate>
                       <Label Text="{Binding Item.Name}" TextColor="White"
                              FontAttributes="Bold" Rotation="-90"/>
                   </DataTemplate>
               </charts:ColumnSeries.LabelTemplate>
                               
           </charts:ColumnSeries>
       </charts:SfCartesianChart.Series>
.    .    .    . 

[C#]

.   .   .   .

ColumnSeries columnSeries = new ColumnSeries
{    
   LabelTemplate = new DataTemplate(() =>
   {
       Label label = new Label
       {
           TextColor = Colors.White,
           Rotation = -90,
           FontAttributes = FontAttributes.Bold,
           FontSize = 16,
       };
       label.SetBinding(Label.TextProperty, "Item.Name");
       return label;
   })
};
.   .   .   .

Step 4: Center the data label inside the segment

The LabelPlacement and BarAlignment properties are used to adjust the position of data labels.

Refer the following code example.

[XAML]

.    .    .    .

       <charts:SfCartesianChart.Series>
       
           <charts:ColumnSeries>
                .  .  .  .
                <charts:ColumnSeries.DataLabelSettings>
                   <charts:CartesianDataLabelSettings BarAlignment="Middle"
                                                      LabelPlacement="Center"/>
               </charts:ColumnSeries.DataLabelSettings>
               
           </charts:ColumnSeries>
                                
       </charts:SfCartesianChart.Series>
.    .    .    .

[C#]

.   .   .   .

ColumnSeries columnSeries = new ColumnSeries
{
    DataLabelSettings = new CartesianDataLabelSettings
    {
        LabelPlacement = DataLabelPlacement.Center,
        BarAlignment = DataLabelAlignment.Middle, 
    },
}; 
.   .   .   .

Output

Explore the runnable demo from this GitHub location.

Conclusion

I hope you enjoyed learning how to display data labels inside segments in .NET MAUI SfCartesian Chart. You can also explore our .NET MAUI Chart documentation to understand how to present and manipulate data.
For current customers, check out our .NET MAUI from the License and Downloads page. If you are new to Syncfusion, try our 30-day free trial to check out ours .NET MAUI Chart and other .NET MAUI components.
Please let us know in the following comments section if you have any queries or require clarifications. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!