Skip to content
Gallery
Power Apps UI Cooker
Introduction
About Author
Release Notes
Custom Functions
Custom Components
Share
Explore
Custom Components

icon picker
Bubble Chart

MyCondy
Last edited 71 days ago by MyCondy
The chart shows percentage of your monthly values with a legend.

How to design it in Power Apps

Preview

⁠
Screenshot 2024-10-01 at 10.52.51.png
⁠
⁠

What does it consist of?

12x Container
14x Label
2x Rectangle
4x Circle

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:
⁠
containpower.png
⁠
⁠

How to design it in Figma

Preview

⁠
Screenshot 2024-10-01 at 10.54.47.png
⁠
⁠

What does it consist of?

13x Frame
2x Rectangle
14x Text
4x Oval

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:
⁠
Screenshot 2024-10-01 at 17.58.51.png
⁠
⁠
⁠
Screenshot 2024-10-01 at 17.59.09.png
⁠
⁠
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:
⁠
Screenshot 2024-10-01 at 18.00.22.png
⁠
⁠
Add a new Text (T command) object under a "vercont_header_chart" frame, call it "lbl_title_value_chart" with these properties:
⁠
Screenshot 2024-10-01 at 18.01.49.png
⁠
⁠
Add a new Text (T command) object under a "vercont_header_chart" frame, call it "lbl_dscr_value_chart" with these properties:
⁠
Screenshot 2024-10-01 at 18.02.07.png
⁠
⁠
Step 3 - create a content frame
Add a new Frame (F command) object, call it "cont_content_chart" with these properties:
⁠
Screenshot 2024-10-01 at 18.03.11.png
⁠
⁠
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:
⁠
Screenshot 2024-10-01 at 18.04.26.png
⁠
⁠
First
⁠
Screenshot 2024-10-01 at 18.04.41.png
⁠
⁠
Second
⁠
Screenshot 2024-10-01 at 18.05.04.png
⁠
⁠
Third
⁠
Screenshot 2024-10-01 at 18.05.19.png
⁠
⁠
Fourth
⁠
Screenshot 2024-10-01 at 18.05.34.png
⁠
⁠
Add new 4 Text (T command) objects under every vertical frame, call it "lbl_first/second/third/fourth_percentage_value" with these properties:
⁠
Screenshot 2024-10-01 at 18.07.00.png
⁠
⁠
First
⁠
Screenshot 2024-10-01 at 18.07.24.png
⁠
⁠
Second
⁠
Screenshot 2024-10-01 at 18.07.40.png
⁠
⁠
Third
⁠
Screenshot 2024-10-01 at 18.07.57.png
⁠
⁠
Fourth
⁠
Screenshot 2024-10-01 at 18.08.19.png
⁠
⁠
Step 4 - create upper line
Add a new Line (L command) object, call it "rect_upper_line" with these properties:
⁠
Screenshot 2024-10-01 at 18.10.42.png
⁠
⁠
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:
⁠
Screenshot 2024-10-01 at 18.12.45.png
⁠
⁠
Add a new 2 Frame (F command) objects, call it "cont_first/second_legend_frame" with these properties:
⁠
Screenshot 2024-10-01 at 18.14.38.png
⁠
⁠
Add new 2 Oval (O command) objects under every frame, call it "ci_first/second_legend_color" with these properties:
⁠
Screenshot 2024-10-01 at 18.19.05.png
⁠
⁠
First
⁠
Screenshot 2024-10-01 at 18.19.23.png
⁠
⁠
Second
⁠
Screenshot 2024-10-01 at 18.19.40.png
⁠
⁠
Add new 2 Text (T command) objects under every frame, call it "lbl_first/second_title_legend" with these properties:
⁠
Screenshot 2024-10-01 at 18.22.40.png
⁠
⁠
Add new 2 Text (T command) objects under every frame, call it "lbl_first/second_value_amount" with these properties:
⁠
Screenshot 2024-10-01 at 18.23.59.png
⁠
⁠
Step 6 - create bottom line
Add a new Line (L command) object, call it "rect_bottom_line" with these properties:
⁠
Screenshot 2024-10-01 at 18.10.42.png
⁠
⁠
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:
⁠
Screenshot 2024-10-01 at 18.13.04.png
⁠
⁠
Add a new 2 Frame (F command) objects, call it "cont_third/fourth_legend_frame" with these properties:
⁠
Screenshot 2024-10-01 at 18.15.08.png
⁠
⁠
Add new 2 Oval (O command) objects under every frame, call it "ci_third/fourth_legend_color" with these properties:
⁠
Screenshot 2024-10-01 at 18.19.05.png
⁠
⁠
Third
⁠
Screenshot 2024-10-01 at 18.20.17.png
⁠
⁠
Fourth
⁠
Screenshot 2024-10-01 at 18.20.33.png
⁠
⁠
Add new 2 Text (T command) objects under every frame, call it "lbl_third/fourth_title_legend" with these properties:
⁠
Screenshot 2024-10-01 at 18.22.40.png
⁠
⁠
Add new 2 Text (T command) objects under every frame, call it "lbl_third/fourth_value_amount" with these properties:
⁠
Screenshot 2024-10-01 at 18.23.59.png
⁠
⁠
This is an output:
⁠
containfigma.png
⁠
⁠

How to use it via DesignKit

Prerequisites

the designed component according to the instructions from the previous section

Used Prefixes

vercont_bubble_chart, vercont_header_chart, vercont_first_value_chart = Vertical Container
cont_content_chart, cont_first_legend_frame = Manual Container
rect_upper_line, rect_bottom_line = Rectangle
lbl_title_value_chart, lbl_dscr_value_chart = Label
cl_first_legend_color = Circle

YAML Output

⁠
yaml.png
⁠
⁠

Used Colours

Parent Chart Background - #FFFFFF
Title Font Colour - #000000
Dscr Font Colour - #B0B0B0
First Bubble Colour - #EDE7FC
First Bubble Font Colour - #562CDC
Second Bubble Colour - #DCF4E9
Second Bubble Font Colour - #5AC28C
Third Bubble Colour - #FDE0E5
Third Bubble Font Colour - #F45666
Fourth Bubble Colour - #FEEFDD
Fourth Bubble Font Colour - #F98C38

⁠
← Bar Chart with Legend
⁠
⁠
⁠
Blinking Text →
⁠
⁠
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.