Heatmap

The Heat Map chart type colours a grid of cells by value. You choose a Chart Layout: Tabular (the default) draws a rectangular grid whose rows and columns come from two category fields, and Honeycomb draws hexagonal cells arranged in a grid, a ring or by coordinates. A Heat Map has no X axis, Y axis, series or tooltip settings. You map categories and a value, and the colour scale does the rest.

Tip: A Heat Map works best when you have many combinations of two categories, with a numeric value for each row and column cell (e.g., day × hour, agent × queue, product × region). If there are very few row or column categories, a grouped bar chart may be clearer.

Required Data Shape

Each record in the bound data must have at least three fields:

• A field for Columns → Category (each unique value becomes a column)

• A field for Rows → Category (each unique value becomes a row)

• A numeric field for Rows → Value (the measurement that drives colour)

This is the Flat data format: one record per cell. Choose Nested instead if each record carries a nested array of cells, and map that array to Rows → Data. A Honeycomb Heat Map needs only a Category field and a Value field.

Sample data shape for an activity Heat Map

[ { "day": "Mon", "hour": "9am", "tickets": 12 }, { "day": "Mon", "hour": "10am", "tickets": 18 }, { "day": "Tue", "hour": "9am", "tickets": 7 }, ... ]

With Chart Layout set to Tabular and Rows → Data Format set to Flat, map day → Columns → Category, hour → Rows → Category, tickets → Rows → Value.

Content Properties

Appearance Properties

Events

A Heat Map has no click event, so you can't act on a clicked cell. To let users drill down, add a separate filter control (for example a Select) next to the chart and use its value to filter a detail view.

Behavior & Gotchas

⚠ Missing cells are blank, not zero

If your data has no record for a given row and column, that cell renders as blank (no fill). To show a "zero" cell, include a record with value 0 in your data source.

⚠ Color scale uses the data range by default

The color scale automatically spans the minimum and maximum values in the bound data. If your data changes (filtered, refreshed), the scale re-centers and visual comparisons can shift. For stable comparisons, set Chart Colours to Continuous and enter fixed Start and End values.

⚠ One series per Heat Map

A Heat Map supports exactly one value field. To compare two metrics, use two separate Chart blocks side by side, each with its own Legends add-on so readers can see each colour scale.

⚠ Row and column order follows data order

Row and column categories appear in the order they are first encountered in the data. Sort your data source before binding to control the order.

⚠ Heat Map is web-only

A Heat Map renders nothing in a mobile app. Use a different chart type on mobile pages.

⚠ Choose the layout and data format before binding data

Switching Chart Layout, or a Tabular heat map's Data Format, replaces your data with sample rows, so you have to bind it again.

Common Patterns

Activity Calendar (Day × Hour)

1. Prepare aggregated data: Query your data source to aggregate records by day-of-week and hour-of-day, summing or counting the metric of interest. Return one row per day/hour pair.

2. Choose the layout: Set Chart Layout to Tabular and Rows → Data Format to Flat before you bind data.

3. Map the fields: Set Columns → Category = day-of-week field, Rows → Category = hour-of-day field, Rows → Value = count field.

4. Configure the colour scale: Under Chart Colours, choose Continuous with a light start colour and a dark end colour. Set both a Start value (for example 0) and an End value (for example the highest count you expect) so the scale stays the same across data loads.

Correlation Matrix

1. Compute correlations: Pre-compute a correlation matrix (or similarity table) server-side, returning rows like { metricA, metricB, correlation }. Map metricA to Columns → Category, metricB to Rows → Category and correlation to Rows → Value.

2. Use value bands: Under Chart Colours, choose Range and add bands from -1 to 1, for example blue for negative correlation, a light colour around zero and red for positive.

3. Enable cell labels: Turn on Cell Labels so readers can see exact correlation values.

Related Pages