power-apps-svg

Generates dynamic SVG charts and indicators in canvas Power Apps via Image control data URIs.

Updated Jul 25, 2026
One-click install
npx skills add https://github.com/RorySullivan1/powerapp_taskmaster --skill power-apps-svg-rorysullivan1
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: power-apps-svg
Source: https://github.com/RorySullivan1/powerapp_taskmaster/tree/main/.claude/skills/power-apps-svg
Command: npx skills add https://github.com/RorySullivan1/powerapp_taskmaster --skill power-apps-svg-rorysullivan1

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Canvas Power Apps ship no native charting controls, and Power BI is out of scope for this project, so there is no built-in way to render progress rings, gauges, sparklines, or value-driven icons. This Skill builds those visuals as SVG strings in Power Fx and displays them through an Image control's data URI. ## Core Features & Use Cases - Dynamic SVG via data URI: Builds "data:image/svg+xml," & EncodeUrl(...) strings with Power Fx values interpolated, so visuals react live to data. - Data-driven charts with Concat: Generates one SVG element per table row using Concat, Sequence/Index for positions, and running totals for donut slices. - Locale-safe rendering: Scales the viewBox so all coordinates are integers, avoiding decimal-separator failures in comma-locale environments. - Use Case: A project dashboard needs a red/amber/green progress ring per task and a multi-slice status donut. This Skill produces the Power Fx formulas that draw both, with clamped math, fixed category colors, and an "Other" slice for drifted values. ## Quick Start Ask the assistant to create a Power Fx formula for an Image control that renders a progress ring showing a task's PercentComplete value as an SVG data URI.

Frequently Asked Questions about power-apps-svg

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render an SVG chart in a canvas Power App?▼

Build the SVG as a Power Fx string, wrap it in EncodeUrl, prefix it with "data:image/svg+xml,", and assign it to an Image control's Image property. Interpolate Power Fx values into the string so the graphic reacts to data.

How do I draw a progress ring or donut chart in Power Apps without Power BI?▼

Use the stroke-dasharray trick on a circle whose circumference is 100 units: set stroke-dasharray to '<pct> <100-pct>' and rotate the circle -90 degrees. For multi-slice donuts, Concat one circle per slice and offset each by its running total.

Why does my SVG chart break for users in comma-decimal locales?▼

Power Fx writes fractional numbers with the viewer's decimal separator, so '33,3' is not a valid SVG number pair. Scale the viewBox up so every coordinate is a whole number via Round, and reserve Text formatting for labels only.

Can SVG charts in Power Apps handle clicks, tooltips, or animation?▼

No. An Image control is a single hit area with no per-element events, and SMIL/CSS animation does not survive the data URI. Overlay a transparent Button for whole-chart clicks or place a gallery beside the chart.

Why is my SVG not rendering in the Image control?▼

The two most common causes are missing EncodeUrl, which lets characters like #, <, and spaces break the URI, and a missing xmlns='http://www.w3.org/2000/svg' attribute on the svg element. Also check for unclamped math producing invalid attribute values.