Power Apps UI Cooker

About Author

Release Notes

Custom Functions

Custom Components

Explore

Custom Components

Bar Chart

MyCondy

Last edited 73 days ago by MyCondy

The bar chart shows you the last 5 records from your table.

How to design it in Power Apps

Preview

⁠

⁠

What does it consist of?

1x Horizontal Gallery

2x Label

2x HTML TEXT

Procedure

Step 1 - create gallery with title and subtitle layout

Add a new Vertical Gallery object, call it "BarChartGallery" with this "Data source" property:

LastN(ForAll(

SortByColumns(Distinct(AddColumns(Filter(<Table>,Year = Year(Today())),_months,Month(<Table Column>)-1),_months),"Value",SortOrder.Ascending),

{_months: Value,

totalProfit: Sum(Filter(<Table>, Year = Year(Today()),Month(<Table Column>) = Value),<Table Column> * <Table Column>)

}

),5)

Step 2 - create item in a Gallery

Add a new Label object, call it "profit_value" with this "Text" property:

Text(ThisItem.totalProfit,"0 000","en")

Add a new Label object, call it "month_value" with this "Text" property:

Text(Date(Today(),ThisItem._months,1),"mmm","en")

Add a new HTML TEXT object, call it "bar_box" with this "HTML text" property:

"<div style='margin:0px;width:"&bar_box.Width&"px;height:200px; border-radius:5px; background-color:#F1F1E7;'></div>"

Add a new HTML TEXT object, call it "profit_box" with this "HTML text" property:

"<div style='margin:0px;width:"&profit_box.Width&"px;height:"&profit_box.Height-10&"px; border-radius:5px; background-color:"&If(RoundUp(Value(ThisItem.totalProfit),0) < 30000,"#00C6C2","#718AF4")&";'></div>"

and "Y" property:

bar_box.Y + bar_box.Height - profit_box.Height + 10

If your profit values are in thousands, please use also "Height" property:

RoundUp(Value(ThisItem.totalProfit) / 1000,0)

This is an output:

⁠

⁠

How to design it in Figma

Preview

⁠

⁠

What does it consist of?

13x Frame

12x Text

Procedure

Step 1 - create a bar

Add a new Frame (F command) with vertical auto layout (SHIFT + A command) object, call it "Bar" with these properties:

⁠

⁠

Add a new Text (T command) object under a "Bar" frame, call it "total_hours" with these properties:

⁠

⁠

Add a new Frame (F command) with vertical auto layout (SHIFT + A command) object, call it "Value" with these properties:

⁠

⁠

Add a new Text (T command) object under a "Bar" frame, call it "month_title" with these properties:

⁠

⁠

Step 2 - duplicate bars

Select the "Bar" frame and press 5x COMMAND + D (MAC) or CTRL + D (WIN)

Step 3 - cover it into horizontal frame

Select all created bars and press OPTION + COMMAND + G (MAC) or CTRL + ALT + G (WIN) to cover it in a frame. Then press SHIFT + A command to create an auto layout with these properties:

⁠

⁠

This is an output:

⁠

⁠

How to use it via DesignKit

Prerequisites

the designed component according to the instructions from the previous section

Used Prefixes

barchart_twoquarters = Custom Component represents Horizontal Gallery in Power Apps

YAML Output

⁠

⁠

Used Colours

Bar Box - #F1F1E7

Profit Box (value less 3000) - #00C6C2

Profit Box (value higher 3000) - #718AF4

Profit Value - #00126b

⁠

← Accordion⁠

⁠

Bar Chart with Legend →⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.