Back to LibraryCharts
Bar Chart - Horizontal
Added Jun 14, 2026
A horizontal bar chart powered by a Power Apps collection. Inspired by the shadcn/ui Horizontal Bar Chart.
Dark Mode
Bar Chart - Horizontal
January - June 2024
Trending up by 5.2% this month
Showing total visitors for the last 6 months
CopySnips Live Preview
How to Use
- Create a collection: ClearCollect(colBarChartHData, {month: "January", Value: 186}, ...)
- Paste the copied YAML into Power Apps Studio (Ctrl+V).
- On your screen's OnVisible, add: Set(varBarHAnimate, true); Set(varTooltipBarHIdx, 0)
- To replay animation: Set(varBarHAnimate, false); ClearCollect(...); Set(varBarHAnimate, true)
Problem Solved
Renders a dynamic SVG horizontal bar chart inside a Power Apps Image control with a grow-from-left animation. Click any bar to show its value.
Integration
Bind colBarChartHData to any data source with {month, Value} columns.
YAML Code
- conBarChartH:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
BorderColor: =RGBA(226, 232, 240, 1)
BorderStyle: =BorderStyle.Solid
BorderThickness: =1
DropShadow: =DropShadow.Regular
Fill: =RGBA(255, 255, 255, 1)
Height: =320
RadiusBottomLeft: =12
RadiusBottomRight: =12
RadiusTopLeft: =12
RadiusTopRight: =12
Width: =440
Children:
- tmrChartAnimate:
Control: Timer@2.0.0
Properties:
Duration: =1200
Height: =1
OnTimerEnd: =Set(varBarHAnimate, false)
Repeat: =false
Start: =varBarHAnimate
Visible: =false
Width: =1
X: =0
Y: =0
- lblChartTitle:
Control: Label@2.5.1
Properties:
Color: =RGBA(15, 23, 42, 1)
Font: =Font.'Open Sans'
FontWeight: =FontWeight.Bold
Height: =24
Size: =14
Text: ="Bar Chart - Horizontal"
Width: =400
X: =20
Y: =14
- lblChartDescription:
Control: Label@2.5.1
Properties:
Color: =RGBA(100, 116, 139, 1)
Font: =Font.'Open Sans'
Height: =20
Size: =12
Text: ="January - June 2024"
Width: =400
X: =20
Y: =44
- rectHeaderLine:
Control: Rectangle@2.3.0
Properties:
Fill: =RGBA(226, 232, 240, 1)
Height: =1
Width: =440
X: =0
Y: =72
- imgBarChart:
Control: Image@2.2.3
Properties:
Height: =176
Width: =416
X: =12
Y: =80
Image: |-
=With(
{
_data: If(
CountRows(colBarChartHData) > 0,
colBarChartHData,
Table(
{month: "January", Value: 186},
{month: "February", Value: 305},
{month: "March", Value: 237},
{month: "April", Value: 73},
{month: "May", Value: 209},
{month: "June", Value: 214}
)
),
_p: Min(1, tmrChartAnimate.Value / 1200)
},
With(
{
_n: CountRows(_data),
_max: Max(1, Max(_data, Value)),
_rowH: Int(176 / Max(1, CountRows(_data))),
_barH: Int(176 / Max(1, CountRows(_data)) * 0.5),
_ease: If(varBarHAnimate, 1 - Power(Max(0, 1 - _p), 3), 1)
},
"data:image/svg+xml;utf8, " & EncodeUrl(
"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 416 176'>" &
Concat(Sequence(_n),
"<rect x='44' y='" & Text(Int((Value - 1) * _rowH + (_rowH - _barH) / 2)) &
"' width='" & Text(Int(Index(_data, Value).Value / _max * 370 * _ease)) &
"' height='" & Text(_barH) &
"' fill='" & If(varTooltipBarHIdx = Value, "#2563eb", "#3b82f6") &
"' rx='3' ry='3'/>"
) &
Concat(Sequence(_n),
"<text x='20' y='" & Text(Int((Value - 0.5) * _rowH + 4)) &
"' text-anchor='middle' font-family='Arial,sans-serif' font-size='11' fill='#94a3b8'>" &
Left(Index(_data, Value).month, 3) & "</text>"
) &
"</svg>"
)
)
)
- galChartInteract:
Control: Gallery@2.15.0
Variant: Vertical
Properties:
Fill: =RGBA(0, 0, 0, 0)
Height: =176
Items: =Sequence(CountRows(colBarChartHData))
ShowScrollbar: =false
TemplatePadding: =0
TemplateSize: =176 / Max(1, CountRows(colBarChartHData))
Width: =416
X: =12
Y: =80
Children:
- btnChartHit:
Control: Button@0.0.45
Properties:
Appearance: ='ButtonCanvas.Appearance'.Transparent
Height: =Parent.TemplateHeight
OnSelect: =If(varTooltipBarHIdx = ThisItem.Value, Set(varTooltipBarHIdx, 0), Set(varTooltipBarHIdx, ThisItem.Value))
Text: =""
Width: =Parent.TemplateWidth
X: =0
Y: =0
- conTooltip:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
BorderColor: =RGBA(226, 232, 240, 1)
BorderStyle: =BorderStyle.Solid
BorderThickness: =1
DropShadow: =DropShadow.Regular
Fill: =RGBA(255, 255, 255, 1)
Height: =50
RadiusBottomLeft: =8
RadiusBottomRight: =8
RadiusTopLeft: =8
RadiusTopRight: =8
Visible: =varTooltipBarHIdx > 0
Width: =110
X: =Max(60, Min(322, 44 + Index(colBarChartHData, Max(1, varTooltipBarHIdx)).Value / Max(1, Max(colBarChartHData, Value)) * 370 - 55))
Y: =Max(82, Min(206, 80 + (varTooltipBarHIdx - 0.5) * (176 / Max(1, CountRows(colBarChartHData))) - 25))
Children:
- lblTooltipMonth:
Control: Label@2.5.1
Properties:
Color: =RGBA(100, 116, 139, 1)
Font: =Font.'Open Sans'
Height: =18
Size: =10
Text: =If(varTooltipBarHIdx > 0, Index(colBarChartHData, varTooltipBarHIdx).month, "")
Width: =100
X: =8
Y: =5
- imgTooltipDot:
Control: Image@2.2.3
Properties:
Fill: =RGBA(59, 130, 246, 1)
Height: =8
Image: =Blank()
RadiusBottomLeft: =4
RadiusBottomRight: =4
RadiusTopLeft: =4
RadiusTopRight: =4
Width: =3
X: =8
Y: =28
- lblTooltipValue:
Control: Label@2.5.1
Properties:
Color: =RGBA(15, 23, 42, 1)
Font: =Font.'Open Sans'
FontWeight: =FontWeight.Semibold
Height: =18
Size: =11
Text: =If(varTooltipBarHIdx > 0, Text(Index(colBarChartHData, varTooltipBarHIdx).Value), "")
Width: =90
X: =16
Y: =26
- rectFooterLine:
Control: Rectangle@2.3.0
Properties:
Fill: =RGBA(226, 232, 240, 1)
Height: =1
Width: =440
X: =0
Y: =259
- lblTrendText:
Control: Label@2.5.1
Properties:
Color: =RGBA(15, 23, 42, 1)
Font: =Font.'Open Sans'
FontWeight: =FontWeight.Semibold
Height: =20
Size: =12
Text: ="Trending up by 5.2% this month"
Width: =400
X: =20
Y: =272
- lblDateRange:
Control: Label@2.5.1
Properties:
Color: =RGBA(100, 116, 139, 1)
Font: =Font.'Open Sans'
Height: =20
Size: =11
Text: ="Showing total visitors for the last 6 months"
Width: =400
X: =20
Y: =296Implementation
Copies the customized component code directly to your clipboard. Use Ctrl+V in Power Apps Studio.
Something not pasting right? Troubleshooting guide