Configure Heatmap Chart

  • Updated on Feb 3, 2026
  • Published on Dec 9, 2025
  • 6 minute(s) read
  • AF
 Prev Next

Overview

This article helps you configure Heatmap chart using the components available in the WebApp Builder. This chart is ideal for revealing patterns across two dimensions, identifying correlations or hotspots in data matrices, or displaying intensity distributions across time/categories using color gradients.

Prerequisites

  • Review the recommendations provided to design/create a chart dataset.

  • Ensure that a Dataset is created for the appropriate chart type and purpose, using the required fields.

  • When cleansing or enriching data, users may want to visualize their work with charts. In this case, create a Grid or Form container on a construct page and use the same dataset to bind data between the Grid or Form and the Chart containers.

    For example, you are cleansing customer records in a Grid container by correcting missing or invalid values. You can then use the same dataset in a Chart container to visualize customer distribution by region. Since both the Grid and Chart share the same dataset, any changes in the Grid are automatically reflected in the Chart.

Dataset Design Recommendations

  • Ideal for revealing patterns, correlations, or intensity distributions across two discrete dimensions using color gradients.

  • Requires three columns from a dataset:

    Note

    You can use the same chart dataset in a Grid component if you plan to modify or manipulate the data.

    • Category Field defines the rows or primary dimension, for example, Country, API Endpoint, Product, Server Name.

    • Label Field defines the columns or secondary dimension, for example, Transport Type, Hour of Day, Region, Day of Week.

    • Value Field must be a column with NUMERIC(precision, scale) data type. This determines color intensity for each cell, for example, Count, Response Time, Error Rate, Temperature.

  • In general, the dataset should contain aggregated values for each unique Category-Label combination, forming a complete or sparse grid.

  • You need to include an additional field in your dataset if you plan to bind the chart dataset to a grid or form component’s dataset. Refer to Data Binding in Charts for more information.

Heatmap Chart Example

Configuration Steps

Note

