Gallery

Power Apps UI Cooker

Introduction

About Author

Release Notes

Custom Functions

Custom Components

Explore

Custom Components

Bar Chart with Legend

MyCondy

Last edited 71 days ago by MyCondy

The chart shows 3 different values with named legend.

How to design it in Power Apps

Preview

⁠

⁠

What does it consist of?

15x Container

22x Rectangle

3x Circle

5x Label

Procedure

Step 1 - create main container

Add a new Manual Container PCF, call it "barchart_legend" with this "Border radius" property:

and "DropShadow" property:

DropShadow.Regular

Step 2 - create header container

Add a new Vertical Container PCF, call it "header_frame" with this "Gap" property:

with CENTER horizontal and STRETCH vertical alignment.

And Label object under "header_frame", call it "title_value" with Text property:

"Title"

And Label object under "header_frame", call it "dscr_value" with Text property:

"Description of the chart"

Step 3 - create content container

Add a new Horizontal Container PCF, call it "content_frame" with this "Gap" property:

And add 6 Horizontal Container PCF, call it "first/second/third/fourth/fifth_values" with this "Gap" property:

with CENTER horizontal and BOTTOM vertical alignment.

And add 3 Rectangles for every horizontal container, call it "first_value_first/second/third_bar" with "Color" property:

First Bar - RGBA(51, 181, 114, 1)

Second Bar - RGBA(137, 100, 246, 1)

Third Bar - RGBA(255, 175, 64, 1)

Step 4 - create legend container

Add a new Horizontal Container PCF, call it "legend_frame" with this "Gap" property:

with START horizontal and CENTER vertical alignment.

And add 3 Horizontal Container PCF, call it "first/second/third/_legend" with this "Gap" property:

with START horizontal and CENTER vertical alignment.

Add new 3 Circle and Labels under every Horizontal Container, call them "first/second/third_legend_color", "first/second/third_legend_value" with these properties:

"Text" property:

"Label 1" , "Label 2", "Label 3"

"Color" property:

First Circle - RGBA(51, 181, 114, 1)

Second Circle - RGBA(137, 100, 246, 1)

Third Circle - RGBA(255, 175, 64, 1)

Step 5 - create line container

Add a new Manual Container PCF, call it "lines_frame" with default properties.

Add new 4 Rectangle objects, call them "top_line", "under_top_line", "upper_bottom_line", and "bottom_line" with "Color" property:

RGBA(225,225,225,1)

This is an output:

⁠

⁠

How to design it in Figma

Preview

⁠

⁠

What does it consist of?

14x Frame

22x Rectangle

3x Oval

5x Text

Procedure

Step 1 - create a master frame

Add a new Frame (F command) object, call it "cont_barchart_legend" with these properties:

⁠

⁠

⁠

Step 2 - create a header frame

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

⁠

⁠

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

⁠

⁠

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

⁠

⁠

Step 3- create a content frame

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

⁠

⁠

Add new 6 Frames (F command) with horizontal auto layout (SHIFT + A command) object, call it "horcont_first/second/third/fourth/fifth_values" with these properties:

⁠

⁠

Add 3 Rectangle (R command) objects for every horizontal frame, call it "rect_first_value_first/second/third_bar" with these properties:

⁠

⁠

⁠

⁠

Step 4 - create a legend frame

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

⁠

⁠

Add new 3 Frames (F command) with horizontal auto layout (SHIFT + A command) object, call it "horcont_first/second/third_legend" with these properties:

⁠

⁠

Add 3 Oval (O command) objects for every horizontal frame, call it "ci_first/second/third_legend_color" with these properties:

⁠

⁠

⁠

⁠

Add 3 Text (T command) objects for every horizontal frame, call it "lbl_first/second/third_legend_value" with these properties:

⁠

⁠

Step 5 - create a lines frame

Add a new Frame (F command) object, call it "cont_lines_frame" with these properties:

⁠

⁠

Add 4 Lines (L command) object, call it "rect_top_line", "rect_under_top_line", "rect_upper_bottom_line", and "rect_bottom_line" 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

cont_barchart_legend,cont_lines_frame = Manual Container

horcont_content_frame, horcont_first_values, horcont_first_legend = Horizontal Container

vercont_header_frame = Vertical Container

rect_first_value_first_bar , rect_top_line = Rectangle

lbl_litle_value, lbl_dscr_value = Label

YAML Output

⁠

Used Colours

Container Background - #FFFFFF

First Bar Colour - #33B572

Second Bar Colour - #8964F6

Third Bar Colour - #FFAF40

Lines Colour - #E1E1E1

Text Colour - #000000

⁠

← Bar Chart⁠

⁠

Bubble Chart →⁠

⁠

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.