cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Helper V
Helper V

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

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:

2020-07-15_18-09-52.gif

 

2 ACCEPTED SOLUTIONS

Accepted Solutions
Highlighted
Super User III
Super User III

@pwrappr01 
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." 

View solution in original post

Highlighted

@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.

View solution in original post

4 REPLIES 4
Highlighted
Super User III
Super User III

@pwrappr01 
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." 

View solution in original post

Highlighted
Power Apps
Power Apps

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.

StackedBarChart.gif

Hope this helps!

Highlighted

@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.

View solution in original post

Highlighted

@pwrappr01 

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.

Helpful resources

Announcements
Community Conference

Power Platform Community Conference

Check out the on demand sessions that are available now!

News & Announcements

Community Blog

Stay up tp date on the latest blogs and activities in the community News & Announcements.

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Community Highlights

Community Highlights

Check out the Power Platform Community Highlights

Top Solution Authors
Top Kudoed Authors
Users online (13,115)