LibrarySVG Heatmap
PROcharts
SVG Heatmap
The SVG Heatmap visualises intensity across a grid — think GitHub-style activity or hourly load — entirely in Power Fx. Each cell's colour opacity scales to its value, driven by a flat Col/Row/Value collection, with no native chart control or premium connector needed.
YAML source
Preview — full code with PRO# SVG Heatmap — PowerBlocks (PRO)
# A grid heatmap (activity / intensity) as a pure Power Fx SVG Image.
#
# The chart renders immediately: DEMO DATA (a 7x5 grid) is inlined in the Image
# formula below.
# STEP 1 — Paste this control. STEP 2 — Replace the _data ForAll(...) with your own
# FLAT grid of { Col, Row, Value } rows (e.g. colHeat).
- SvgHeatmap:
Control: Image
Properties:
X: =40
Y: =40
Width: =320
# … full component definition unlocked with PROThis is a partial preview. Unlock the full component →
Common use cases
Activity calendars
Show task or login activity per day across weeks in a compact, scannable grid.
Load & utilisation
Map intensity by hour and day to spot peaks and quiet periods.
Correlation grids
Render any two-dimensional matrix where colour intensity encodes magnitude.
How to use SVG Heatmap in Power Apps
- 1Build a flat colHeat collection of Col/Row/Value rows in Screen.OnVisible (see the header snippet).
- 2Click "Copy YAML" — the syntax is invariant and works in every Power Apps locale.
- 3Paste the control into your screen's Tree view in Power Apps Studio.
- 4Swap colHeat for your own grid — cell size and opacity scale to your columns, rows and values.
Tip — Opacity is emitted as a percentage (e.g. 70%), so cells render consistently regardless of locale decimal formatting.