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

This article explains how to display data labels inside segments in a .NET MAUI Cartesian 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 Cartesian Chart 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 to 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 to 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 to 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

Download the complete sample from GitHub.

Conclusion

I hope you enjoyed learning how to display data inside segments in .NET MAUI Cartesian Chart.

You can refer to our .NET MAUI Cartesian Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications and manipulate data.

For current customers, check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls.

Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!