SVG Bar Chart
The SVG Bar Chart fills the biggest gap in Power Apps: real, good-looking charts. It renders a fully styled, auto-scaling bar chart as an SVG Image driven entirely by Power Fx — no premium connectors, no PCF controls, no external libraries. Point it at a collection of Label/Value rows and it draws labelled, value-topped bars that resize to the largest data point.
Monthly revenue
YAML source
Preview — full code with PRO# SVG Bar Chart — PowerBlocks (PRO)
# Power Apps has no real native bar chart. This renders one as a styled SVG Image
# that auto-scales to your data — no premium connectors, no PCF, pure Power Fx.
#
# STEP 1 — In Screen.OnVisible (or App.OnStart), create the data collection:
# ClearCollect(
# colBarChart,
# { Label: "Jan", Value: 120 },
# { Label: "Feb", Value: 180 },
# { Label: "Mar", Value: 90 },
# { Label: "Apr", Value: 210 },
# { Label: "May", Value: 160 }
# );
# STEP 2 — In your screen Tree view, paste this control (Ctrl+V).
# … full component definition unlocked with PROThis is a partial preview. Unlock the full component →
Common use cases
Dashboards & KPIs
Visualise revenue, ticket counts or sales per period directly on a canvas screen without the native chart control's limitations.
Offline & embedded apps
Because the chart is just an Image, it works in scenarios where the native charting control is unavailable or too heavy.
Branded reporting
Restyle bars, labels and colours by editing the SVG string so charts match your design system exactly.
How to use SVG Bar Chart in Power Apps
- 1Add the colBarChart collection to your Screen.OnVisible using the ClearCollect snippet in the YAML header.
- 2Choose your Power Apps locale (EN or FR) and click "Copy YAML".
- 3In Power Apps Studio, paste the control into your screen's Tree view.
- 4Replace colBarChart with your own table of Label/Value rows — the bars rescale automatically.
Tip — Coordinates are wrapped in Round() to emit whole numbers, so the SVG stays valid even in locales that use a comma as the decimal separator.