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.
#
# The chart renders immediately: DEMO DATA is inlined in the Image formula below.
# STEP 1 — Paste this control. STEP 2 — Replace the _data Table(...) with your own
# Label/Value table (e.g. colBarList).
- SvgBarList:
Control: Image
Properties:
X: =40
Y: =40
Width: =460
Height: =240
# … 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.
- 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.
- 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.