Getting Started with WPF HeatMap (SfHeatMap)

Initialize the SfHeatMap

The SfHeatMap exists in the Syncfusion.UI.Xaml.HeatMap namespace. Initialize SfHeatMap to the XAML Page as shown in the following code sample.

XAML

<Window x:Class="GettingStarted.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:GettingStarted"
        mc:Ignorable="d"
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <syncfusion:SfHeatMap>

        </syncfusion:SfHeatMap>
    </Grid>
</Window>

NOTE

Starting with v16.2.0.x, if you reference Syncfusion® assemblies from trial setup or from the NuGet feed, you also have to include a license key in your projects. Please refer to this link to know about registering Syncfusion® license key in your WPF application to use our components.

Prepare data

Create a class to store product information to be visualized using SfHeatMap.

public class Product
{
    public string ProductName { get; set; }
    public double Y2007 { get; set; }
    public double Y2008 { get; set; }
    public double Y2009 { get; set; }
    public double Y2010 { get; set; }
    public double Y2011 { get; set; }
    public double Y2012 { get; set; }
    public double Y2013 { get; set; }
    public double Y2014 { get; set; }
    public double Y2015 { get; set; }
    public double Y2016 { get; set; }

    public Product()
    {

    }
}

public class Products : ObservableCollection<Product>
{

}

Populate data

Populate product information in a collection.

XAML

<local:Products x:Key="productsData">
    <local:Product ProductName="Alice Mutton" Y2007="3" Y2008="4" Y2009="3" Y2010="4" Y2011="10" 
                   Y2012="6" Y2013="7" Y2014="6" Y2015="8" Y2016="5"/>
    <local:Product ProductName="Boston Crab Meat" Y2007="10" Y2008="11" Y2009="10" Y2010="12"  
                   Y2011="15" Y2012="13" Y2013="11" Y2014="10" Y2015="12" Y2016="11"/>
    <local:Product ProductName="Raclette Courdavault" Y2007="12" Y2008="12" Y2009="15" Y2010="18" 
                   Y2011="19" Y2012="20" Y2013="22" Y2014="21" Y2015="22" Y2016="25"/>
    <local:Product ProductName="Gorgonzola Telino" Y2007="1" Y2008="1" Y2009="2" Y2010="3" 
                   Y2011="2" Y2012="2" Y2013="3" Y2014="2" Y2015="3" Y2016="3"/>
    <local:Product ProductName="Chartreuse verte" Y2007="15" Y2008="14" Y2009="14" Y2010="13" 
                   Y2011="10" Y2012="8" Y2013="9" Y2014="9" Y2015="8" Y2016="8"/>
    <local:Product ProductName="Fløtemysost" Y2007="3" Y2008="3" Y2009="4" Y2010="5" Y2011="4" 
                   Y2012="6" Y2013="8" Y2014="2" Y2015="5" Y2016="7"/>
    <local:Product ProductName="Carnarvon Tigers" Y2007="20" Y2008="21" Y2009="20" Y2010="20"
                   Y2011="20" Y2012="21" Y2013="20" Y2014="20" Y2015="21" Y2016="22"/>
    <local:Product ProductName="Vegie-spread" Y2007="18" Y2008="19" Y2009="20" Y2010="21" 
                   Y2011="22" Y2012="23" Y2013="24" Y2014="25" Y2015="25" Y2016="25"/>
    <local:Product ProductName="Tarte au sucre" Y2007="1" Y2008="2" Y2009="3" Y2010="3" Y2011="4" 
                   Y2012="4" Y2013="7" Y2014="10" Y2015="12" Y2016="16"/>
    <local:Product ProductName="Konbu" Y2007="10" Y2008="8" Y2009="8" Y2010="7" Y2011="8" 
                   Y2012="10" Y2013="11" Y2014="12" Y2015="11" Y2016="13"/>
    <local:Product ProductName="Valkoinen suklaa" Y2007="20" Y2008="20" Y2009="19" Y2010="20" 
                   Y2011="15" Y2012="12" Y2013="6" Y2014="3" Y2015="3" Y2016="3"/>
    <local:Product ProductName="Perth Pasties" Y2007="12" Y2008="13" Y2009="13" Y2010="15" 
                   Y2011="15" Y2012="18" Y2013="19" Y2014="19" Y2015="22" Y2016="22"/>
</local:Products>

Map data into SfHeatMap

Now the data is ready. Next, configure the data source and map rows and columns to visualize.

Prepare ItemsMapping add it in resource.
XAML

