How to use Label Template

To use LabelTemplate in Hierarchicallevel, follow the given steps

Step1: Create a TreeMap sample and include the necessary script files.

Step2: By customizing the template property, you can change according to your requirements.

The LabelTemplate property is used to define the labels for the items that are displayed on the treemap.

XAML:

 <syncfusion:TreeMapHierarchicalLevel.LabelTemplate>

 <DataTemplate>

 <Grid Margin="0 30 0 0">

 <Ellipse Height="110" Width="110" Stroke="White" StrokeThickness="5">

 <Ellipse.Fill>

 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

 <GradientStop Color="#FF8CC63F" Offset="0.5"/>

 <GradientStop Color="#FFF25511" Offset="0.5"/>

 </LinearGradientBrush>

 </Ellipse.Fill> </Ellipse>

<StackPanel Orientation="Vertical" Height="110" Width="120" VerticalAlignment="Center">

<StackPanel Orientation="Vertical" Height="55" Width="120" Margin="0,10,0,0">

<TextBlock Text="Sales" Foreground="White" FontSize="13" HorizontalAlignment="Center"/>

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">

<TextBlock Text="$" Foreground="White" FontSize="19" HorizontalAlignment="Center" Width="13"/>

<TextBlock Text="{Binding Data.Sales}" Foreground="White" FontSize="19" FontWeight="Light" HorizontalAlignment="Center"/>

</StackPanel> </StackPanel>

<StackPanel Orientation="Vertical" Height="55" Width="120" Margin="0,-10,0,0">

<TextBlock Text="Expense" Foreground="White" FontSize="13" HorizontalAlignment="Center"/>

 <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">

<TextBlock Text="$" Foreground="White" FontSize="19" HorizontalAlignment="Center" Width="13"/>

<TextBlock Text="{Binding Data.Expense}" Foreground="White" FontSize="19" FontWeight="Light" HorizontalAlignment="Center"/>

</StackPanel> </StackPanel> </StackPanel>

</Grid> </DataTemplate>

</syncfusion:TreeMapHierarchicalLevel.LabelTemplate>

The following screenshot shows the label Template of Hierarchical level,