Heatmap Chart

Heatmap Chart is a chart where the positions of data points are determined by two categorical fields represented by the X-axis and Y-axis. The magnitude of the values is represented by the color of the rectangles at the corresponding positions, with darker colors indicating larger values.

Heatmaps reflect indicator changes and data magnitudes through color variations. Through the color intensity of the heatmap, you can intuitively and clearly see regional data distribution, density, and change trends, obtaining data focus without data analysis, making it easy to understand at a glance.

Advantages: Good-looking, easy to understand, data information is more intuitive and effective, can clearly present data distribution, frequency, or density in geographic space.

Disadvantages: The effect is too soft, not suitable for precise data expression, and not suitable for comparing the size of a single variable.

Settings

Data Settings

Setting	Description
Data Source	Select the data source for the heatmap. The heatmap must be configured through aggregation query grouping in the data source.
Coordinate System Type	Heatmaps only support display in 2D Cartesian coordinate systems
Name Field	Select the field returned by the data source. This field is used for the name display of heatmap labels, usually combined with the Hover Display menu
X-axis Field	Select a field from the field list returned in the "Data Source" menu and set it as the chart's X-axis
Y-axis Field	Select a field from the field list returned in the "Data Source" menu and set it as the chart's Y-axis

Since heatmaps use two categories (X and Y axes) to group and locate values, grouping and aggregation processing is generally required when selecting data sources. For example, when you need to view the distribution of order amounts and order status for each customer, we need to aggregate and sum the total order amount in the original data table (sales orders) and group by customer name and order status. This way, we can get a heatmap with status as the X-axis, customer name as the Y-axis, and order amount as the value.

Chart Settings

Setting	Description
X-axis	Select the X-axis where the heatmap is located. The axis can be added in the X-axis menu
Y-axis	Select the Y-axis where the heatmap is located. The axis can be added in the Y-axis menu
Color Allocation Type	Configure the color effect of the graphics in the heatmap. Options: Allocate colors in the palette according to the chart, Allocate colors in the palette according to the data item. When multiple charts are aggregated, you can choose to allocate by chart. For a single chart, you can choose to allocate by data item. The specific color value can be adjusted in the Style menu palette
Graphic Style	Configure the style of the heatmap graphics. Options: Hollow Circle, Dot, Rectangle, Rounded Rectangle, Triangle, Rhombus, Needle, Arrow, None
Graphic Size	Configure the size of the value item graphics
Graphic Rotation Angle	Configure the rotation angle of the value item graphics

Label Settings

Setting	Description
Display Label	Turn on or off the display of labels on the heatmap
Display Content Expression	Custom editing expression syntax is supported to realize complex scenario content display, with lower display priority than [Display Content]
Display Content	Editable label display content, does not support complex expression syntax except for prompt content, with higher display priority than [Display Content Expression]
Position	You can choose the display position of the label on the heatmap graphic
Distance from Graphic	Set the distance of the label from the graphic in the heatmap
Label Rotation	Set the rotation angle of the label
Text Offset X	Set the distance of the label text from the X-axis
Text Offset Y	Set the distance of the label text from the Y-axis
Color	Set the color of the label text
Background Color	Set the background color of the label text. It needs to be used together with parameters such as line height, padding, width, and height in the text style to take effect
Text Style	Set the label text to italic or normal mode
Font Weight	Set the label font weight. Options: Default, Bold, Very Bold, Light
Font	Set the label font style. Options: sans-serif, serif, monospace, Arial, Courier NEW
Font Size	Set the label font size. The font size is not less than 12 and not more than 100
Horizontal Alignment	Set the horizontal alignment of the label text, including four methods: auto, left-aligned, centered, and right-aligned
Vertical Alignment	Set the vertical alignment of the label text, including four methods: auto, top, centered, and bottom
Line Height	Set the line height of the label text. It takes effect when Exceed Width Handling is set to wrap
Padding	Set the distance of the label text within the background box
Width	Set the maximum display width of the label text. It is generally used together with Exceed Width Handling for wrapping and other configurations
Height	Set the display height of the label text. It only affects the text background height and does not affect the display of the text itself
Exceed Width Handling	Processing method after the label exceeds the maximum width, including two methods: wrap and truncate with ellipsis. If set to none, the maximum width will not take effect
Stroke Width	Set the stroke width of the label background image. It takes effect only after setting the stroke color
Stroke Color	Set the stroke color value of the label background
Stroke Radius	Set the stroke radius angle of the label background
Shadow Color	Set the shadow color of the label background. It takes effect only after setting the label background color and shadow size
Shadow Size	Set the shadow size of the label background
Shadow Horizontal Offset	Set the horizontal offset distance of the label background shadow
Shadow Vertical Offset	Set the vertical offset distance of the label background shadow

Line Style

In heatmaps, line style refers to the style of heatmap blocks.

Setting	Description
Color	Heatmaps currently do not support custom colors
Border Color	Set the color effect of the heatmap block borders
Stroke Type	Configure the stroke type of the heatmap blocks. Options: Solid Line, Dashed Line, Dotted Line
Stroke Width	Set the stroke width of the heatmap blocks
Stroke Radius	Set the stroke radius angle of the heatmap blocks
Shadow Color	Set the shadow color of the heatmap blocks
Shadow	Set the shadow size of the heatmap blocks
Shadow Horizontal Offset	Set the horizontal position of the heatmap blocks' shadows
Shadow Vertical Offset	Set the vertical position of the heatmap blocks' shadows
Opacity	Set the opacity of the heatmap blocks, with opacity values ranging from 0 to 1

Label Layout

Setting	Description
Hide Overlapping Labels	When enabled, labels that overlap in content will be hidden
Overlapping Offset Direction	When labels overlap, you can choose the direction of label displacement, with options for horizontal or vertical displacement

Highlight Settings

Setting	Description
Disable Highlight	After disabling highlight, the label will no longer be highlighted when the mouse moves to the label position
Highlight Behavior	Set the interactive style of highlight display
Fade Range	Set the selection range for interactive interface fade-out during highlight, providing three methods: fade-out coordinate system, fade-out chart, or global fade-out

Events

Setting	Description
Non-clickable	After enabling, all label data in the chart cannot be clicked. After closing, you can set the corresponding data click interaction event
Call Automation After Click	You can implement related data label click interaction events by selecting the corresponding automation, such as opening the corresponding data form details or opening other web links after clicking
Call Automation After Double Click	The function is the same as click call, but the interaction is triggered by double-click instead of single-click. Click and double-click events can be set at the same time