How to Customize Pyramid Chart Data Labels with in .NET MAUI?

This article offers a step-by-step guide on how to customize the data labels for .NET MAUI Toolkit Pyramid Chart.

The SfPyramidChart provides support for LabelTemplate, allowing you to customize the appearance of data labels to match your requirements.You can customize elements such as font size, color, alignment, and even add custom shapes or images within the labels.

Learn step-by-step instructions and gain insights to customize the datalabel using LabelTemplate for Pyramid Chart.

Step 1: Initialize the Pyramid Chart
Define the SfPyramidChart and bind it to a data source using ItemsSource. Set the XBindingPath and YBindingPath to map data fields.

XAML

<chart:SfPyramidChart ItemsSource="{Binding SupportTicketStages}"
                     XBindingPath="Stage"
                     YBindingPath="Values" 
                     GapRatio="0.02" 
                     ShowDataLabels="True">

   ......

</chart:SfPyramidChart> 

C#

SfPyramidChart pyramidChart = new SfPyramidChart()
{
   ItemsSource = new ViewModel().SupportTicketStages,
   XBindingPath = "Stage",
   YBindingPath = "Values",
   GapRatio = 0.02,
   ShowDataLabels = true
};
....

Step 2: Enable Data Labels with LabelTemplate
Enable ShowDataLabels to display labels on the pyramid chart. Use the LabelTemplate to style data labels with custom backgrounds, icons and text formatting to improve visual appeal.

XAML

<chart:SfPyramidChart ItemsSource="{Binding SupportTicketStages}"
                     XBindingPath="Stage"
                     YBindingPath="Values" 
                     GapRatio="0.02" 
                     ShowDataLabels="True">

   <chart:SfPyramidChart.LabelTemplate>
       <DataTemplate>
       
           <Border Padding="4" Background="{Binding Item.Stage, Converter={StaticResource SegmentColorConverter}}" StrokeShape="RoundRectangle"         
                   Stroke="Transparent">
           
               <HorizontalStackLayout HorizontalOptions="Center" Margin="3">
                   <Image Source="{Binding Item.Stage, Converter={StaticResource ImageConverter}}" WidthRequest="35" HeightRequest="35"/>

                   <Label Text="{Binding Item.Values, StringFormat=' : {0}'}" 
                          FontSize="17" FontAttributes="Bold"
                          TextColor="White"
                          HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
               </HorizontalStackLayout>
               
           </Border>
           
       </DataTemplate>
   </chart:SfPyramidChart.LabelTemplate>

   <chart:SfPyramidChart.DataLabelSettings>
       <chart:PyramidDataLabelSettings LabelPlacement="Outer"/>
   </chart:SfPyramidChart.DataLabelSettings>

   .......

</chart:SfPyramidChart> 

C#

SfPyramidChart pyramidChart = new SfPyramidChart()
{
   ItemsSource = new ViewModel().SupportTicketStages,
   XBindingPath = "Stage",
   YBindingPath = "Values",
   GapRatio = 0.02,
   ShowDataLabels = true
};

DataTemplate labelTemplate = new DataTemplate(() =>
{
   Border border = new Border()
   {
       Padding = 4,
       StrokeShape = new RoundRectangle { CornerRadius = 5 },
       Stroke = Colors.Transparent
   };

   border.SetBinding(Border.BackgroundProperty, new Binding("Item.Stage", BindingMode.Default, new SegmentColorConverter()));

   HorizontalStackLayout stackLayout = new HorizontalStackLayout()
   {
       HorizontalOptions = LayoutOptions.Center,
       Margin = new Thickness(3)
   };

   Image image = new Image()
   {
       WidthRequest = 35,
       HeightRequest = 35
   };
   image.SetBinding(Image.SourceProperty, new Binding("Item.Stage", BindingMode.Default, new ImageConverter()));

   Label label = new Label()
   {
       FontSize = 17,
       FontAttributes = FontAttributes.Bold,
       TextColor = Colors.White,
       HorizontalTextAlignment = TextAlignment.Center,
       VerticalTextAlignment = TextAlignment.Center
   };
   label.SetBinding(Label.TextProperty, new Binding("Item.Values", stringFormat: " : {0}"));

   stackLayout.Children.Add(image);
   stackLayout.Children.Add(label);

   border.Content = stackLayout;
   return border;
});

pyramidChart.LabelTemplate = labelTemplate;

PyramidDataLabelSettings dataLabelSettings = new PyramidDataLabelSettings()
{
   LabelPlacement = DataLabelPlacement.Outer
};

pyramidChart.DataLabelSettings = dataLabelSettings;

..... 

Step 3: Use Converters for Dynamic Styling
Create SegmentColorConverter to dynamically assign background colors based on the stage name and ImageConverter to map corresponding icons using IValueConverter. These converters help in visually distinguishing different data points.

C#

public class SegmentColorConverter : IValueConverter
{

   public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
   {
       if (value is string stage)
       {
           return stage switch
           {
               "Closed" => Color.FromArgb("#F7C066"),
               "Resolved" => Color.FromArgb("#1F77B4"),
               "Waiting Response" => Color.FromArgb("#27AE60"),
               "Awaiting Customer" => Color.FromArgb("#FF6F61"),
               "In Progress" => Color.FromArgb("#F8D74B"),
               "New Tickets" => Color.FromArgb("#6B5B95"),
               _ => Colors.Gray
           };
       }
       
       return Colors.Gray;
   }

   public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
   {
       throw new NotImplementedException();
   }
}

public class ImageConverter : IValueConverter
{

   public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
   {
       if(value is string stage)
       {
           return stage switch
           {
               "Closed" => "close.png",
               "Resolved" => "resolved.png",
               "Waiting Response" => "wait.png",
               "Awaiting Customer" => "waiting.png",
               "In Progress" => "workinprogress.png",
               "New Tickets" => "supportticket.png",
               _ => "default.png"
           };
       }
       
       return "default.png";
   }

   public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
   {
       throw new NotImplementedException();
   }
} 

Output:

Conclusion:
I hope you enjoyed learning about how to customize the data labels using label template for .NET MAUI Toolkit Pyramid Chart.
You can refer to our .NET MAUI PyramidChart feature tour page to know about its other groundbreaking feature representations.

You can also explore our .NET MAUI Chart documentation to understand how to present 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 trail 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, Direct-Trac, or feedback portal. We are always happy to assist you!