You can interact with Build Assist to quickly configure charts as required by entering a prompt that provides the context of the dataset and the fields to be used.

  1. On the Construct Preview’s home page, edit the required WebApp. The WebApp configuration page is displayed.

  2. Click More Options (…) next to the required page or container node and select Add Chart > Add Heatmap Chart.

  3. Click the Heatmap Chart node. The Details Pane is updated with the Heatmap Chart fields.

  4. Enter the required values for the fields to create a Heatmap chart in a container using the following tables:

    Field Name

    Description

    Supported Values/Notes

    Name
    required

    Name of the Heatmap Chart Container.

    Enter a name within length constraints. maxLength: 50

    Title

    Label that is displayed on the top of this chart container.

    Enter a title within length constraints. maxLength: 50

    Parent Layout Container

    Name of the parent container used for page layout. Allows you to link child containers to a parent container.

    Select the parent container to house this chart container.

    Ordinal

    Allows ordering the containers.

    Any integer. default: 0

    Tab Label

    Label displayed as the tab name for a container. Use this property only when a container needs to be included in a tab container.

    Enter a name within length constraints. maxLength: 50

    Override Datastore

    SKP Datastore name for this component that overrides the datastore configured at the WebApp level. Refer to Datastores for more information.

    Click the Open Details button next to the Datastore list to open it in the SKP Catalog.

    NA

    Dataset
    required

    SKP dataset for the data used for this container. Select the required Dataset.

    Scroll down the Dataset list to auto-create a dataset using a table or view based on Construct Preview’s recommendation.

    Note

    If a dataset is being created from a SQL view, you must set its Affected Table. Click the Open Details button next to the Dataset list to open it in the SKP Catalog.

    Note

    • The Update Dataset button opens a dialog box that allows you to rescan the dataset and add any newly available fields from the underlying table or view to the dataset used in this container.

    • Specify the dataset classification.

    • If the scan errors out, access the associated Datastore’s scan logs in the SKP Catalog module to troubleshoot the error.

    Category Field

    required

    Select a field from the dataset that defines the rows or primary dimension of the heatmap grid.

    Each unique category value becomes a row, creating the vertical axis grouping.

    For example, In a logistics heatmap: Country (USA, Canada, Mexico, Brazil, UK, Germany)

    Label Field
    required

    Select a field from the dataset that defines the columns or secondary dimension of the heatmap grid.

    Each unique label value becomes a column, creating the horizontal axis grouping.

    For example, For Country rows: TransportType - (Air, Sea, Rail, Road, Pipeline)

    Value Field
    required

    Select a field from the dataset that determines the color intensity of each cell in the grid. Higher/lower values map to darker/lighter colors based on the color scale.

    For example, Value - Shipment Count showing 1,250 air shipments from USA

    X-Axis Title

    Text to display for the x-axis title describing the column dimension across the top of the heatmap

    Enter a text within length constraints. maxLength: 100

    Y-Axis Title

    Text to display for the y-axis title describing the row dimension along the left and right sides of the heatmap.

    Enter a text within length constraints. maxLength: 100

    Legend

    Toggle to show/hide the color scale legend that maps color intensity to numeric value ranges.

    default: true

    Force Square

    Toggle to enforce square-shaped cells regardless of the number of rows/columns, maintaining uniform aspect ratio.

    default: false

    Border Radius

    Controls the roundness of cell corners. Higher values create softer cells with rounded edges.

    default: 0, maximum: 16

    Parent Binding Container

    Select the parent grid/form container type for data binding. Allows you to link between grids/forms and charts.

    NA

    Container Bindings > Source Column

    Note

    Click Add to set up required number of container bindings.

    Select the source column in the parent binding container.

    Use either the Source Column or the Source Value field, but not both.

    Container Bindings > Source Value

    A fixed source value for data binding.

    Use either the Source Column or the Source Value field, but not both.

    Container Bindings > Target Column
    required

    Select the target column in the chart container’s dataset.

    NA

    Columns > Name
    required

    Note

    Click Add to set up required number of columns to control how the fields on the chart will be sorted.

    Select the field name from the dataset used in the chart container.

    NA

    Columns > Sort Mode

    Used with the Sort Priority field to configure the default column sort order:

    Supported Values:

    • None

    • Ascending

    • Descending

    Columns > Sort Priority

    Used with the Sort Mode field to configure the default column sort order.

    Default: 0

    Link to Page Name

    Select the Page to navigate on click.

    NA

    Open in New Tab

    Enable this toggle to open the chart link in a new browser tab.

    NA

    Link to Page Bindings > Name
    required

    Note

    Click the Add button to add the required chart link to page bindings criteria.

    Specify a unique binding name for the page link

    Enter a name for binding. maxLength: 256

    Link to Page Bindings > Target Column
    required

    Specify the target column in the linked page

    Enter target column name from your dataset. maxLength: 128

    Link to Page Bindings > Target Page Container Name

    Specifies the container name in the linked page

    Select the name of the grid or form container from the page you’ve selected.

    Link to Page Bindings > Source Data Record Field Value

    Specifies the source column in the current page

    Select source column name from your dataset.

    Link to Page Bindings > Fixed Value

    Specifies the source value in the current page

    Specify the value or the actual record of the source column. maxLength: 255

    Display Mode

    Configures the display mode

    * Card: Card-like format
    * Empty: No visual elements
    Default: Card

    Layout

    Specifies how the containers flow within the page

    * FlowHorizontal: Side-by-side display
    * FlowVertical: Top-to-bottom display

    Alignment

    Controls the alignment for placing the container

    * Start
    * Stretch
    * End
    Default: Stretch

    Size

    Value of the units that are used to compute the size of a container

    Any positive number. minimum: 0, default: 1

    Size Units

    Units that are used to compute the size of a container

    * Pixels

    * Rem

    * GrowRatio

    Default: GrowRatio

    Gap

    The gap between containers or fields on a property card

    Any positive number. minimum: 0, default: 1

    Padding

    Adjusts the padding inside of the container

    Any positive number. minimum: 0, default: 0

  5. Click the Save & Preview button to validate that the Heatmap chart is configured correctly.

Related Articles