# 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**

```XAML
<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**

```XAML
 <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](https://www.telerik.com/winui/documentation/controls/radheatmap/populating-with-data). After having the sample data ready, modify the row and column headers in XAML.

#### **Customize the row and column headers**

```XAML
<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**

![WinUI RadHeatMap RadHeatMap with Customized Labels](https://www.telerik.com/winui/documentation/assets/ea2aa6215705c2b2e193584ce5c94629/radheatmap-row-column-headers_0.png)

## See Also

* [Getting Started with the Telerik UI for WinUI HeatMap](https://www.telerik.com/winui/documentation/controls/radbadge/getting-started)
* [Telerik UI for WinUI Demos](https://demos.telerik.com/winui/)
* [HeatMap Labels](https://www.telerik.com/winui/documentation/controls/radheatmap/labels)
* [Populating the HeatMap with data](https://www.telerik.com/winui/documentation/controls/radheatmap/populating-with-data)