<syncfusion:TableMapping x:Key="itemsMapping">
    <syncfusion:TableMapping.HeaderMapping>
        <syncfusion:ColumnMapping PropertyName="ProductName" DisplayName="Product"/>
    </syncfusion:TableMapping.HeaderMapping>
    <syncfusion:TableMapping.ColumnMapping>
        <syncfusion:ColumnMapping PropertyName="Y2007" DisplayName="2007"/>
        <syncfusion:ColumnMapping PropertyName="Y2008" DisplayName="2008"/>
        <syncfusion:ColumnMapping PropertyName="Y2009" DisplayName="2009"/>
        <syncfusion:ColumnMapping PropertyName="Y2010" DisplayName="2010"/>
        <syncfusion:ColumnMapping PropertyName="Y2011" DisplayName="2011"/>
        <syncfusion:ColumnMapping PropertyName="Y2012" DisplayName="2012"/>
        <syncfusion:ColumnMapping PropertyName="Y2013" DisplayName="2013"/>
        <syncfusion:ColumnMapping PropertyName="Y2014" DisplayName="2014"/>
        <syncfusion:ColumnMapping PropertyName="Y2015" DisplayName="2015"/>
        <syncfusion:ColumnMapping PropertyName="Y2016" DisplayName="2016"/>
    </syncfusion:TableMapping.ColumnMapping>
</syncfusion:TableMapping>

Set items source and mapping
XAML

<syncfusion:SfHeatMap ItemsSource="{StaticResource productsData}" 
                      ItemsMapping="{StaticResource itemsMapping}">
</syncfusion:SfHeatMap>

This will show a grid with data as in the following image.

Showing grid with data

Color mapping

Next, configure a color range for these values using color mapping.

Configure items mapping based on items source.
XAML

<syncfusion:ColorMappingCollection x:Key="colorMapping">
    <syncfusion:ColorMapping Value="0" Color="#8ec8f8"/>
    <syncfusion:ColorMapping Value="30" Color="#0d47a1"/>
</syncfusion:ColorMappingCollection>

Set the color mapping.
XAML

<syncfusion:SfHeatMap ItemsSource="{StaticResource productsData}" 
                      ItemsMapping="{StaticResource itemsMapping}"
                      ColorMappingCollection="{StaticResource colorMapping}">
</syncfusion:SfHeatMap>

This will show the grid data with color based on the given range.

Showing the grid data with color based on the range

Legend

A legend control is used to represent range values in a gradient. Create a legend with the same color mapping as shown below.

XAML

<syncfusion:SfHeatMapLegend ColorMappingCollection="{StaticResource colorMapping}"/>

Complete example

The final MainWindow.xaml.cs looks like this.

namespace GettingStarted
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }

    public class Product
    {
        public string ProductName { get; set; }
        public double Y2007 { get; set; }
        public double Y2008 { get; set; }
        public double Y2009 { get; set; }
        public double Y2010 { get; set; }
        public double Y2011 { get; set; }
        public double Y2012 { get; set; }
        public double Y2013 { get; set; }
        public double Y2014 { get; set; }
        public double Y2015 { get; set; }
        public double Y2016 { get; set; }

        public Product()
        {

        }
    }

    public class Products : ObservableCollection<Product>
    {

    }
}

The final MainWindow.xaml looks like this.

XAML

