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.