Best Approach to Build Dynamic Shape-Based “Tile Visuals” in Power BI (Multiple Tags per type)

[Emmett]

Hi Power BI Community,

We’re looking for advice on the best way to build a dynamic “Tile Visual” in Power BI.

Each tile should represent one item (e.g., a unit or entity), and inside the tile we want to display tags grouped by component type, where:

• Each component type has a specific number of tags

• Tag positioning is fixed within the tile

• The state, value, or condition of each tag is dynamic (based on data)

Here’s a visual example of the kind of layout we’re aiming for:

What We Need in Each Tile

1. Consistent Layout with Grouped Tags

   • Tags are grouped by component type (e.g., top row: Type A, second row: Type B, etc.)

   • The number of tags per component type can vary (e.g., 3 triangles, 2 squares, 4 rectangles)

   • Each tag has a defined position within the tile (layout is fixed)

   • Data (status, values) changes per tag per tile

2. Shape-Based Tags

   • Each tag is a visual shape (e.g., triangle, square, rectangle)

   • Shape type is based on the tag's component type

   • Shapes need to change color based on tag condition

3. Conditional Coloring by Status

   Tags can appear in different colors depending on their state, like Green = OK, Red = Alert etc.

4. Hover Tooltips on Each Tag

   • Each tag should show a tooltip with dynamic content, such as State of the tag, power level etc.

5. Below the shapes, each tile should show a summary status label (e.g., "Status: Active")

6. Visual & Optional Audio Alerts:

   If a tile contains any tags in an alert condition:

   • The border/background should blink or flash

   •  An alert sound should play when the page loads or state changes

What We've Tried or Evaluated:

MethodWorks?Notes

Custom Visual (pbiviz + SVG/D3)	✅ Best match	Full control of shape layout, tooltips, colors, interactivity, blinking, and audio. Requires TypeScript/D3 development.
Deneb (Vega/Vega-Lite)	✅ Very good	Supports repeating tiles, drawing shapes, condition-based colors, tooltips. No audio. Layout can be managed using Vega's repeat or facet.
Synoptic Panel (OKVIZ)	⚠️ Limited	Only works with static SVGs. Cannot render dynamic tags per tile. Good for coloring, but not scalable or interactive.
Python Visuals	⚠️ Limited	Can draw shapes and layouts, but output is a static image. No hover tooltips, no interactivity.
HTML Content Visual	⚠️ Workable	Can render tags using HTML/CSS/SVG and inject data fields. Hover tooltips possible. Lacks native Power BI integration (e.g., bookmarks, audio).
Card with States (OKVIZ)	❌ Not suitable	Great for showing one KPI, but can’t render grouped tags or structured tile layouts.

What We’d Love to Know

1. Can anyone confirm if our evaluation is accurate, especially for Deneb, pbiviz, and Synoptic Panel?

2. Is there another way to build something like this using native Power BI or other visuals we haven't tried?

3. Has anyone else built tile-style visuals where each row/entity shows multiple shape-based elements with condition-based color and hover tooltips?

4. Any workarounds for triggering audio (e.g., a beep or sound) from within a Power BI report when a visual enters a specific state?

5. Any performance tips for rendering many of these tiles at once (e.g., 50–100 tiles, each with 10+ tags)?

[v-agajavelly]

Hi @Emmett 

Just following up again to see if the suggestion from the @burakkaragoz  helped you out. If you've had a chance to try it, we'd love to hear how it went even a quick update would be great and might help others too. If you're still running into issues, feel free to drop some details and we can take another look together.

Thanks,
Akhil.

[v-agajavelly]

Hi @Emmett 

Thankyou  @burakkaragoz for taking time and providing solution.

we would like to follow up to see if the solution provided by the super user resolved your issue. Please let us know if you need any further assistance.
If our super user response resolved your issue, please mark it as "Accept as solution" and click "Yes" if you found it helpful.

Regards,
Akhil.

[burakkaragoz · Accepted solution]

Hi @Emmett ,

I've worked on something similar before, and from what you're describing, I’d say going with a custom visual might give you the flexibility you need — especially if tag positions and conditional formatting are key parts of the design.

Shape Map is decent for static layouts, but it gets tricky when you want to toggle visibility or apply dynamic status colors per tag. You’ll probably hit limitations fast if you need interactivity like tooltips per tag or dimming unused ones.

If you're okay with a bit of dev effort, building a custom visual (maybe using Deneb or even a fully custom TypeScript visual) could let you:

• lock tag positions per component type
• control visibility with DAX-driven logic
• apply conditional formatting with full color control
• show tooltips per tag using report page tooltips or custom handlers

Another quick win might be using a matrix visual with conditional formatting and some creative layout tricks, but it won’t give you the same visual fidelity as a shape-based layout.

Hope that helps a bit.

If my response resolved your query, kindly mark it as the Accepted Solution to assist others. Additionally, I would be grateful for a 'Kudos' if you found my response helpful.
translation and formatting supported by AI