| name | html-visuals |
| description | Use when creating full-frame HTML or SVG visuals rendered via the Power BI HTML custom visual (htmlContent GUID). Triggers: "HTML custom visual Power BI", "misura DAX HTML", "html visual power bi", "full-frame SVG", "trend chart HTML", "narrative panel DAX", "comparison table DAX", "HTML visual TMDL", "dataCategory ImageUrl HTML", "custom visual HTML GUID", "grafico html power bi", "visual custom power bi", "html custom visual", "SVG fullscreen power bi", "full page SVG DAX". |
| user-invocable | true |
Skill: HTML Visuals via DAX Measures (htmlContent custom visual)
Purpose
Generate DAX measures that return full HTML or SVG markup for the Power BI HTML custom visual
(htmlContent443BE3AD55E043BF878BED274D3A6855). Unlike inline SVG micro-charts (see svg-visuals
skill), these measures render in a dedicated full-frame visual and support CSS layout, multi-element
HTML structures, and full-canvas SVG charts.
When to Use This Skill vs svg-visuals
| Criterion | html-visuals (this skill) | svg-visuals |
|---|
| Visual type | HTML custom visual (htmlContent GUID) | Table, Matrix, Image, Card, Slicer |
| Output format | Full HTML page or full-frame SVG | data:image/svg+xml;utf8, prefix |
| CSS support | Full CSS (flex, grid, multi-element) | Inline SVG attributes only |
| Layout | Entire visual frame | Micro-chart per table row |
TMDL dataCategory | ImageUrl | ImageUrl |
| Binding | visual-containers/*.json GUID wiring | PBIR visual role binding |
Rule: use html-visuals for standalone full-frame visuals → use svg-visuals for inline micro-charts inside table/matrix columns.
Supported Output Types
| Pattern | Template | Use when |
|---|
| Full-frame YoY SVG chart | examples/trend-chart.dax | Quarterly trend comparison, CY vs PP |
| HTML ranked table | examples/comparison-table.dax | Top-N items with score coloring and K cost |
| Executive narrative panel | examples/narrative-panel.dax | KPI summary, best/worst performers |
Workflow: Creating an HTML Visual Measure
Step 1: Read the Model
Before writing any DAX, read the target TMDL files to confirm:
- Exact table and column names (never invent names — read from disk)
- Calendar model type: continuous or snapshot (affects time intelligence — see
references/html-visual-patterns.md)
- Locale setting (
it-IT requires decimal conversion before SVG attributes)
Step 2: Choose the Template
Select the closest template from examples/ and adapt it:
- Replace placeholder table/column references with real model objects.
- Confirm locale — Italian models need
SUBSTITUTE(FORMAT(val,"#0.0"),",",".").
- Adjust colors, labels, and viewBox dimensions to match the report design system.
Step 3: Declare the Measure in TMDL
Add the measure to the target table TMDL file with correct indentation and properties.
See references/tmdl-authoring-rules.md for mandatory rules (BOM, indentation, no aliases).
Required measure properties:
dataCategory: ImageUrl
(2-tab indent inside the measure block)
Step 4: Wire the Visual in PBIR
Edit the visual-containers/*.json for the page hosting the HTML visual.
See references/html-visual-binding.md for the correct visualType GUID, field binding,
and visualContainerObjects pattern.
Step 5: Validate
- Test with representative values: one low, one medium, one high.
- Open the PBIP in Power BI Desktop — verify no TMDL parse errors on open.
- Confirm the visual fills the frame correctly (no letterbox, no overflow).
Core Patterns
1. CSS Baseline (mandatory in every measure RETURN)
"<style>html,body{margin:0;padding:0;overflow:hidden}svg{display:block;width:100vw;height:100vh}</style>"
Do NOT use height:100% on body — Power BI renders the visual in an iframe where 100% resolves to 0. Always use 100vh.
2. Full-Frame SVG Root
"<svg width='100%' height='100%' viewBox='0 0 540 250' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' font-family='Segoe UI,Arial,sans-serif'>"
preserveAspectRatio='none' — fills the visual frame without letterboxingviewBox — defines the internal coordinate space; use fixed integers (e.g. 0 0 540 250)xmlns — required on the root <svg> element
3. Locale-Safe Decimals (Italian models)
VAR _SafeVal = SUBSTITUTE(FORMAT(value, "#0.0"), ",", ".")
Italian locale (it-IT) formats decimals with a comma. SVG numeric attributes require a dot.
Apply this conversion to every numeric value used in SVG attributes.
4. Y-Axis Normalization (SVG coordinate system — Y=0 is top)
VAR Ypx = MarginTop + ROUNDDOWN(PlotHeight * (1 - DIVIDE(val - YMin, YRange, 0)), 0)
Where PlotHeight = ChartHeight - MarginTop - MarginBottom.
Always apply IF(ISBLANK(val), 0, val) before entering the Y formula.
Add 8% padding to Y scale: YPad = (YMaxRaw - YMinRaw) * 0.08.
5. Score Color Mapping
VAR ScoreColor = SWITCH(TRUE(), score >= 75, "#038C25", score >= 50, "#FFF3CD", "#C00000")
-- Score colors: >=75 green, >=50 yellow, <50 red
Guardrails
- BOM: write TMDL files as UTF-8 without BOM (see
references/tmdl-authoring-rules.md).
- Indentation: DAX body lines → 3 tabs; property lines → 2 tabs.
- No measure aliases:
measure 'X' = [Y] throws UnsupportedObjectType on file open.
- Decimal separators in SVG attributes must use
. — always apply locale conversion.
- Never use
height:100% on body in the CSS baseline — use 100vh.
- Test output with at least one low, one medium, and one high sample value.
- After any TMDL edit, verify the file opens in Power BI Desktop without errors.
- Bar chart heights: Do NOT use
height:X% on bar divs inside flex containers — use fixed pixel heights computed as minPx + normalizedValue * rangePx where normalizedValue = (val - dataMin) / (dataMax - dataMin). Set a fixed px height on the chart container.
- Full-height card fill: Use
display:flex;flex-direction:column on the outer container with height:100%;box-sizing:border-box. Use justify-content:space-between to push sections apart vertically.
Bar Chart Pattern (Fixed Pixel Heights)
Use this pattern for vertical bar charts. Do NOT use height:X% — it resolves to auto inside PBI iframes.
DAX — Normalized Heights
-- Replace V1..V4 with your actual measure variables (e.g., SalesQ1, RevenueJan)
-- Use scalar MIN/MAX chains (not MINX on table literal)
VAR _Min12 = MIN(V1, V2)
VAR _Min34 = MIN(V3, V4)
VAR _DataMin = MIN(_Min12, _Min34)
VAR _Max12 = MAX(V1, V2)
VAR _Max34 = MAX(V3, V4)
VAR _DataMax = MAX(_Max12, _Max34)
VAR _Range = _DataMax - _DataMin
-- height_px = 40 (min visible) + normalized * 180 (scale range)
VAR H1px = FORMAT(ROUND(40 + DIVIDE(V1 - _DataMin, IF(_Range=0,1,_Range)) * 180, 0), "0")
HTML Structure
<div style="height:240px;display:flex;align-items:flex-end;justify-content:space-around">
<div style="display:flex;flex-direction:column;align-items:center;gap:4px">
<span style="font-size:12px;color:#FA9600;font-weight:700">VALUE_LABEL</span>
<div style="width:56px;height:HEIGHT_PXpx;background:#FA9600;border-radius:4px 4px 0 0"></div>
<span style="font-size:11px;color:rgba(255,255,255,0.5)">CATEGORY_LABEL</span>
</div>
</div>
Container height fixed (e.g. 240px) + align-items:flex-end → bars grow upward from the baseline.
References
| Reference | Purpose |
|---|
references/html-visual-binding.md | htmlContent GUID, PBIR visual-container wiring, dataCategory binding |
references/tmdl-authoring-rules.md | TMDL syntax rules: BOM, indentation, aliases, sourceColumn, relationships |
references/html-visual-patterns.md | CSS baseline, layout patterns, snapshot time intelligence, score colors |
Examples
| File | Chart type | Key features |
|---|
examples/trend-chart.dax | YoY SVG line chart | Quarterly snapshots, gradient area fill, locale-safe labels, CY vs PP |
examples/comparison-table.dax | HTML ranked table | Top-N items, score coloring, K-formatted costs, delta |
examples/narrative-panel.dax | Executive narrative panel | KPI summary, best/worst performers, HTML layout |
