Skip to content

1039678-Comprehensive User guide document updated for WPF HeatMap, SfSparkline, SfSmithChart, SfSurfaceChart, SfChart3D and SfSunburstChart controls #2367

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
SaiyathAliFathima merged 6 commits into from
Jul 15, 2026
Merged

1039678-Comprehensive User guide document updated for WPF HeatMap, SfSparkline, SfSmithChart, SfSurfaceChart, SfChart3D and SfSunburstChart controls #2367

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
62d7bb0
Updated Heatmap UG contents
DhanarajRajendran Jul 10, 2026
b753ddf
Updated UG contents of Sunburst Chart.
DhanarajRajendran Jul 10, 2026
13c75e8
Updated Smith chart UG contents.
DhanarajRajendran Jul 10, 2026
150c27d
updated surface chart UG contents.
DhanarajRajendran Jul 10, 2026
1f798cf
Updated the UG contents of Sparkline.
DhanarajRajendran Jul 10, 2026
efa47da
Updated UG contents of SfChart 3D.
DhanarajRajendran Jul 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions wpf/HeatMap/ColorMapping.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
---
layout: post
title: ColorMapping in WPF HeatMap (SfHeatMap) control | Syncfusion®
description: How to configure colors codes for Syncfusion® Essential Studio® WPF HeatMap (SfHeatMap) control, its elements and more.
description: Learn how to configure color codes for the Syncfusion® Essential Studio® WPF HeatMap (SfHeatMap) control, its elements, and more.
platform: wpf
control: SfHeatMap
documentation: ug
---

# Color Mapping in WPF HeatMap (SfHeatMap) control
Color mapping is used to indicate values as colors instead of numerical values. For example, if a HeatMap represents a data from 0 to 100. `ColorMapping` is used to specify a color for lower value and higher value. For any value between two values, a medium color will be automatically be chosen.
# Color mapping in the WPF HeatMap (SfHeatMap) control
Color mapping is used to indicate values as colors instead of numerical values. For example, if a HeatMap represents data from 0 to 100, `ColorMapping` is used to specify a color for the lower value and the higher value. For any value between the two values, a medium color will automatically be chosen.

In color mapping, when white color is set to value 0 and red color is set for value 30, as shown below.
In the following example, the white color is set to value 0 and the red color is set to value 30, as shown below.
{% highlight xaml %}
<syncfusion:ColorMappingCollection x:Key="colorMapping">
<syncfusion:ColorMapping Value="0" Color="White"/>
<syncfusion:ColorMapping Value="30" Color="Red"/>
</syncfusion:ColorMappingCollection>
{% endhighlight %}

Resultant HeatMap will be as shown below.
The resultant HeatMap will be as shown below.

![ColorMapping_Image](Images/ColorMapping.png)
60 changes: 31 additions & 29 deletions wpf/HeatMap/Getting-Started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Getting started with Syncfusion® Essential® SfHeatMap for WPF.
description: This section explain about how to integrate WPF HeatMap (SfHeatMap) into an applicationl and enable its basic features with example.
description: This section explains how to integrate the WPF HeatMap (SfHeatMap) into an application and enable its basic features with an example.
platform: wpf
control: SfHeatMap
documentation: ug
Expand Down Expand Up @@ -37,7 +37,7 @@ N> Starting with v16.2.0.x, if you reference Syncfusion® assemblies from trial

## Prepare data

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

