Treemap chart

Who it’s for

Dashboard authors comparing many entities by the same number ask “who produced the most, and who barely showed up — without a card for every single one?” A row of value cards doesn’t scale past a handful of devices, and a bar chart runs out of width. This chart turns any number of entities into one picture, sized by their share of the total.

What it does

Six generators reporting daily output become six tiles, biggest first — the top producer’s tile might read 46 kWh · 24% in large text, while a generator down at 2% keeps only its tooltip, since the label would never fit.

• Tile area is each entity’s share of the total, so the biggest producer or consumer is always the biggest rectangle, no reading required
• Four aggregations — sum, average, minimum, or maximum — cover both interval readings and a key that already holds a running total
• The total for the time window sits in the title row, with the window it covers, so the chart doubles as a summary card
• Value and percentage are dropped automatically on tiles too small to hold them; the tooltip always keeps both, so nothing is truly lost
• Shaded light to dark by rank, or by your own thresholds, so tiles a few percent apart still read as an order instead of identical shades
• A Tile click action source opens the clicked entity’s own dashboard state, or runs any other widget action
• Ranks and sizes; it doesn’t chart the trend over time — pair it with a time series chart for that

How to set up

Data keys

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

Key	Role	Type	Description
Any numeric key (no fixed name)	The quantity tiles are sized by	Timeseries	dailyProduction, energy, waterVolume, runtimeMinutes all work. Only positive values draw a tile — an entity that reported 0, a negative value, or nothing at all in the window gets no tile, and the total and every percentage are computed only from the tiles that are drawn

Units and decimals come from the data key itself, so they’re set once rather than twice.

Value

Setting	Default	Effect
Aggregation	Sum of the readings	Collapses each entity’s readings in the time window into the one number its tile is sized by, on top of the dashboard aggregation. A key that already holds a running total — dailyProduction, energyToday — needs Maximum; summing it counts the same total once per reading and inflates every tile

How to customize

Coloring

• To switch between shading by rank and coloring by value — set Color: light to dark from a base color, or by thresholds.
• To change the base color — set Base color; the largest tile gets this color and the smallest a pale wash of it. In threshold mode it colors anything that falls outside every range instead.
• To fix the text color instead of letting it follow each tile — set Text color; empty picks black or white per tile automatically, which is what keeps a pale tile readable.

When Color is set to by thresholds, each row in Thresholds is a From value, an optional To, 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 neighboring rows never both claim the same boundary value.

Tiles & labels

• To hide the value or the percentage on tiles — turn off Value on tiles or Percentages on tiles; the tooltip keeps both regardless.
• To change how small a tile can be before it loses its label — set Hide labels below, a share of the total.
• To shorten large numbers — turn on Shorten large numbers for 12.4k instead of 12 400.
• To change the space between tiles — set Gap.
• To match your dashboard’s fonts — set Name font and Value and percentage font.

Total row

• To hide the total, or the time window beside it — turn off Show the total in the title row or Show the time window next to it.
• To match your dashboard’s fonts and colors — set Total font, Total color, Caption and time window font, and Caption color. The caption itself changes with the aggregation — Total, Sum of averages, Sum of minimums, or Sum of maximums.

Tooltip

• To hide the tooltip — turn off Show a tooltip on hover.
• To match your dashboard’s style — set Text font, Text color, and Background; an rgba(...) value makes a translucent background.

How tile clicks work

Tile click is exposed as an action source: configure it under the widget’s own 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, so the target state can use any of them.

Tips

• Point an entity alias at a group of similar devices — one per site, one per line — rather than picking entities one at a time, so a new device joins the chart automatically.
• If every tile looks the same size no matter what, check Aggregation first: a running-total key summed instead of maxed usually flattens the differences between entities.
• Threshold mode reads better than rank shading once you have a real target to call out — “above 500 is green” says more than “this one is darker than that one.”
• Widget title, background, padding and margins come from the widget’s own Appearance settings, and the platform’s data settings are hidden — units, decimals and the empty-state message are handled by the data key and the widget itself.