LibrarySVG Donut Chart
PROcharts
SVG Donut Chart
The SVG Donut Chart shows proportions and breakdowns in Power Apps with no native chart control and no premium connector. It builds each slice as an SVG stroke segment from a collection of values and colours, producing a crisp donut (or pie) that scales to any total.
YAML source
Preview — full code with PRO# SVG Donut Chart — PowerBlocks (PRO)
# Pure Power Fx donut/pie chart as an SVG Image, using stroke-dasharray segments.
#
# STEP 1 — In Screen.OnVisible. Each row needs Idx (1..n), a Value and a Color:
# ClearCollect(
# colPie,
# { Label: "Direct", Value: 45, Color: "#2563EB", Idx: 1 },
# { Label: "Organic", Value: 30, Color: "#22C55E", Idx: 2 },
# { Label: "Referral",Value: 25, Color: "#F59E0B", Idx: 3 }
# );
# STEP 2 — Paste this control. STEP 3 — Swap colPie for your own categories.
- SvgDonutChart:
Control: Image@2.2.3
# … full component definition unlocked with PROThis is a partial preview. Unlock the full component →
Common use cases
Composition & share
Visualise traffic sources, budget split or status distribution at a glance.
Dashboard tiles
Drop a compact donut next to KPI cards to add context to a single headline number.
Branded segments
Control each slice colour directly from your data for on-brand reporting.
How to use SVG Donut Chart in Power Apps
- 1Add the colPie collection (with Idx, Value and Color per row) to Screen.OnVisible.
- 2Choose your locale (EN or FR) and click "Copy YAML".
- 3Paste the control into your screen's Tree view in Power Apps Studio.
- 4Swap colPie for your own categories — segment sizes are computed from the totals automatically.
Tip — Each row needs a sequential Idx (1, 2, 3…); the chart uses it to stack segments with the correct offset. Keep colours as hex strings.