Answered

How can I mimic a stacked column chart using shapes in Power Apps?

(0) Share

Report

Posted on by Community Power Pla... Microsoft Employee

I want to imitate a stacked column chart in a Power App by using two shapes and moving one up/down based on user input. One shape sits in the background and is the "Goal" while the other is the "Actual." I can't seem to keep the Y and Height of the "Actual" from moving.

This is what I want to accomplish:

Categories:

Building Power Apps

All responses (4)

Answers (2)

Sort by

Verified answer

mdevaney 29,993 Moderator on at

Like
a
(1)

Report
Copy link

Link copied!
@Anonymous
The chart you are showing looks pretty good. I am assuming your PowerApp does not behave like that currently.

Put this code in the Height property of Actual rectangle

(Value(TextInput_Actual.Text)/Value(TextInput_Goal.Text))*Shape_Rectangle_Goal.Height

Then put this code in the Y property of the Actual rectangle

Shape_Rectangle_Goal.Y + Shape_Rectangle_Goal.Height * (1 - (Value(TextInput_Actual.Text)/Value(TextInput_Goal.Text)))

---
Please click "Accept as Solution" if my post answered your question so that others may find it more quickly. If you found this post helpful consider giving it a "Thumbs Up."
CarlosFigueira Microsoft Employee on at

Like
a
(2)

Report
Copy link

Link copied!
This is an interesting problem. I created a component in the attached app that shows one way of implementing this. To open it, save it locally, then go to https://create.powerapps.com, select Open, Browse, and find the file that you saved.

The idea is to make the height of the "current" rectangle the percentage of the height of the "total" rectangle:

rectTotal.Height * Parent.Current / Parent.Max

And make the Y property of that rectangle such that its bottom will alight with the bottom of the "total" rectangle:

rectTotal.Height + rectTotal.Y - Self.Height

Below is an example of that component. Currently its implementation is fairly simple (it doesn't handle well the cases where the current value is larger than the maximum, for example), but that should be a good starting point for you.

Hope this helps!

ForumThread626592...
Verified answer

Community Power Pla... Microsoft Employee on at

Like
a
(0)

Report
Copy link

Link copied!
@mdevaney and @CarlosFigueira, thanks for posting.

@mdevaney, thanks. The GIF was from another app I developed, but I don't even know how I made that work in the first place as I just threw code at it until it did what I wanted for that scenario.

Anyway, your code worked wonders (as always). I only modified it a little to have the Y and Height for the Actual cap at the Y and Height of the Goal shape.

Height:
Min(Min(Shape_Rectangle_Goal.Y-Self.Y+Shape_Rectangle_Goal.Height,(Value(TextInput_Actual.Text)/Value(TextInput_Goal.Text))*Shape_Rectangle_Goal.Height)
Y:
Max(Shape_Rectangle_Goal.Y,Shape_Rectangle_Goal.Y + Shape_Rectangle_Goal.Height * (1 - (Value(TextInput_Actual.Text)/Value(TextInput_Goal.Text))))

Thank you much.
mdevaney 29,993 Moderator on at

Like
a
(1)

Report
Copy link

Link copied!

@Anonymous

Awesome. I would suggest to mark both my answer and your answer as the Solution here. You can mark multiple answers as the solution l.