> For the complete documentation index, see [llms.txt](https://docs.bdb.ai/bdb-user-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.bdb.ai/bdb-user-documentation/platform-modules/10.0/bdb-visualization/dashboard-designer/chart-gallery/advanced-charts/heat-map.md).

# Heat Map

A **Heat Map Chart** visualizes data in a two-dimensional grid where colors represent data values. Heat Maps allow users to spot patterns, correlations, and anomalies quickly by using **color gradients** to encode intensity or frequency.

Instead of analyzing raw numbers, users get an **instant visual summary**, making complex datasets easier to interpret.

***

### Best Situations to Use

Use a Heat Map when you want to:

* Show the **relationship between two factors** (e.g., employee attendance across days, product sales across regions and time).
* Highlight **intensity of values** at intersections of categories.
* Spot **clusters, outliers, or anomalies** in data.
* Provide a **visual frequency distribution** in dashboards.

***

### Variations

* **Geographic Heat Maps**: Overlay color intensities on geographic maps.
  * Example: In an election results map, red and blue shading quickly shows which candidate has won in each state.

***

### Properties of the Heat Map Chart

#### General

* **Component Name**: Unique identifier for the chart.
* **Left / Top**: Position on the canvas.
* **Height / Width**: Chart dimensions.
* **Initial Visibility**: Toggle visibility at initial load.
* **Max Button**: Enable maximize functionality.
* **Actions**: Show an actions icon in preview mode (if enabled).
* **Animation**: Toggle rendering animations.

***

#### Tooltip

* **Show Tool Tip**: Enable or disable tooltips.
* **Configuration**:
  * Default or Custom tooltip.
  * Use Component Formatter for consistent formatting.
  * Background Color, Opacity, Border Color.
  * Font Size, Box Width, Precision.
  * Highlighter: Highlight cells on hover.

***

#### Background

* **Gradient Rotation**: Adjust gradient angle.
* **Opacity**: Control transparency.
* **Gradient**: Choose gradient type/direction; add multiple colors.
* **Border / Border Color / Border Radius**: Customize borders.
* **Shadow / Color / Transparency**: Add and configure shadow effect.

***

#### Cell Styles

* **Range Colors**: Apply a color gradient based on cell values.
* **Solid Color**: Use a single color for all cells.
* **Opacity**: Adjust transparency of cell fill.
* **High Values Are Good**: Highlight higher values with distinct styling.
* **Base Type**: Select base color type for cells.
* **Show Frequency Bar**: Display a mini bar chart inside cells.
* **Show Text On Cell**: Toggle text display inside cells.
* **Text Customization**: Configure color, size, style, weight, and font family of cell text.

***

#### Title & Subtitle

* **Show Title Box**: Toggle title box visibility.
* **Title Settings**: Font color, size, style, weight, alignment, family, decoration.
* **Title Bar Height**: Adjust title bar height.
* **Description**: Add text under title.
* **Dataset Description**: Populate title/subtitle dynamically from dataset.
* **Sub-Title**: Configure similar settings for subtitle text.

***

#### Axis Configuration

**X-Axis**

* Show / Hide axis line.
* Axis Line Color.
* Category Text Wrap.
* Sub-Category Font Size / Wrap.
* Label customization: font color, size, weight, family, style, decoration.
* Label Rotation / Tilt for readability.
* Axis Description text.
* Show Dataset Description (dataset-driven axis naming).

**Y-Axis**

* Show / Hide axis line.
* Axis Line Color.
* Label customization: font color, size, weight, family, style, decoration.
* Axis Description text.
* Show Dataset Description (dataset-driven axis labeling).

***

#### Legend

* **Show Legend**: Toggle visibility.
* **Font Properties**: Configure color, size, weight, family, style, decoration.
* **Hide on Load**: Optionally hide legend initially.

***

#### Formatter

* **Unit**: Define measurement unit.
* **Precision**: Decimal places to display.
* **Currency**: Apply currency format.
* **Position**: Place unit/currency before or after numbers.
* **Number Formatter**: Choose International or Indian numbering style.

***

#### Export Options

* **Context Menu**: Enable right-click export in preview mode.
* **Supported Formats**: Excel (.xlsx), CSV (.csv), JPEG (.jpg), PNG (.png), PPTX (.pptx), PDF (.pdf).
* **Print Option**: Direct printing.
* **Export Metadata**: Add custom heading, subheading, and filename.
* **Global Export Type**: Define default export format (Screenshot / Tabular).

***

### Chart Variants

The Heat Map supports multiple base types:

* **Plain Base**
* **Gradient1 Base**
* **Gradient2 Base**
* **Gradient3 Base**
* **Gradient4 Base**

***

### Dataset Mapping

When configuring a Heat Map chart:

* **Category Field**: e.g., Employee.
* **Series Fields**: e.g., Days (Monday, Tuesday, etc.).

This produces a grid where each cell represents an **employee-day combination**, shaded by the value.

***

### Example

Using the sample dataset:

* **Category**: Employee
* **Series**: Days of the week
* **Values**: Attendance or productivity scores

The Heat Map shows **daily performance patterns across employees**, with darker or lighter shades indicating higher or lower values.

{% file src="/files/CmBmakc8rcui5aK4eF0T" %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.bdb.ai/bdb-user-documentation/platform-modules/10.0/bdb-visualization/dashboard-designer/chart-gallery/advanced-charts/heat-map.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.