Heatmap

🧭 Overview

A heatmap is a graphical representation of data where individual values are represented by color. It helps users quickly identify patterns, correlations, and outliers across two categorical dimensions (X and Y axes). Heatmaps are particularly useful when analyzing dense datasets or when you want to present values in a visually compact and intuitive format.

📊 Example Use Case

  • Comparing user engagement levels across different features and time periods

  • Analyzing performance metrics across departments and teams

  • Tracking bug frequencies by category and priority level

  • Visualizing correlation matrices for statistical analysis

  • Monitoring server load across regions and time intervals


⭐ Key Features

  • Add secondary cell value: Go beyond just visualizing numbers—add a complementary value to each cell to provide deeper context. Whether it’s displaying percentage change, confidence intervals, or notes, this feature helps users interpret the data more accurately and make informed decisions faster.The heatmap helps you acquire a global vision on combining several indicators and entities. It is also ideal for cutting through data.

Configuration

Learn how to create a heatmap using the new design with this step-by-step guide. Explore the interactive walkthrough below to get started quickly, then dive into the full configuration reference table for in-depth details.

Chart Configuration Step-by-Step

Option
How does it work?

Dimension

Column X-Axis

Select the data column to be displayed on the X-axis (horizontal).

Order columns

Define sort order for X-axis values (column based or custom).

Reverse column order

Invert the order of X-axis labels.

Measure

Row Y-Axis

Select the data column to be displayed on the Y-axis (vertical).

Primary cell value

Specify the main value to be visualized via color intensity.

Precision

Precision determines the level of detail in how your values are displayed. By default, measures use a .2f format, meaning they are shown with two decimal places.

Example: A value of 3.14159 will be displayed as 3.14 when using .2f formatting.

Unit

Unit represents the total quantity or category being measured for a KPI. It defines what the values correspond to, providing context for better interpretation.

Sentiment

Four different sentiment statuses (positive, warning, negative, neutral) can be used to color bars, enhancing visual distinction.

Note: Sentiments can be customized in the app theme.

Add secondary cell value

Include an optional second value (e.g. shown on hover or as a label).

Order rows

Define sort order for Y-axis values (column based or custom).

Reverse row order

Invert the order of Y-axis labels.

Additional parameters

ID

Unique chart Id

Add complementary value

The complementary value is displayed in the data label, providing additional context and making it easier for viewers to interpret the data at a glance. It is possible to add a precision, an unit and a sentiment.

Add user chart guide

Lead your chart viewers through the narrative of your data.

Chart performance

Technical performance

Style Configuration

Option
How does it work?

Cell height

Sets the vertical size of each cell in pixels. Default: 60 px.

Cell width

Sets the horizontal size of each cell in pixels. Default: 60 px.

Last updated

Was this helpful?