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.
#
# The chart renders immediately: DEMO DATA is inlined in the Image formula below.
# STEP 1 — Paste this control into your screen (Tree view → Ctrl+V).
# STEP 2 — Replace the _data Table(...) with your own table or collection
# (fields Label + Value, e.g. colLineChart).
- SvgLineChart:
Control: Image
Properties:
X: =40
Y: =40
Width: =560
# … 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.
- 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 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.