<Window x:Class="GettingStarted.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:GettingStarted"
        mc:Ignorable="d"
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <local:Products x:Key="productsData">
            <local:Product ProductName="Alice Mutton" Y2007="3" Y2008="4" Y2009="3" Y2010="4" Y2011="10" Y2012="6" Y2013="7" Y2014="6" Y2015="8" Y2016="5"/>
            <local:Product ProductName="Boston Crab Meat" Y2007="10" Y2008="11" Y2009="10" Y2010="12" Y2011="15" Y2012="13" Y2013="11" Y2014="10" Y2015="12" Y2016="11"/>
            <local:Product ProductName="Raclette Courdavault" Y2007="12" Y2008="12" Y2009="15" Y2010="18" Y2011="19" Y2012="20" Y2013="22" Y2014="21" Y2015="22" Y2016="25"/>
            <local:Product ProductName="Gorgonzola Telino" Y2007="1" Y2008="1" Y2009="2" Y2010="3" Y2011="2" Y2012="2" Y2013="3" Y2014="2" Y2015="3" Y2016="3"/>
            <local:Product ProductName="Chartreuse verte" Y2007="15" Y2008="14" Y2009="14" Y2010="13" Y2011="10" Y2012="8" Y2013="9" Y2014="9" Y2015="8" Y2016="8"/>
            <local:Product ProductName="Fløtemysost" Y2007="3" Y2008="3" Y2009="4" Y2010="5" Y2011="4" Y2012="6" Y2013="8" Y2014="2" Y2015="5" Y2016="7"/>
            <local:Product ProductName="Carnarvon Tigers" Y2007="20" Y2008="21" Y2009="20" Y2010="20" Y2011="20" Y2012="21" Y2013="20" Y2014="20" Y2015="21" Y2016="22"/>
            <local:Product ProductName="Vegie-spread" Y2007="18" Y2008="19" Y2009="20" Y2010="21" Y2011="22" Y2012="23" Y2013="24" Y2014="25" Y2015="25" Y2016="25"/>
            <local:Product ProductName="Tarte au sucre" Y2007="1" Y2008="2" Y2009="3" Y2010="3" Y2011="4" Y2012="4" Y2013="7" Y2014="10" Y2015="12" Y2016="16"/>
            <local:Product ProductName="Konbu" Y2007="10" Y2008="8" Y2009="8" Y2010="7" Y2011="8" Y2012="10" Y2013="11" Y2014="12" Y2015="11" Y2016="13"/>
            <local:Product ProductName="Valkoinen suklaa" Y2007="20" Y2008="20" Y2009="19" Y2010="20" Y2011="15" Y2012="12" Y2013="6" Y2014="3" Y2015="3" Y2016="3"/>
            <local:Product ProductName="Perth Pasties" Y2007="12" Y2008="13" Y2009="13" Y2010="15" Y2011="15" Y2012="18" Y2013="19" Y2014="19" Y2015="22" Y2016="22"/>
        </local:Products>

        <syncfusion:TableMapping x:Key="itemsMapping">
            <syncfusion:TableMapping.HeaderMapping>
                <syncfusion:ColumnMapping PropertyName="ProductName" DisplayName="Product"/>
            </syncfusion:TableMapping.HeaderMapping>
            <syncfusion:TableMapping.ColumnMapping>
                <syncfusion:ColumnMapping PropertyName="Y2007" DisplayName="2007"/>
                <syncfusion:ColumnMapping PropertyName="Y2008" DisplayName="2008"/>
                <syncfusion:ColumnMapping PropertyName="Y2009" DisplayName="2009"/>
                <syncfusion:ColumnMapping PropertyName="Y2010" DisplayName="2010"/>
                <syncfusion:ColumnMapping PropertyName="Y2011" DisplayName="2011"/>
                <syncfusion:ColumnMapping PropertyName="Y2012" DisplayName="2012"/>
                <syncfusion:ColumnMapping PropertyName="Y2013" DisplayName="2013"/>
                <syncfusion:ColumnMapping PropertyName="Y2014" DisplayName="2014"/>
                <syncfusion:ColumnMapping PropertyName="Y2015" DisplayName="2015"/>
                <syncfusion:ColumnMapping PropertyName="Y2016" DisplayName="2016"/>
            </syncfusion:TableMapping.ColumnMapping>
        </syncfusion:TableMapping>
        
        <syncfusion:ColorMappingCollection x:Key="colorMapping">
            <syncfusion:ColorMapping Value="0" Color="#8ec8f8"/>
            <syncfusion:ColorMapping Value="30" Color="#0d47a1"/>         
        </syncfusion:ColorMappingCollection>
    </Window.Resources>
    <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <syncfusion:SfHeatMap ItemsSource="{StaticResource productsData}" 
                              ItemsMapping="{StaticResource itemsMapping}"
                              ColorMappingCollection="{StaticResource colorMapping}">
        </syncfusion:SfHeatMap>
        <syncfusion:SfHeatMapLegend Grid.Row="1"
                                    Margin="20"
                                    MaxWidth="300"
                                    ColorMappingCollection="{StaticResource colorMapping}"/>
    </Grid>
</Window>

Theme

SfHeatMap supports various built-in themes. Refer to the following links to apply themes to the SfHeatMap:

Setting theme to WPF SfHeatMap

Search docs

Ask Syncfusion AI Assistant

Search docs

Ask Syncfusion AI Assistant

Getting Started with WPF HeatMap (SfHeatMap)

Initialize the SfHeatMap

Prepare data

Populate data

Map data into SfHeatMap

Color mapping

Legend

Complete example

Theme