Heatmap chart

Who it’s for

Dashboard authors comparing the same metric across many entities ask “which of these is running hot, low, or out of range — and when did that start?” A facility manager scanning dozens of machines for the one that’s overheating, or an operations team watching a fleet’s battery levels drift over a shift, needs to see every entity side by side instead of opening one time series chart at a time.

What it does

An entity alias resolving 30 freezers, each reporting temperature every hour, renders as a 30-row grid. Time runs left to right, one column per reported hour; each freezer is its own row. A freezer drifting toward the top of its range turns from blue to amber to red well before anyone would notice it on a list of numbers.

• One row per entity, labeled by that entity’s name or label — bind an alias that resolves many entities and compare all of them in one grid
• A shared, sorted time axis — every entity’s timestamps merge onto the same X axis, so rows line up column for column
• Auto or fixed color scale — let the color follow the data, or pin a fixed min/max so the same color always means the same value, even across different time windows
• Custom color gradient, or the built-in 11-step blue-to-red palette
• Units and decimals follow the data key’s own settings, so values match the rest of the dashboard without a separate format to maintain
• Optional in-cell values, tooltip, and color scale bar, each on its own switch
• Plots exactly one data key; it does not compare two different metrics in the same grid

How to set up

Data keys

Key	Role	Type	Description
Data key (any name, user-configured)	Cell value	Timeseries	Required — exactly one key. Every entity resolved by the datasource is plotted against this same key

The heatmap takes one datasource and exactly one data key. Bind an entity alias that resolves to several entities and each one becomes its own row. If an entity has no value at a timestamp that another entity reported, that cell is left blank — no value is invented. For a dense, fully aligned grid, aggregate the data key into fixed time buckets (for example AVG grouped by hour) so every entity lines up on the same columns.

How to customize

Axes

• To hide the X or Y axis — turn off Show X axis or Show Y axis.
• To label an axis — set X axis name or Y axis name.
• To change how timestamps are shown — edit Timestamp format, a Moment.js pattern such as HH:mm or YYYY-MM-DD. It applies to both the X-axis labels and the tooltip.

Color scale

• To use your own gradient — add stops to Color gradient, ordered from the color for the minimum value to the color for the maximum. Leave it empty for the built-in palette.
• To make a color mean the same value across different time windows — turn off Auto range and set Min value and Max value.
• To hide the color scale bar, or switch it to vertical — turn off Show color scale, or set Scale orientation to Vertical.

Cells

• To print the value inside each cell — turn on Show value in cell, then set Label font size, Label color, and the outline color and width that keep it readable over any cell color.
• To change the lines between cells — set Cell border color and Cell border width.

Tooltip

• To turn off the hover tooltip — turn off Show tooltip.

Tips

• Too many columns to read? Aggregate the data key (AVG or MAX per interval) in the data key settings — fewer, meaningful columns read better than hundreds of thin stripes.
• Turn on a fixed value range whenever you compare the same metric across different dashboard time windows, so the color always means the same value.
• Turn on in-cell values only when the grid is small enough for the text to fit — for a dense grid, rely on color and the tooltip instead.