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:
and "BorderRadius" property:
and "Gap" property:
Step 2 - create header container
Add a new Vertical Container PCF, call it "header_chart" with this "Gap" property:
and Label object, call it "title_value_chart" with Text property:
and Label object, call it "dscr_value_chart" with Text property:
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:
and add 4 Label objects under every vertical container, call it "first/second/third/fourth_percentage_value" with Text property:
Step 4 - create upper line
Add a new Rectangle object, call it "upper_line" with "BorderColor" property:
Step 5 - create upper legend
Add a new Horizontal Container object, call it "upper_legend_frame" with "Gap" property:
Add 2 Manual Container objects, call it "first/second_legend_frame" with "Width" property:
Add 2 Circle objects under manual containers, call it "first/second_legend_color" with "Width" and "Height" property:
Add 2 Label objects under manual containers, call it "first/second_title_legend" with "Text" property:
Add 2 Label objects under manual containers, call it "first/second_value_amount" with "Text" property:
Step 6 - create bottom line
Add a new Rectangle object, call it "bottom_line" with "BorderColor" property:
Step 7- create bottom legend
Add a new Horizontal Container object, call it "bottom_legend_frame" with "Gap" property:
Add 2 Manual Container objects, call it "third/fourth_legend_frame" with "Width" property:
Add 2 Circle objects under manual containers, call it "third/fourth_legend_color" with "Width" and "Height" property:
Add 2 Label objects under manual containers, call it "third/fourth_title_legend" with "Text" property:
Add 2 Label objects under manual containers, call it "third/fourth" with "Text" property:
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
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
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