Power Apps – Horizontal Bar Chart

Step 1:

Insert a button named Button1. Change the following properties:

Text property

"Create Collection"

OnSelect property

ClearCollect(collMyCollection,
Table(
{Title:"Ice Cream",Count:67},
{Title:"Cotton Candy",Count:43},
{Title:"Chocolate Cakes",Count:22},
{Title:"Bubble Gum",Count:100})
)
;

/*
Change the count of varGraphSectionCount 
if you want more dividing lines in the graph, 
but you will have to adjust the width of Gallery2 and Rectangle1
*/
With({varGraphSectionCount:5},
Clear(collGraphSections);
ForAll(Sequence(varGraphSectionCount),
Collect(collGraphSections,
{    
Value:If(IsEmpty(collGraphSections),
0,
Max(collGraphSections,Value) + 
(Max(collMyCollection,Count)/(varGraphSectionCount-1)))
}
))
);

Notify("Collection has been created!");

Step 2:

Activate play mode and click the ‘Create Collection’ button so that our collection gets created.

Step 3:

Insert a container named Container1. Change the following properties:

Width property

860

Height property

506

Step 4:

Insert a blank horizontal gallery named Gallery1 inside Container1. Change the following properties:

X property

56

Y property

0

Width property

Container1.Width - Self.X

Height property

Container1.Height

TemplateSize property

CountRows(collGraphSections) * 30

Items property

collGraphSections

Step 5:

Insert a rectangle named Rectangle1 inside Gallery1. Change the following properties:

X property

Parent.TemplateWidth/2 - Self.Width/2

Y property

0

Width property

1

Height property

435

Fill property

RGBA(204, 231, 246, 1)

Step 6:

Insert a text label named Label1 inside Gallery1. Change the following properties:

X property

0

Y property

435

Width property

Parent.TemplateWidth

Height property

40

Text property

ThisItem.Value

Align property

Align.Center

Step 7:

Insert a blank vertical gallery named Gallery2 inside Container1. Change the following properties:

X property

0

Y property

0

Width property

Container1.Width

Height property

437

TemplateSize property

88

Items property

collMyCollection

Step 8:

Insert a text label named Label2 inside Gallery2. Change the following properties:

X property

0

Y property

22

Width property

131

Height property

37

Wrap property

false

Align property

Align.Right

Text property

ThisItem.Title

Step 9:

Insert a rectangle named Rectangle2 inside Gallery2. Change the following properties:

X property

131

Y property

10

Width property

With({varGalleryWidthMinusInitialSpace:Gallery1.Width - 184},
varGalleryWidthMinusInitialSpace - 
((1-(IfError(ThisItem.Count/Max(collMyCollection,Count),1)))
*varGalleryWidthMinusInitialSpace)
)

Height property

60

HoverFill property

ColorFade(Self.Fill,20%)

Tooltip property

ThisItem.Title & " - " & ThisItem.Count

Review:

As of the last step, your tree view must look similar to the one in the image.

Conclusion:

Once you have finished the last step, you have now a simple horizontal bar chart. Replace the collection named collMyCollection into your own collection/data. Keep in mind that you may need to replace some text inside the formulas based on the column names of your collection.