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.
#
# STEP 1 — In Screen.OnVisible, build a FLAT grid of { Col, Row, Value }:
# ClearCollect(
# colHeat,
# ForAll(
# Sequence(35) As s,
# {
# Col: Mod(s.Value - 1, 7) + 1,
# Row: RoundDown((s.Value - 1) / 7, 0) + 1,
# Value: RandBetween(0, 10)
# }
# )
# … 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).
- 2Choose your locale (EN or FR) and click "Copy YAML".
- 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.