LibrarySVG Line Chart
PROcharts
SVG Line Chart
The SVG Line Chart brings real time-series visualisation to Power Apps without the native chart control or any premium connector. It draws a smooth, auto-scaling polyline with data points and axis labels straight from a Label/Value collection — ideal for trends over time.
Trend
YAML source
Preview — full code with PRO# SVG Line Chart — PowerBlocks (PRO)
# Pure Power Fx line chart rendered as an SVG Image — smooth, auto-scaling, no PCF.
#
# STEP 1 — In Screen.OnVisible (or App.OnStart):
# ClearCollect(
# colLineChart,
# { Label: "Jan", Value: 120 }, { Label: "Feb", Value: 180 },
# { Label: "Mar", Value: 90 }, { Label: "Apr", Value: 210 },
# { Label: "May", Value: 160 }, { Label: "Jun", Value: 240 }
# );
# STEP 2 — Paste this control into your screen (Tree view → Ctrl+V).
# STEP 3 — Swap colLineChart for your own table (fields Label + Value).
- SvgLineChart:
# … full component definition unlocked with PROThis is a partial preview. Unlock the full component →
Common use cases
Trends over time
Plot revenue, usage or sensor values per day, week or month directly on a canvas screen.
Lightweight analytics
Render a clean trend line in apps where the native chart control is unavailable or too heavy.
Custom-styled reporting
Edit the SVG to match your brand colours, stroke width and point styling exactly.
How to use SVG Line Chart in Power Apps
- 1Add the colLineChart collection to Screen.OnVisible using the snippet in the YAML header.
- 2Choose your locale (EN or FR) and click "Copy YAML".
- 3Paste the control into your screen's Tree view in Power Apps Studio.
- 4Replace colLineChart with your own Label/Value table — the line rescales automatically.
Tip — The polyline points are emitted as whole numbers via Round(), so the chart renders correctly even in comma-decimal locales.