cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Adam_Dunn
Level: Powered On

How to create a horizontal column chart: Tutorial

Hi all,

 

I just wanted to share a solution to working around the limitations of the built in Column Chart. For those unfamiliar, PowerApps only allows the creation of bar chart to have vertical data bars. This style is not very conducive to mobile screens that have a lot of vertical leeway.

 

Here is what is built in:

image.png

We want something like this:

image.png

 

Luckily, we can do just that but with using our reliable gallery control!

 

  • First we will start with a "Blank Vertical" gallery control with Items:ColumnChartSample
  • Set the template padding to 1 or 0 depending on if you want space between each bar.
  • Shrink the individual items in the gallery to be quite small, just big enough to fit the label and the bar
  • For the bars themselves, I use labels, but you could use rectangle icons.
  • Place your colored bar where you want and size it to fit what you want the maximum value to look like.
    • In my example, the bar label has {Width:350,X:125}
  • Now set the width value to change depending on the value of the current item.
    • Since 350 is the maximum value of the chart, we want all of the other bar sizes to be a ratio of that maximum size, based on ThisItem's value.
    • With the ColumnChartSample: {Width: 350*(ThisItem.Area/Max(ColumnChartSample,Area))}
  • To have the data label appear at the right end of the bar, we adjust the X value to move left and right depending on the Width of our BarLabel. This is where the X of our bar label matters, since when the BarLabel == 0, our data label will rest at the origin of the BarLabel.
    • DataLabel: {X:BarLabel.X+BarLabel.Width, Text: ThisItem.Area}
  • In my example I set the Fill property to change based on the Area value. If the value is above 80% we want to show green.

And there you have it! I personally put a thin black label with Width:1 to increase the visuals. Since this is a gallery control, you have even more freedom to add controls and to customize the chart.

Note: Make the gallery control big enough to hold all data points if you don't want the user to be able to scroll. If the gallery control is a little too small, the chart will look like a chart, but if a user scrolls on it, the data points move a little.

 

Hope this helps!

 

1 ACCEPTED SOLUTION

Accepted Solutions
Super User
Super User

Re: How to create a horizontal column chart: Tutorial

Awesome workaround and tutorial! Thanks for sharing!

View solution in original post

7 REPLIES 7
Super User
Super User

Re: How to create a horizontal column chart: Tutorial

Hi @Adam_Dunn


Well done for sharing this! I'm sure this technique of using a gallery control to display a chart will help many people.

Community Support Team
Community Support Team

Re: How to create a horizontal column chart: Tutorial

Hi @Adam_Dunn,

 

Thanks for your sharing. 

 

I would also share this solution with other colleages.

 

Best regards,

Kris

Community Support Team _ Kris Dai
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
TopShelf-MSFT
Level 10

Re: How to create a horizontal column chart: Tutorial

Thanks for sharing! Robot Happy

roncam
Level: Powered On

Re: How to create a horizontal column chart: Tutorial

can you please help me more on this tutorial ?

Super User
Super User

Re: How to create a horizontal column chart: Tutorial

Awesome workaround and tutorial! Thanks for sharing!

View solution in original post

wcape
Level: Powered On

Re: How to create a horizontal column chart: Tutorial

What datasource do you use for the gallery control...?

albertvangink
Level: Powered On

Re: How to create a horizontal column chart: Tutorial

It took a while, but in the end I managed to recreate the bar chart. Thank you!

Helpful resources

Announcements
New Ranks and Rank Icons in April

'New Ranks and Rank Icons in April

Read the announcement for more information!

Better Together’ Contest Finalists Announced!

'Better Together’ Contest Finalists Announced!

Congrats to the finalists of our ‘Better Together’-themed T-shirt design contest! Click for the top entries.

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

thirdimage

Community Summit North America

Innovate, Collaborate, Grow - The top training and networking event across the globe for Microsoft Business Applications

Top Solution Authors
Top Kudoed Authors
Users online (8,749)