Row and Column Headers

You can further customize the row and column headers of the HeatMap through the RowHeaderSettings and ColumnHeaderSettings properties, which take an instance of the HeatMapRowHeaderSettings and HeatMapColumnHeaderSettings classes respectively.

Common Properties

Both HeatMapRowHeaderSettings and HeatMapColumnHeaderSettings classes inherit from a base HeatMapHeaderSettings class which exposes the following properties:

• LabelStyle—The style that is applied to the labels.
• HoveredLabelStyle—The style that is applied to the labels that the mouse is over.
• LabelHorizontalAlignment—The value that is applied to the HorizontalAlignment property of the labels.
• LabelVerticalAlignment—The value that is applied to the VerticalAlignment property of the labels.
• LabelFormat—The label format string.
• LabelClipToBounds—A value indicating whether to clip the labels in the control. A label is clipped only if the desired size of the label is larger than the allotted space for this label.
• LabelInterval—Specifies the value indicating that only one out of N header labels should be visible where N is the value of the property.

Row Headers

To customize the row headers, use the RowHeaderSettings property of the HeatMap.

Apart from its common properties, the HeatMapRowHeaderSettings class exposes an additional LabelsPanelPosition property to change the position of the label to the right side of the HeatMap. LabelsPanelPosition is of type HeatMapRowLabelsPanelPosition and gets or sets the row headers position. This is an enumeration and allows the following values:

• (Default) Left—The row labels will be positioned on the left side of the HeatMap.
• Right—The row labels will be positioned on the right side of the HeatMap.

Modify the row headers

<telerik:RadHeatMap >             
    <telerik:RadHeatMap.RowHeaderSettings> 
        <telerik:HeatMapRowHeaderSettings LabelsPanelPosition="Right"/> 
    </telerik:RadHeatMap.RowHeaderSettings> 
</telerik:RadHeatMap> 

Column Headers

To customize the column headers, use the ColumnHeaderSettings property of the HeatMap.

Apart from its common properties, the HeatMapColumnHeaderSettings provides additional properties to change the position of the column headers and to rotate the labels.

• LabelsPanelPosition—A property of type HeatMapColumnLabelsPanelPosition that gets or sets the column headers position. This is an enumeration and allows the following values:

  • (Default) Top—The column headers will be positioned at the top of the HeatMap.
  • Bottom—The column headers will be positioned at the bottom of the HeatMap.

• LabelRotationAngle—A property of type double that gets or sets the rotation angle applied to the label.

Modify the column headers

 <telerik:RadHeatMap >             
    <telerik:RadHeatMap.ColumnHeaderSettings> 
        <telerik:HeatMapColumnHeaderSettings LabelsPanelPosition="Bottom" LabelRotationAngle="60"/> 
    </telerik:RadHeatMap.ColumnHeaderSettings> 
</telerik:RadHeatMap> 

Customizing the Row and Column Headers

The following implementation uses the TempInfo and ViewModel classes from the article on populating the HeatMap with data. After having the sample data ready, modify the row and column headers in XAML.

Customize the row and column headers

<telerik:RadHeatMap CellBorderColor="Black" CellBorderThickness="1"> 
    <telerik:RadHeatMap.RowHeaderSettings> 
        <telerik:HeatMapRowHeaderSettings LabelsPanelPosition="Right"  
                                            LabelFormat="yyyy" 
                                            LabelVerticalAlignment="Center"  
                                            LabelInterval="2"> 
            <telerik:HeatMapRowHeaderSettings.LabelStyle> 
                <Style TargetType="TextBlock"> 
                    <Setter Property="Foreground" Value="Red"/> 
                    <Setter Property="FontSize" Value="16"/> 
                    <Setter Property="FontWeight" Value="Bold"/> 
                </Style> 
            </telerik:HeatMapRowHeaderSettings.LabelStyle> 
        </telerik:HeatMapRowHeaderSettings> 
    </telerik:RadHeatMap.RowHeaderSettings> 
 
    <telerik:RadHeatMap.ColumnHeaderSettings> 
        <telerik:HeatMapColumnHeaderSettings LabelsPanelPosition="Bottom" LabelRotationAngle="60"> 
            <telerik:HeatMapColumnHeaderSettings.LabelStyle> 
                <Style TargetType="TextBlock"> 
                    <Setter Property="FontSize" Value="16"/> 
                    <Setter Property="FontWeight" Value="Bold"/> 
                </Style> 
            </telerik:HeatMapColumnHeaderSettings.LabelStyle> 
        </telerik:HeatMapColumnHeaderSettings> 
    </telerik:RadHeatMap.ColumnHeaderSettings> 
 
    <telerik:RadHeatMap.Definition> 
        <telerik:CategoricalDefinition x:Name="categoricalDefinition"  
                            RowGroupMemberPath="Year" ItemsSource="{Binding TempInfos}" 
                            ColumnGroupMemberPath="Month"  
                            ValuePath="Temperature" /> 
    </telerik:RadHeatMap.Definition> 
</telerik:RadHeatMap> 

A HeatMap with customized row and column headers

See Also

• Getting Started with the Telerik UI for WinUI HeatMap
• Telerik UI for WinUI Demos
• HeatMap Labels
• Populating the HeatMap with data