> For the complete documentation index, see [llms.txt](https://docs.lowcodera.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.lowcodera.com/heatmap-chart.md).

# Heatmap Chart

## Purpose

A heatmap contains values representing various shades of the same colour for each value to be plotted. Usually the darker shades of the chart represent higher values than the lighter shade.

## Variations

![](/files/HL18dQGh1JEtoW64KixU)

There are several variations of Heatmap charts which are supported through the configuration of data and component properties.

* Basic Heatmap Chart
* Heatmap with multiple series
* Heatmap with Ranges

## Working with Data

‌The data format for the Heatmap chart is the same as for other Lowcodera charts. You can bind your chart component's **`items`** property to a Power Apps collection which includes either static data or dynamic data e.g. SharePoint.  

{% tabs %}
{% tab title="Static Collection example" %}
In this example, a collection with static data called `colheatmapsinglecolor`is defined in the Power App. The **`items`** property of the heatmap chart component is then bound to this collection.

```csharp
Table(
    {
        name: "Population",
        color: "#49b689",
        data: [
            {
                label: "Project Alpha",
                value: 115
            },
            {
                label: "Project Beta",
                value: 150
            },
            {
                label: "Project Gamma",
                value: 180
            },
            {
                label: "Project Delta",
                value: 30
            },
            {
                label: "Project Epsilon",
                value: 110
            },
            {
                label: "Project Zeta",
                value: 251
            },
            {
                label: "Project Eta",
                value: 90
            },
            {
                label: "Project Theta",
                value: 145
            },
            {
                label: "Project Iota",
                value: 120
            },
            {
                label: "Project Kappa",
                value: 80
            }
        ]
    },
    {
        name: "Education",
        data: [
            {
                label: "Project Alpha",
                value: 142
            },
            {
                label: "Project Beta",
                value: 100
            },
            {
                label: "Project Gamma",
                value: 85
            },
            {
                label: "Project Delta",
                value: 120
            },
            {
                label: "Project Epsilon",
                value: 170
            },
            {
                label: "Project Zeta",
                value: 75
            },
            {
                label: "Project Eta",
                value: 45
            },
            {
                label: "Project Theta",
                value: 117
            },
            {
                label: "Project Iota",
                value: 60
            },
            {
                label: "Project Kappa",
                value: 141
            }
        ]
    },
    {
        name: "Income",
        data: [
            {
                label: "Project Alpha",
                value: 15
            },
            {
                label: "Project Beta",
                value: 150
            },
            {
                label: "Project Gamma",
                value: 180
            },
            {
                label: "Project Delta",
                value: 25
            },
            {
                label: "Project Epsilon",
                value: 190
            },
            {
                label: "Project Zeta",
                value: 85
            },
            {
                label: "Project Eta",
                value: 47
            },
            {
                label: "Project Theta",
                value: 150
            },
            {
                label: "Project Iota",
                value: 152
            },
            {
                label: "Project Kappa",
                value: 41
            }
        ]
    }
)

```

The above code snippet will generate the following Heatmap chart.

![](/files/-Mkq4bX8Pu5RDcnhwtCe)
{% endtab %}

{% tab title="Dynamic Collection Example" %}
The below example represents, Dataverse table's data in a dynamic manner. The dataverse table structure looks like below:

![](/files/-MlTY8VMoDy6cXiUhlFx)

The below code snippet will generate dynamic collection to be consumed by component.

```
ClearCollect(
    CategoryCol,
    Distinct(
        Budgets,
        Category
    )
);
Clear(ItemCategoryCol);
ForAll(
    CategoryCol,
    Collect(
        ItemCategoryCol,
        {
            ItemCategory: ThisRecord.Result,
            ItemColor:First(Filter(Budgets,Category=Result)).Color
        }
    )
);
Clear(colheatmapsinglecolor);
ForAll(
    ItemCategoryCol,
    Collect(
        colheatmapsinglecolor,
        {
            name: ThisRecord.ItemCategory,
            color:ItemColor,
            data: ForAll(
                Filter(
                    Budgets,
                    Category = ItemCategory
                ),
                {
                    Value: {
                        label: ThisRecord.Name,
                        value: ThisRecord.Value
                    }
                }
            )
        }
    )
);
```

{% endtab %}

{% tab title="Property Configuration" %}
All control properties can be left as default
{% endtab %}
{% endtabs %}

## Chart Properties

{% hint style="info" %}
For a full listing of all chart properties see the [**chart components property reference**](/component-properties/chart-components.md) 
{% endhint %}

The properties below are the main ones which change this components appearance and behaviours.

<table data-header-hidden><thead><tr><th>Control Property</th><th>Description</th><th width="153">Required</th><th width="180">Accepted Values</th></tr></thead><tbody><tr><td><strong>Property</strong></td><td><strong>Description</strong></td><td><strong>Required</strong></td><td><strong>Accepted Values</strong></td></tr><tr><td>DataLabelSymbol</td><td>Property to add any symbol (eg. currency or any appened words) along with data labels</td><td>X</td><td>Text</td></tr><tr><td>Radius</td><td>Property to set the Radius for heat map </td><td>X</td><td>Numeric (ranges from 0 to 70)</td></tr></tbody></table>

## Examples

### Heatmap Chart with Multiple Series

![](/files/-Mkq4h4TpEOdodfOBTqM)

{% tabs %}
{% tab title="Data Configuration" %}
A single or multiple data series is defined in the collection.&#x20;

```
ClearCollect(
    heatmapbasicsseries,
    {
        name: "Population",
        data: [
            {
                label: "Project Alpha",
                value: 115
            },
            {
                label: "Project Beta",
                value: 50
            },
            {
                label: "Praject Gamma",
                value: 80
            },
            {
                label: "Praject Delta",
                value: 30
            },
            {
                label: "Praject Epsilon",
                value: 10
            },
            {
                label: "Praject Zeta",
                value: 25
            },
            {
                label: "Praject Eta",
                value: 90
            },
            {
                label: "Praject Theta",
                value: 145
            },
            {
                label: "Praject Iota",
                value: 120
            },
            {
                label: "Praject Kappa",
                value: 80
            }
        ]
    },
    {
        name: "Education",
        data: [
            {
                label: "Project Alpha",
                value: 42
            },
            {
                label: "Project Beta",
                value: 100
            },
            {
                label: "Praject Gamma",
                value: 85
            },
            {
                label: "Praject Delta",
                value: 120
            },
            {
                label: "Praject Epsilon",
                value: 70
            },
            {
                label: "Praject Zeta",
                value: 75
            },
            {
                label: "Praject Eta",
                value: 45
            },
            {
                label: "Praject Theta",
                value: 17
            },
            {
                label: "Praject Iota",
                value: 60
            },
            {
                label: "Praject Kappa",
                value: 41
            }
        ]
    },
    {
        name: "Income",
        data: [
            {
                label: "Project Alpha",
                value: 15
            },
            {
                label: "Project Beta",
                value: 150
            },
            {
                label: "Praject Gamma",
                value: 180
            },
            {
                label: "Praject Delta",
                value: 25
            },
            {
                label: "Praject Epsilon",
                value: 90
            },
            {
                label: "Praject Zeta",
                value: 85
            },
            {
                label: "Praject Eta",
                value: 47
            },
            {
                label: "Praject Theta",
                value: 50
            },
            {
                label: "Praject Iota",
                value: 52
            },
            {
                label: "Praject Kappa",
                value: 41
            }
        ]
    }
);

```

{% endtab %}

{% tab title="Property Configuration" %}

* [x] &#x20;All other control properties can be left as default
  {% endtab %}
  {% endtabs %}

### Heatmap Chart with Range

![](/files/-Mkq4pz-eQqZxFQIjrCD)

{% tabs %}
{% tab title="Data Configuration" %}
A single or multiple data series is defined in the collection.&#x20;

```
ClearCollect(
    heatmapWithColorRange,
    {
        name: "Population",
        colorRange: [
            {
                from: 0,
                to: 50,
                color: "#8ef19a"
            },
            {
                from: 51,
                to: 100,
                color: "#a370f5"
            },
            {
                from: 101,
                to: 200,
                color: "#f6756f"
            }
        ],
        data: [
            {
                label: "Project Alpha",
                value: 115
            },
            {
                label: "Project Beta",
                value: 50
            },
            {
                label: "Praject Gamma",
                value: 80
            },
            {
                label: "Praject Delta",
                value: 30
            },
            {
                label: "Praject Epsilon",
                value: 10
            },
            {
                label: "Praject Zeta",
                value: 25
            },
            {
                label: "Praject Eta",
                value: 90
            },
            {
                label: "Praject Theta",
                value: 145
            },
            {
                label: "Praject Iota",
                value: 120
            },
            {
                label: "Praject Kappa",
                value: 80
            }
        ]
    },
    {
        name: "Education",
        data: [
            {
                label: "Project Alpha",
                value: 42
            },
            {
                label: "Project Beta",
                value: 100
            },
            {
                label: "Praject Gamma",
                value: 85
            },
            {
                label: "Praject Delta",
                value: 120
            },
            {
                label: "Praject Epsilon",
                value: 70
            },
            {
                label: "Praject Zeta",
                value: 75
            },
            {
                label: "Praject Eta",
                value: 45
            },
            {
                label: "Praject Theta",
                value: 17
            },
            {
                label: "Praject Iota",
                value: 60
            },
            {
                label: "Praject Kappa",
                value: 41
            }
        ]
    },
    {
        name: "Income",
        data: [
            {
                label: "Project Alpha",
                value: 15
            },
            {
                label: "Project Beta",
                value: 150
            },
            {
                label: "Praject Gamma",
                value: 180
            },
            {
                label: "Praject Delta",
                value: 25
            },
            {
                label: "Praject Epsilon",
                value: 90
            },
            {
                label: "Praject Zeta",
                value: 85
            },
            {
                label: "Praject Eta",
                value: 47
            },
            {
                label: "Praject Theta",
                value: 50
            },
            {
                label: "Praject Iota",
                value: 52
            },
            {
                label: "Praject Kappa",
                value: 41
            }
        ]
    }
);

```

{% endtab %}

{% tab title="Property Configuration" %}

* [x] `radius`property is set to **50**
* [x] &#x20;All other control properties can be left as default
  {% endtab %}
  {% endtabs %}