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

New Heatmap

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.

Legacy Heatmap

This page provides a step-by-step guide for creating a barchart using the legacy design.

*Mandatory parameters

Section	Option	Configuration tutorial
	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