{% highlight c# %}

Expand Down Expand Up @@ -70,7 +70,7 @@ public class Products : ObservableCollection<Product>

## Populate data

Populate product information in a collection
Populate product information in a collection.

{% highlight xaml %}

Expand Down Expand Up @@ -103,30 +103,30 @@ Populate product information in a collection

{% endhighlight %}

## Map data into SfHeatMap
## Map data into SfHeatMap

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

* Prepare ItemsMapping add it in resource.

{% capture codesnippet1 %}
{% highlight xaml %}

<syncfusion:TableMapping x:Key="ItemsMapping">
<syncfusion:TableMapping x:Key="itemsMapping">
<syncfusion:TableMapping.HeaderMapping>
<syncfusion:ColumnMapping PropertyName="ProductName" DisplayName="Product Name"/>
<syncfusion:ColumnMapping PropertyName="ProductName" DisplayName="Product"/>
</syncfusion:TableMapping.HeaderMapping>
<syncfusion:TableMapping.ColumnMapping>
<syncfusion:ColumnMapping PropertyName="Y2007" DisplayName="Y2007"/>
<syncfusion:ColumnMapping PropertyName="Y2008" DisplayName="Y2008"/>
<syncfusion:ColumnMapping PropertyName="Y2009" DisplayName="Y2009"/>
<syncfusion:ColumnMapping PropertyName="Y2010" DisplayName="Y2010"/>
<syncfusion:ColumnMapping PropertyName="Y2011" DisplayName="Y2011"/>
<syncfusion:ColumnMapping PropertyName="Y2012" DisplayName="Y2012"/>
<syncfusion:ColumnMapping PropertyName="Y2013" DisplayName="Y2013"/>
<syncfusion:ColumnMapping PropertyName="Y2014" DisplayName="Y2014"/>
<syncfusion:ColumnMapping PropertyName="Y2015" DisplayName="Y2015"/>
<syncfusion:ColumnMapping PropertyName="Y2016" DisplayName="Y2016"/>
<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"/>
Comment thread
DhanarajRajendran marked this conversation as resolved.
<syncfusion:ColumnMapping PropertyName="Y2014" DisplayName="2014"/>
<syncfusion:ColumnMapping PropertyName="Y2015" DisplayName="2015"/>
<syncfusion:ColumnMapping PropertyName="Y2016" DisplayName="2016"/>
</syncfusion:TableMapping.ColumnMapping>
</syncfusion:TableMapping>

Expand All @@ -147,13 +147,13 @@ Now data is ready, next we need to configure data source and map rows and column
{% endcapture %}
{{ codesnippet2 | UnOrderList_Indent_Level_1 }}

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

![Showing grid with data](Getting-Started_images/Getting-Started_img1.jpeg)

## Color Mapping
## Color mapping

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

* Configure items mapping based on items source.

Expand All @@ -169,34 +169,37 @@ Next we can configure color range for these values using color mapping
{% endcapture %}
{{ codesnippet3 | UnOrderList_Indent_Level_1 }}

* Set ColorMapping
* Set the color mapping.

{% capture codesnippet4 %}
{% highlight xaml %}

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

{% endhighlight %}
{% endcapture %}
{{ codesnippet4 | UnOrderList_Indent_Level_1 }}

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

![Showing the grid data with color based on the range](Getting-Started_images/Getting-Started_img2.jpeg)

## Legend

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

{% highlight xaml %}

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

{% endhighlight %}

Final MainPage.cs looks like this.
## Complete example

The final `MainWindow.xaml.cs` looks like this.

{% highlight c# %}

Expand Down Expand Up @@ -241,7 +244,7 @@ namespace GettingStarted

{% endhighlight %}

Final MainPage.xaml looks like this.
The final `MainWindow.xaml` looks like this.

{% highlight xaml %}

Expand Down Expand Up @@ -306,18 +309,17 @@ Final MainPage.xaml looks like this.
Margin="20"
MaxWidth="300"
ColorMappingCollection="{StaticResource colorMapping}"/>
</Grid>
</Grid>
</Window>


{% endhighlight %}

## Theme

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

* [Apply theme using SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager)

* [Create a custom theme using ThemeStudio](https://help.syncfusion.com/wpf/themes/theme-studio#creating-custom-theme)

![Setting theme to WPF SfHeatMap](Getting-Started_images/Theme.png)
18 changes: 9 additions & 9 deletions wpf/HeatMap/ItemsMapping.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
---
layout: post
title: ItemsMapping in WPF HeatMap (SfHeatMap) control | Syncfusion®
description: Learn here about ItemsMapping in Syncfusion® Essential Studio® WPF HeatMap (SfHeatMap) control, its elements and more.
description: Learn here about the ItemsMapping in the Syncfusion® Essential Studio® WPF HeatMap (SfHeatMap) control, its elements, and more.
platform: wpf
control: SfHeatMap
documentation: ug
---

# Items Mapping in WPF HeatMap (SfHeatMap) control
# Items mapping in the WPF HeatMap (SfHeatMap) control

External data source can be mapped with HeatMap using `ItemsMapping` property. It supports 2 kind of data source.
An external data source can be mapped with the HeatMap using the `ItemsMapping` property. It supports 2 kinds of data source.

* In `TableMapping` rows represents an objects in collection, columns represents numerical properties of that object.
* In `CellMapping` each cell represent an object in collection, this collection is grouped based on specific property to form as rows and columns.
* In `TableMapping`, rows represent objects in a collection, and columns represent numerical properties of that object.
* In `CellMapping`, each cell represents an object in a collection; this collection is grouped based on a specific property to form rows and columns.

Let us see the difference between two types of mapping. Following table represents two different data structure to represent the same HeatMap.
Let us see the difference between the two types of mapping. The following table represents two different data structures to represent the same HeatMap.

<table>
<tr>
Expand Down Expand Up @@ -49,10 +49,10 @@ public class ProductInfo
</tr>
<tr>
<td>
Here, a single `ProductInfo` object represent a value for a particular product in a particular year
Here, a single `ProductInfo` object represents a value for a particular product in a particular year.
</td>
<td>
Here, a single `ProductInfo` object represents value for a particular product from year 2010 to 2015.
Here, a single `ProductInfo` object represents values for a particular product from year 2010 to 2015.
</td>
</tr>
<tr>
Expand Down Expand Up @@ -93,7 +93,7 @@ public class ProductInfo
DisplayName="2011"/>
<syncfusion:ColumnMapping
PropertyName="Y2012"
DisplayName="2012"/>
DisplayName="2012"/>
Comment thread
DhanarajRajendran marked this conversation as resolved.
<syncfusion:ColumnMapping
PropertyName="Y2013"
DisplayName="2013"/>
Expand Down
33 changes: 19 additions & 14 deletions wpf/HeatMap/Legend.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,43 +1,46 @@
---
layout: post
title: Legend in WPF HeatMap (SfHeatMap) control | Syncfusion®
description: How to create and configure legend for Syncfusion® Essential Studio® WPF HeatMap (SfHeatMap) control, its elements and more.
description: Learn how to create and configure a legend for the Syncfusion® Essential Studio® WPF HeatMap (SfHeatMap) control, its elements, and more.
platform: wpf
control: SfHeatMap
documentation: ug
---

# Legend in WPF HeatMap (SfHeatMap) control
Legend is a control used to summarize the range of colors in HeatMap. This gives visual guideline for mapping between value and color.
# Legend in the WPF HeatMap (SfHeatMap) control

## Create Legend
Legend can be created with color mapping as shown below,
The legend is a control used to summarize the range of colors in the HeatMap. This gives a visual guideline for mapping between value and color.

## Create a legend

A legend can be created with color mapping as shown below:

{% highlight xaml %}

<syncfusion:ColorMappingCollection x:Key="colorMapping">
<syncfusion:ColorMapping Value="0" Color="#fe0002" Label="Poor"/>
<syncfusion:ColorMapping Value="3" Color="#ffff01" Label="Average"/>
<syncfusion:ColorMapping Value="6" Color="#13ab11" Label="Good"/>
<syncfusion:ColorMapping Value="10" Color="#005ba2 " Label="Excellent"/>
<syncfusion:ColorMapping Value="10" Color="#005ba2" Label="Excellent"/>
</syncfusion:ColorMappingCollection>

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

{% endhighlight %}

Resultant legend will be like following image,
The resultant legend will be like the following image:

![Legend_Image](Images/Legend.png)

## Legend Mode
There are two modes for Legend
## Legend mode

There are two modes for the legend:

* Gradient
* List


### Gradient:
### Gradient
{% highlight xaml %}
<syncfusion:SfHeatMapLegend
LegendMode="Gradient"
Expand All @@ -46,7 +49,7 @@ There are two modes for Legend

![Legend_Image](Images/Legend_Gradient.png)

### List:
### List
{% highlight xaml %}
<syncfusion:SfHeatMapLegend
LegendMode="List"
Expand All @@ -56,11 +59,13 @@ There are two modes for Legend
![Legend_Image](Images/Legend_List.png)

## Orientation
There are 2 types of Orientation, applicable for Gradient and List Mode

There are 2 types of orientation, applicable for Gradient and List modes:

* Horizontal
* Vertical

### Horizontal:
### Horizontal
{% highlight xaml %}
<syncfusion:SfHeatMapLegend
LegendMode="List"
Expand All @@ -70,7 +75,7 @@ There are 2 types of Orientation, applicable for Gradient and List Mode

![Legend_Image](Images/Legend_Horizontal.png)

### Vertical:
### Vertical
{% highlight xaml %}
<syncfusion:SfHeatMapLegend
LegendMode="List"
Expand Down
4 changes: 2 additions & 2 deletions wpf/HeatMap/Overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@ documentation: ug

# Overview of WPF HeatMap (SfHeatMap)

**Essential® HeatMap WPF** represents tabular data values as gradient colors instead of numbers. Low and high values are different colors with different gradients.
**Essential® HeatMap WPF** represents tabular data values as gradient colors instead of numbers. Low and high values are represented as different colors with different gradients.

![Overview_Image](Images/Overview_img1.jpeg)

**Key features:**

* 2 types of data source mapping (TableMapping, CellMapping)
* 2 types of data source mapping (`TableMapping`, `CellMapping`)
* Color mapping
* Legend
* Virtualization
Expand Down
Loading