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
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
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.
This page provides a step-by-step guide for creating a barchart using the legacy design.
*Mandatory parameters
Dataset*
Select the dataset used by the chart
X axis (columns)*
Select the column corresponding to the abscissa
Y axis (rows)*
Select the column corresponding to the ordinate
Value*
Select the aggregation to use, and the column on which the aggregation will be applied for you value (Intersection of your breakdowns)
Legend
Display legend
Click on the toogle to use legend
Legend
Default selection -> Default selected column
(The display legend option should be activated for this one)
Check the box "Default selection", then "Default selected column" Select the configuration type
Legend
Default selection -> Default selected row
(The display legend option should be activated for this one)
Check the box "Default selection", then "Default selected row" Select the configuration type
Legend
Additional info
(The display legend option should be activated for this one)
Check the box "Additional info" Select a column and an aggregation for additional infos to display in the legend
Legend
Select intersection on hover
(The display legend option should be activated for this one) Click on the toogle to activate this option
Sort
X order
(By default, alphabetical order) Check the box "X order" Select the configuration type and the Order (column to use for ordering)
Sort
Y order
(By default, alphabetical order) Check the box "Y order" Select the configuration type and the Order (column to use for ordering)
Packs
X Packs
Check the box "X Packs" and select the column containing informations about grouping label
Packs
Y Packs
Check the box "Y Packs" and select the column containing informations about grouping label
Packs
Display Pack names
Click on the toggle "Display pack names"
Packs
X packs order
(By default, alphabetical order)
Check the box Select the configuration type Select the column to use for ordering
Packs
Y packs order
(By default, alphabetical order)
Check the box Select the configuration type Select the column to use for ordering
Enrich chart
Second value
Check the box. Select the column to display as second value, and the aggregation.
Enrich chart
Target
(The target value will be displayed only in the Legend) Check the box "Target" and select the column corresponding the the target
Display
Display all values and subvalues
Check the box
Display
Square's transparency
Check the box Select the column to be based on to determine transparency level
Display
Square height (in pixels)
Enter the square height in pixels (caped at 40px on mobile)
Display
Square width (in pixels)
Enter the square width in pixels (caped at 40px on mobile)
Display
Y Label width (in pixels)
Enter the square width in pixels (caped at 100px on mobile)
Display
Display Y axis dots
Click on the toogle in order to display dots between the label and squares
Display
Size
(Used only for multiple charts)
Enter a proportion of the total screen between 0 and 1
Display
Mobile size
(Used only for multiple charts)
Enter a proportion of the total screen between 0 and 1 for mobile screens
Display
Custom CSS class
Set a custom CSS class to target this specific chart with CSS
Tutorial
ID
Enter an ID.
Change the ID to display the tutorial again.
All tutorials with the same ID will be displayed only once.
Tutorial
Message
Enter your message. This will be displayed to your users
Tutorial
Always show this tutorial
By default the tutorial is shown once only
⭐️ New
Legacy
Column X-Axis
X axis (columns)
Order columns
X order
Reverse column order
/
Row Y-Axis
Y axis (rows)
Primary cell value
Value
Add secondary cell value
Cell value
Order rows
Order
Reverse row order
/
Add complementary value
Additional info
Add user chart guide
Tutorial
Last updated
Was this helpful?