Treemap chart

Treemap Chart

Ranks the entities of one datasource by a single value and draws each as a tile whose area is its share of the total over the dashboard time window. The biggest producer or consumer is the biggest rectangle, with its value and percentage written on it — one chart where a dashboard would otherwise need a card per device.

Features

• Tile area proportional to each entity’s share of the total, biggest first
• Total for the selected time window in the widget title row, with the window it covers
• Four aggregations over the readings in the window: sum, average, minimum, maximum
• Light-to-dark shading of one base color, or your own value thresholds
• Value and percentage on every tile, dropped automatically on tiles too small to hold them; the tooltip always keeps both
• Fonts and colors adjustable for tile labels, the total and the tooltip
• Tile click action source
• Units and decimals taken from the data key, so nothing is configured twice

Data keys

One datasource per entity and exactly one data key per datasource — the platform enforces the single key. Use an entity alias that resolves everything you want to compare; each entity becomes a tile named after its label.

• any numeric timeseries key (timeseries, number) — the quantity the tiles are sized by. No fixed name: dailyProduction, energy, waterVolume, runtimeMinutes, alarmCount all work.

The key’s units and decimals format every value on the tiles, in the tooltip and in the total.

Only positive values can be drawn, because a treemap cannot give area to zero: an entity that reported 0, a negative value, or nothing at all in the window gets no tile, and the total and the percentages are computed from the tiles that are drawn.

Aggregation

The widget reads only the dashboard time window and collapses the readings it receives into one number per tile, on top of the dashboard aggregation.

Option	Use it for
Sum of the readings	interval values — kWh produced in that hour, litres in that minute
Average of the readings	sizing by state rather than by amount — mean load, mean pressure
Minimum reading	the worst reading per entity in the window
Maximum reading	keys that already hold a running total the device computed itself

A key such as dailyProduction, dailyGenerated or energyToday already contains a total, so it needs Maximum. Summing it adds the same day once per reading and inflates every tile.

The caption beside the total names what the number is — Total, Sum of averages, Sum of minimums, Sum of maximums.

Configuration

Value — the aggregation above, and whether large numbers are shortened to 12.4k.

Tile — the coloring mode and its base color; fonts for the name and for the value line; text color, which is picked black or white per tile automatically while left empty, so a pale tile stays readable; whether the value and the percentage appear on tiles; the share below which a tile keeps only its tooltip; the gap between tiles.

In light-to-dark mode the shading follows each tile’s rank, not its raw value, so six entities within a few percent of each other still read as an order instead of six identical shades.

Total — whether the total and its time window appear in the title row, plus their fonts and colors. It sits at the end of the title row and drops onto its own line only when the title leaves no room.

Tooltip — whether it appears, plus its font, text color and background; rgba(...) is accepted for a translucent one. It always carries the full name, the value and the share of the total, which is what keeps a tile without labels readable.

Widget title, background, padding and margins come from the widget’s own Appearance settings, and the platform’s Data settings block is hidden — units, decimals and the empty state are handled by the widget and the data key.

Thresholds

Shown once Tile → Color is set to By thresholds. Each row is a From value, an optional To value and a color, in the units of the data key.

• Leaving To empty runs the row up to the next row’s From; on the last row it means no upper limit.
• An inferred upper bound is exclusive and one you typed is inclusive, so two neighbouring rows never both claim a boundary value.
• A value outside every range keeps the base color rather than disappearing.

The widget ships with three example ranges to replace with values that suit your data:

Range	Color	Meaning in the example
0 – 100	red	below target
100 – 500	amber	approaching target
500 and above	green	at or above target

Actions

Tile click is exposed as an action source: configure it under the widget’s Actions tab, most often as Navigate to new dashboard state to open the clicked entity’s own page. The action receives the entity, its name, and the tile’s key, value and percentage.