LibrarySVG Bar List
PROcharts
SVG Bar List
The SVG Bar List turns a ranked table into a clean, horizontal 'top categories' visual — the pattern dashboards use to show leaders at a glance. It renders each row as an SVG bar with label and value, auto-scaling to the largest entry, with zero premium connectors.
Electronics84
Hardware62
Safety48
Packaging35
YAML source
Preview — full code with PRO# SVG Bar List — PowerBlocks (PRO)
# A ranked horizontal bar list (think "top categories") as a pure Power Fx SVG Image.
#
# STEP 1 — In Screen.OnVisible:
# ClearCollect(
# colBarList,
# { Label: "Electronics", Value: 84 }, { Label: "Hardware", Value: 62 },
# { Label: "Safety", Value: 48 }, { Label: "Packaging", Value: 35 },
# { Label: "Office", Value: 19 }
# );
# STEP 2 — Paste this control. STEP 3 — Swap colBarList for your own table.
- SvgBarList:
Control: Image@2.2.3
# … full component definition unlocked with PROThis is a partial preview. Unlock the full component →
Common use cases
Top-N rankings
Show best-selling products, busiest regions or highest-volume categories in order.
Compact dashboards
Fit a readable ranking into a small tile where a full chart would be overkill.
Progress comparisons
Compare values across items with a shared baseline track behind each bar.
How to use SVG Bar List in Power Apps
- 1Add the colBarList collection to Screen.OnVisible using 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.
- 4Replace colBarList with your own Label/Value table — bars and height adjust automatically.
Tip — The SVG height is computed from the row count, so the list grows cleanly whether you show 3 rows or 12. Sort the collection by Value beforehand for a true ranking.