Skip to content
The chart shows percentage of your monthly values with a legend.
How to design it in Power Apps
Preview
What does it consist of?
Procedure
Step 1 - create main container
Add a new Vertical Container PCF, call it "bubble_chart" with this "DropShadow" property:
DropShadow.Regular
and "BorderRadius" property:
15
and "Gap" property:
17
Step 2 - create header container
Add a new Vertical Container PCF, call it "header_chart" with this "Gap" property:
8
and Label object, call it "title_value_chart" with Text property:
"Monthly Expense"
and Label object, call it "dscr_value_chart" with Text property:
"From 1- 30.09 2024"
Step 3 - create content container
Add a new Manual Container PCF, call it "content_chart" with default properties.
Add 4 Vertical Containers under "content_chart", call it "first/second/third/fourth_value_chart" with "BorderRadius" property:
50
and add 4 Label objects under every vertical container, call it "first/second/third/fourth_percentage_value" with Text property:
"48%","32%","13%","7%"
Step 4 - create upper line
Add a new Rectangle object, call it "upper_line" with "BorderColor" property:
RGBA(220, 220, 220, 1)
Step 5 - create upper legend
Add a new Horizontal Container object, call it "upper_legend_frame" with "Gap" property:
30
Add 2 Manual Container objects, call it "first/second_legend_frame" with "Width" property:
96
Add 2 Circle objects under manual containers, call it "first/second_legend_color" with "Width" and "Height" property:
15,15
Add 2 Label objects under manual containers, call it "first/second_title_legend" with "Text" property:
"Trainings", "Softwares"
Add 2 Label objects under manual containers, call it "first/second_value_amount" with "Text" property:
"$200", "$80"
Step 6 - create bottom line
Add a new Rectangle object, call it "bottom_line" with "BorderColor" property:
RGBA(220, 220, 220, 1)
Step 7- create bottom legend
Add a new Horizontal Container object, call it "bottom_legend_frame" with "Gap" property:
30
Add 2 Manual Container objects, call it "third/fourth_legend_frame" with "Width" property:
96
Add 2 Circle objects under manual containers, call it "third/fourth_legend_color" with "Width" and "Height" property:
15,15
Add 2 Label objects under manual containers, call it "third/fourth_title_legend" with "Text" property:
"Supports", "Other"
Add 2 Label objects under manual containers, call it "third/fourth" with "Text" property:
"$30", "$10"
This is an output:
How to design it in Figma
Preview
What does it consist of?
Procedure
Step 1 - create a parent frame with auto layout
Add a new Frame (F command) with vertical auto layout (SHIFT + A command) object, call it "vercont_bubble_chart" with these properties:
Step 2 - create a header frame with auto layout
Add a new Frame (F command) with vertical auto layout (SHIFT + A command) object, call it "vercont_header_chart" with these properties:
Add a new Text (T command) object under a "vercont_header_chart" frame, call it "lbl_title_value_chart" with these properties:
Add a new Text (T command) object under a "vercont_header_chart" frame, call it "lbl_dscr_value_chart" with these properties:
Step 3 - create a content frame
Add a new Frame (F command) object, call it "cont_content_chart" with these properties:
Add a new 4 Frames (F command) with vertical auto layout (SHIFT + A command) object, call it "vercont_first/second/third/fourth_value_chart" with these properties:
First
Second
Third
Fourth
Add new 4 Text (T command) objects under every vertical frame, call it "lbl_first/second/third/fourth_percentage_value" with these properties:
First
Second
Third
Fourth
Step 4 - create upper line
Add a new Line (L command) object, call it "rect_upper_line" with these properties:
Step 5 - create an upper legend frame
Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "horcont_upper_legend_frame" with these properties:
Add a new 2 Frame (F command) objects, call it "cont_first/second_legend_frame" with these properties:
Add new 2 Oval (O command) objects under every frame, call it "ci_first/second_legend_color" with these properties:
First
Second
Add new 2 Text (T command) objects under every frame, call it "lbl_first/second_title_legend" with these properties:
Add new 2 Text (T command) objects under every frame, call it "lbl_first/second_value_amount" with these properties:
Step 6 - create bottom line
Add a new Line (L command) object, call it "rect_bottom_line" with these properties:
Step 7 - create a bottom legend frame
Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "horcont_bottom_legend_frame" with these properties:
Add a new 2 Frame (F command) objects, call it "cont_third/fourth_legend_frame" with these properties:
Add new 2 Oval (O command) objects under every frame, call it "ci_third/fourth_legend_color" with these properties:
Third
Fourth
Add new 2 Text (T command) objects under every frame, call it "lbl_third/fourth_title_legend" with these properties:
Add new 2 Text (T command) objects under every frame, call it "lbl_third/fourth_value_amount" with these properties:
This is an output:
How to use it via DesignKit
Prerequisites
Used Prefixes
YAML Output
Used Colours
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.