Skip to content
Gallery
Power Apps UI Cooker
Introduction
About Author
Canvas Components
Share
Explore
Canvas Components

icon picker
Performance Chart

Lukas Pavelka
Last edited 116 days ago by Lukas Pavelka.

How to design it in Power Apps

Preview

⁠
Screenshot 2025-04-17 at 20.03.27.png
⁠
⁠

What does it consist of?

3x Container
1x Image
6x Label
4x HTML Text

Procedure

Step 1 - create main container
Add a new Vertical Container PCF object, call it "performance_chart" with this "DropShadow" property:
DropShadow.Semilight
Step 2 - create labels
Add a new Vertical Container PCF object, call it "performance_labels" with this "Gap" property:
0
Add a new Label object under "performance_labels", call it "title_performance" with this "Text" property:
"Performance"
Add a new Label object under "performance_labels", call it "subtitle_performance" with this "Text" property:
"From last 7 days"
Step 3 - create content chart
Add a new Image object, call it "performance_content" with this "Image" property:
"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='429' height='309' viewBox='0 0 429 309' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M273.25 210.433L273.485 210.568V231.461L254.5 242.423L235.515 231.461V210.568L235.75 210.433L254.5 199.606L273.25 210.433ZM253.515 177.008V197.991L234.765 208.817L234.606 208.907L216.515 198.461V177.568L216.75 177.433L235.5 166.606L253.515 177.008ZM292.25 177.433L292.485 177.568V198.461L274.393 208.907L274.235 208.817L255.485 197.991V177.008L273.5 166.606L292.25 177.433ZM234.515 142.978V164.991L215.765 175.817L215.606 175.907L197.515 165.461V143.538L216.5 132.576L234.515 142.978ZM311.485 143.538V165.461L293.393 175.907L293.235 175.817L274.485 164.991V142.978L292.5 132.576L311.485 143.538ZM272.515 142.978V164.991L254.5 175.393L236.485 164.991V142.978L254.5 132.576L272.515 142.978Z' fill='#F4BC47' stroke='white'/>
<path d='M348.25 78.4326L348.485 78.5684V99.4609L329.5 110.423L310.514 99.4609V78.5684L310.75 78.4326L329.5 67.6064L348.25 78.4326ZM328.514 45.0078V65.9912L309.764 76.8174L309.606 76.9072L291.514 66.4609V45.5684L291.75 45.4326L310.5 34.6064L328.514 45.0078ZM367.25 45.4326L367.485 45.5684V66.4609L349.392 76.9072L349.235 76.8174L330.485 65.9912V45.0078L348.5 34.6064L367.25 45.4326ZM309.514 10.9775V32.9912L290.764 43.8174L290.606 43.9072L272.514 33.4609V11.5381L291.5 0.576172L309.514 10.9775ZM386.485 11.5381V33.4609L368.392 43.9072L368.235 43.8174L349.485 32.9912V10.9775L367.5 0.576172L386.485 11.5381ZM347.514 10.9775V32.9912L329.5 43.3926L311.485 32.9912V10.9775L329.5 0.576172L347.514 10.9775Z' fill='#A2B0F7' stroke='white'/>
<path d='M234.764 100.183L253.514 111.008V133.021L235.5 143.423L216.514 132.461V110.538L234.606 100.092L234.764 100.183ZM291.514 111.008V133.021L273.5 143.423L255.485 133.021V111.008L273.5 100.606L291.514 111.008ZM330.485 110.538V132.461L311.5 143.423L293.485 133.021V111.008L312.235 100.183L312.392 100.092L330.485 110.538ZM272.25 78.4326L272.5 78.5771L272.514 78.5684V98.9912L254.5 109.393L235.75 98.5674L235.514 98.4307V77.5381L253.107 67.3799L272.25 78.4326ZM311.485 77.5381V98.4307L311.25 98.5674L292.5 109.393L274.485 98.9912V77.4307L292.235 67.1826L292.485 67.0391V66.585L292.5 66.5762L311.485 77.5381ZM272.514 76.9775V77.4141L272.5 77.4229L254.106 66.8037L254.5 66.5762L272.514 76.9775ZM291.485 44.5381V66.0088L273.5 76.3926L254.75 65.5674L254.5 65.4229L254.25 65.5674L253.514 65.9912V44.5381L272.5 33.5762L291.485 44.5381Z' fill='#C171F7' stroke='white'/>
<path d='M121.25 276.433L121.485 276.568V297.461L102.5 308.423L83.5146 297.461V276.008L84.25 276.433L84.5 276.577L84.75 276.433L103 265.896L121.25 276.433ZM101.765 265.183L102 265.318L84.5 275.423L84.1064 275.195L101.606 265.092L101.765 265.183ZM140.25 243.433L140.485 243.568V264.461L122.393 274.907L122.235 274.817L104.485 264.568V243.008L122 232.896L140.25 243.433ZM83.7646 232.183L101.515 242.431V263.991L83.1074 274.619L65.5146 264.461V242.538L83.6064 232.092L83.7646 232.183ZM103.25 243.433L103.485 243.568V263.991L102.75 263.567L102.515 263.431V243.008L103.25 243.433ZM177.765 199.183L197.25 210.433L197.485 210.568V231.461L178.5 242.423L160.485 232.021V208.978L177.606 199.092L177.765 199.183ZM120.765 232.183L121 232.318L104.393 241.907L104.235 241.817L103.999 241.681L120.606 232.092L120.765 232.183ZM158.515 208.978V232.021L141.393 241.907L141.235 241.817L123.485 231.568V208.961L123.235 208.817L122.999 208.681L140.5 198.576L158.515 208.978ZM121 208.681L120.765 208.817L120.515 208.961V230.991L103 241.104L84.75 230.567L84.5146 230.431V209.538L103.5 198.576L121 208.681ZM122.485 209.538V230.991L121.75 230.567L121.515 230.431V209.538L122 209.258L122.485 209.538ZM216.485 176.538V198.461L198.393 208.907L198.235 208.817L178.75 197.567L178.515 197.431V176.538L197.5 165.576L216.485 176.538Z' fill='#EBEDFD' stroke='white'/>
<path d='M139.765 265.183L159.25 276.433L159.485 276.568V297.461L140.5 308.423L121.515 297.461V275.538L139.606 265.092L139.765 265.183ZM178.485 242.538V264.461L160.393 274.907L160.235 274.817L140.75 263.567L140.515 263.431V242.538L159.5 231.576L178.485 242.538Z' fill='#D1D8FB' stroke='white'/>
<path d='M348.25 144.433L348.5 144.577L348.75 144.433L349.485 144.008V165.461L330.5 176.423L311.514 165.461V143.538L329.107 133.38L348.25 144.433ZM348.892 143.195L348.5 143.423L330.106 132.804L330.5 132.576L348.892 143.195ZM347.764 100.183L367.25 111.433L367.485 111.568V132.461L349.891 142.619L330.75 131.567L330.5 131.423L330.25 131.567L329.514 131.991V110.538L347.606 100.092L347.764 100.183ZM366.764 67.1826L386.25 78.4326L386.485 78.5684V99.4609L368.392 109.907L368.235 109.817L348.75 98.5674L348.514 98.4307V77.5381L366.606 67.0918L366.764 67.1826ZM405.485 44.5381V66.4609L387.392 76.9072L387.235 76.8174L367.75 65.5674L367.514 65.4307V44.5381L386.5 33.5762L405.485 44.5381Z' fill='#D1D8FB' stroke='white'/>
<path d='M330.5 264L349.986 275.25V297.75L330.5 309L311.015 297.75V275.25L330.5 264Z' fill='#A2B0F7'/>
<path d='M292.5 264L311.986 275.25V297.75L292.5 309L273.015 297.75V275.25L292.5 264Z' fill='#A2B0F7'/>
<path d='M216.5 308L197.015 296.75V274.25L216.5 263L235.986 274.25V296.75L216.5 308Z' fill='#A2AFF7'/>
<path d='M216.5 243L197.015 231.75V209.25L216.5 198L235.986 209.25V231.75L216.5 243Z' fill='#A2AFF7'/>
<path d='M178.5 309L159.015 297.75V275.25L178.5 264L197.986 275.25V297.75L178.5 309Z' fill='#A2AFF7'/>
<path d='M197.5 276L178.015 264.75V242.25L197.5 231L216.986 242.25V264.75L197.5 276Z' fill='#A2AFF7'/>
<path d='M235.5 276L216.015 264.75V242.25L235.5 231L254.986 242.25V264.75L235.5 276Z' fill='#A2AFF7'/>
<path d='M254.5 309L235.015 297.75V275.25L254.5 264L273.986 275.25V297.75L254.5 309Z' fill='#A2AFF7'/>
<path d='M177.765 265.183L196.515 276.008V297.039L196.765 297.183L197.366 297.529L178.5 308.423L159.515 297.461V275.538L177.606 265.092L177.765 265.183ZM272.515 274.978V298.021L254.5 308.423L235.633 297.529L236.235 297.183L236.485 297.039V276.008L255.235 265.183L255.393 265.092L272.515 274.978ZM310.515 274.978V298.021L292.5 308.423L274.485 298.021V274.978L292.5 264.576L310.515 274.978ZM349.485 275.538V297.461L330.5 308.423L312.485 298.021V274.978L330.5 264.576L349.485 275.538ZM234.515 276.008V297.021L216.5 307.423L198.485 297.021V276.008L216.5 265.606L234.515 276.008ZM215.515 265.021L198.393 274.907L198.235 274.817L197.633 274.47L215.515 264.146V265.021ZM235.366 274.47L234.765 274.817L234.606 274.907L217.485 265.021V264.146L235.366 274.47ZM196.765 232.183L215.515 243.008V262.991L196.765 273.817L196.633 273.893L178.75 263.567L178.515 263.431V242.538L196.606 232.092L196.765 232.183ZM254.485 242.538V263.431L254.25 263.567L236.366 273.893L236.235 273.817L217.485 262.991V243.008L236.235 232.183L236.393 232.092L254.485 242.538ZM235.485 209.538V230.431L235.25 230.567L216.5 241.393L197.75 230.567L197.515 230.431V209.538L216.5 198.576L235.485 209.538Z' stroke='white'/>
<path d='M178.25 177.433L178.485 177.568V198.461L159.5 209.423L140.515 198.461V177.568L140.75 177.433L159.5 166.606L178.25 177.433ZM139.765 134.183L158.515 145.008V164.991L139.765 175.817L139.606 175.907L121.515 165.461V144.568L121.75 144.433L139.633 134.106L139.765 134.183ZM197.25 144.433L197.485 144.568V165.461L179.393 175.907L179.235 175.817L160.485 164.991V145.008L179.235 134.183L179.366 134.106L197.25 144.433ZM158.515 142.978V143.854L140.633 133.529L141.235 133.183L141.393 133.092L158.515 142.978ZM177.765 133.183L178.366 133.529L160.485 143.854V142.978L177.606 133.092L177.765 133.183ZM140.366 110.47L139.765 110.817L139.515 110.961V131.991L120.765 142.817L120.606 142.907L102.515 132.461V110.538L121.5 99.5762L140.366 110.47ZM216.485 110.538V132.461L198.393 142.907L198.235 142.817L179.485 131.991V110.961L179.235 110.817L178.633 110.47L197.5 99.5762L216.485 110.538ZM177.515 110.978V131.991L159.5 142.393L141.485 131.991V110.978L159.5 100.576L177.515 110.978Z' fill='#A2AFF7' stroke='white'/>
<path d='M272.764 232.183L291.514 243.008V265.021L273.5 275.423L254.514 264.461V242.538L272.606 232.092L272.764 232.183ZM330.25 243.433L330.485 243.568V264.461L311.5 275.423L293.485 265.021V243.008L311.5 232.606L330.25 243.433ZM349.485 209.538V231.461L331.392 241.907L331.235 241.817L312.485 230.991V210.008L331.235 199.183L331.392 199.092L349.485 209.538ZM291.764 199.183L310.514 210.008V230.991L292.5 241.393L273.75 230.567L273.514 230.431V209.538L291.606 199.092L291.764 199.183ZM330.485 176.538V197.431L330.25 197.567L311.5 208.393L292.75 197.567L292.514 197.431V176.538L311.5 165.576L330.485 176.538Z' fill='#EBEDFD' stroke='white'/>
<path d='M176.75 67.1826L195.5 78.0078V100.021L177.485 110.423L158.5 99.4609V77.5381L176.592 67.0918L176.75 67.1826ZM234.235 78.4326L234.471 78.5684V99.4609L215.485 110.423L197.471 100.021V78.0078L215.485 67.6064L234.235 78.4326ZM253.471 44.5381V66.4609L235.378 76.9072L235.221 76.8174L216.471 65.9912V45.0078L235.221 34.1826L235.378 34.0918L253.471 44.5381ZM195.75 34.1826L214.5 45.0078V65.9912L196.485 76.3926L177.735 65.5674L177.5 65.4307V44.5381L195.592 34.0918L195.75 34.1826ZM234.471 11.5381V32.4307L234.235 32.5674L215.485 43.3926L196.735 32.5674L196.5 32.4307V11.5381L215.485 0.576172L234.471 11.5381Z' fill='#C171F7' stroke='white'/>
<path d='M63.75 199.183L83.2354 210.433L83.4707 210.568V231.461L64.4854 242.423L45.5 231.461V209.538L63.5918 199.092L63.75 199.183ZM140.471 176.538V198.461L121.485 209.423L103.471 199.021V177.008L122.221 166.183L122.378 166.092L140.471 176.538ZM82.75 166.183L101.5 177.008V199.021L84.3779 208.907L84.2207 208.817L64.7354 197.567L64.5 197.431V176.538L82.5918 166.092L82.75 166.183ZM121.471 143.538V164.431L121.235 164.567L102.485 175.393L83.7354 164.567L83.5 164.431V143.538L102.485 132.576L121.471 143.538Z' fill='#D1D8FB' stroke='white'/>
</svg>")
Step 4 - create legend container
Add a new Horizontal Container PCF object, call it "legend_performance" with this "Gap" property:
10
Add 5x HTML TEXT objects, call them "one/two/three/four/five_divider" with "HtmlText" property:
" <div style='border-radius:20px;background-color:#a2aff7;width:5px;height:34px;'></div>"
" <div style='border-radius:20px;background-color:#c171f7;width:5px;height:34px;'></div>"
" <div style='border-radius:20px;background-color:#ebedfd;width:5px;height:34px;'></div>"
" <div style='border-radius:20px;background-color:#d1d8fb;width:5px;height:34px;'></div>"
" <div style='border-radius:20px;background-color:#f4bc47;width:5px;height:34px;'></div>"
Add 5x new Label objects, call them "first/second/third/fourth/fifth_value" with this "Text" property:
"24.5%"
"15.5%"
"11%"
"8%"
"5%"
you can replace static data by your Sharepoint or Dataverse table.
This is an output:
⁠
Screenshot 2025-04-18 at 6.56.52.png
⁠
⁠

How to design it in Figma

Preview

⁠
Screenshot 2025-04-18 at 7.12.34.png
⁠
⁠

What does it consist of?

4x Frame
1x Vector
5x Rectangle
7x Text

Procedure

Step 1 - create a vertical frame with auto layout
Add a new Frame (F command) with vertical auto layout (SHIFT + A command) object, call it "vercont_performance_chart" with these properties:
⁠
Screenshot 2025-04-18 at 7.19.27.png
⁠
⁠
⁠
Screenshot 2025-04-18 at 7.19.51.png
⁠
⁠
Step 2 - create a label frame
Add a new Frame (F command) with vertical auto layout (SHIFT + A command) object, call it "vercont_performance_labels" with these properties:
⁠
Screenshot 2025-04-18 at 7.21.22.png
⁠
⁠
Add a new Text (T command), call it "lbl_title_performance" with these properties:
⁠
Screenshot 2025-04-18 at 7.22.18.png
⁠
⁠
Add a new Text (T command), call it "lbl_subtitle_performance" with these properties:
⁠
Screenshot 2025-04-18 at 7.22.45.png
⁠
⁠
Step 3 - create a content chart
Import a new SVG file, call it "svg_performance_content" with this XML code:
<svg width='429' height='309' viewBox='0 0 429 309' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path d='M273.25 210.433L273.485 210.568V231.461L254.5 242.423L235.515 231.461V210.568L235.75 210.433L254.5 199.606L273.25 210.433ZM253.515 177.008V197.991L234.765 208.817L234.606 208.907L216.515 198.461V177.568L216.75 177.433L235.5 166.606L253.515 177.008ZM292.25 177.433L292.485 177.568V198.461L274.393 208.907L274.235 208.817L255.485 197.991V177.008L273.5 166.606L292.25 177.433ZM234.515 142.978V164.991L215.765 175.817L215.606 175.907L197.515 165.461V143.538L216.5 132.576L234.515 142.978ZM311.485 143.538V165.461L293.393 175.907L293.235 175.817L274.485 164.991V142.978L292.5 132.576L311.485 143.538ZM272.515 142.978V164.991L254.5 175.393L236.485 164.991V142.978L254.5 132.576L272.515 142.978Z' fill='#F4BC47' stroke='white'/>
<path d='M348.25 78.4326L348.485 78.5684V99.4609L329.5 110.423L310.514 99.4609V78.5684L310.75 78.4326L329.5 67.6064L348.25 78.4326ZM328.514 45.0078V65.9912L309.764 76.8174L309.606 76.9072L291.514 66.4609V45.5684L291.75 45.4326L310.5 34.6064L328.514 45.0078ZM367.25 45.4326L367.485 45.5684V66.4609L349.392 76.9072L349.235 76.8174L330.485 65.9912V45.0078L348.5 34.6064L367.25 45.4326ZM309.514 10.9775V32.9912L290.764 43.8174L290.606 43.9072L272.514 33.4609V11.5381L291.5 0.576172L309.514 10.9775ZM386.485 11.5381V33.4609L368.392 43.9072L368.235 43.8174L349.485 32.9912V10.9775L367.5 0.576172L386.485 11.5381ZM347.514 10.9775V32.9912L329.5 43.3926L311.485 32.9912V10.9775L329.5 0.576172L347.514 10.9775Z' fill='#A2B0F7' stroke='white'/>
<path d='M234.764 100.183L253.514 111.008V133.021L235.5 143.423L216.514 132.461V110.538L234.606 100.092L234.764 100.183ZM291.514 111.008V133.021L273.5 143.423L255.485 133.021V111.008L273.5 100.606L291.514 111.008ZM330.485 110.538V132.461L311.5 143.423L293.485 133.021V111.008L312.235 100.183L312.392 100.092L330.485 110.538ZM272.25 78.4326L272.5 78.5771L272.514 78.5684V98.9912L254.5 109.393L235.75 98.5674L235.514 98.4307V77.5381L253.107 67.3799L272.25 78.4326ZM311.485 77.5381V98.4307L311.25 98.5674L292.5 109.393L274.485 98.9912V77.4307L292.235 67.1826L292.485 67.0391V66.585L292.5 66.5762L311.485 77.5381ZM272.514 76.9775V77.4141L272.5 77.4229L254.106 66.8037L254.5 66.5762L272.514 76.9775ZM291.485 44.5381V66.0088L273.5 76.3926L254.75 65.5674L254.5 65.4229L254.25 65.5674L253.514 65.9912V44.5381L272.5 33.5762L291.485 44.5381Z' fill='#C171F7' stroke='white'/>
<path d='M121.25 276.433L121.485 276.568V297.461L102.5 308.423L83.5146 297.461V276.008L84.25 276.433L84.5 276.577L84.75 276.433L103 265.896L121.25 276.433ZM101.765 265.183L102 265.318L84.5 275.423L84.1064 275.195L101.606 265.092L101.765 265.183ZM140.25 243.433L140.485 243.568V264.461L122.393 274.907L122.235 274.817L104.485 264.568V243.008L122 232.896L140.25 243.433ZM83.7646 232.183L101.515 242.431V263.991L83.1074 274.619L65.5146 264.461V242.538L83.6064 232.092L83.7646 232.183ZM103.25 243.433L103.485 243.568V263.991L102.75 263.567L102.515 263.431V243.008L103.25 243.433ZM177.765 199.183L197.25 210.433L197.485 210.568V231.461L178.5 242.423L160.485 232.021V208.978L177.606 199.092L177.765 199.183ZM120.765 232.183L121 232.318L104.393 241.907L104.235 241.817L103.999 241.681L120.606 232.092L120.765 232.183ZM158.515 208.978V232.021L141.393 241.907L141.235 241.817L123.485 231.568V208.961L123.235 208.817L122.999 208.681L140.5 198.576L158.515 208.978ZM121 208.681L120.765 208.817L120.515 208.961V230.991L103 241.104L84.75 230.567L84.5146 230.431V209.538L103.5 198.576L121 208.681ZM122.485 209.538V230.991L121.75 230.567L121.515 230.431V209.538L122 209.258L122.485 209.538ZM216.485 176.538V198.461L198.393 208.907L198.235 208.817L178.75 197.567L178.515 197.431V176.538L197.5 165.576L216.485 176.538Z' fill='#EBEDFD' stroke='white'/>
<path d='M139.765 265.183L159.25 276.433L159.485 276.568V297.461L140.5 308.423L121.515 297.461V275.538L139.606 265.092L139.765 265.183ZM178.485 242.538V264.461L160.393 274.907L160.235 274.817L140.75 263.567L140.515 263.431V242.538L159.5 231.576L178.485 242.538Z' fill='#D1D8FB' stroke='white'/>
<path d='M348.25 144.433L348.5 144.577L348.75 144.433L349.485 144.008V165.461L330.5 176.423L311.514 165.461V143.538L329.107 133.38L348.25 144.433ZM348.892 143.195L348.5 143.423L330.106 132.804L330.5 132.576L348.892 143.195ZM347.764 100.183L367.25 111.433L367.485 111.568V132.461L349.891 142.619L330.75 131.567L330.5 131.423L330.25 131.567L329.514 131.991V110.538L347.606 100.092L347.764 100.183ZM366.764 67.1826L386.25 78.4326L386.485 78.5684V99.4609L368.392 109.907L368.235 109.817L348.75 98.5674L348.514 98.4307V77.5381L366.606 67.0918L366.764 67.1826ZM405.485 44.5381V66.4609L387.392 76.9072L387.235 76.8174L367.75 65.5674L367.514 65.4307V44.5381L386.5 33.5762L405.485 44.5381Z' fill='#D1D8FB' stroke='white'/>
<path d='M330.5 264L349.986 275.25V297.75L330.5 309L311.015 297.75V275.25L330.5 264Z' fill='#A2B0F7'/>
<path d='M292.5 264L311.986 275.25V297.75L292.5 309L273.015 297.75V275.25L292.5 264Z' fill='#A2B0F7'/>
<path d='M216.5 308L197.015 296.75V274.25L216.5 263L235.986 274.25V296.75L216.5 308Z' fill='#A2AFF7'/>
<path d='M216.5 243L197.015 231.75V209.25L216.5 198L235.986 209.25V231.75L216.5 243Z' fill='#A2AFF7'/>
<path d='M178.5 309L159.015 297.75V275.25L178.5 264L197.986 275.25V297.75L178.5 309Z' fill='#A2AFF7'/>
<path d='M197.5 276L178.015 264.75V242.25L197.5 231L216.986 242.25V264.75L197.5 276Z' fill='#A2AFF7'/>
<path d='M235.5 276L216.015 264.75V242.25L235.5 231L254.986 242.25V264.75L235.5 276Z' fill='#A2AFF7'/>
<path d='M254.5 309L235.015 297.75V275.25L254.5 264L273.986 275.25V297.75L254.5 309Z' fill='#A2AFF7'/>
<path d='M177.765 265.183L196.515 276.008V297.039L196.765 297.183L197.366 297.529L178.5 308.423L159.515 297.461V275.538L177.606 265.092L177.765 265.183ZM272.515 274.978V298.021L254.5 308.423L235.633 297.529L236.235 297.183L236.485 297.039V276.008L255.235 265.183L255.393 265.092L272.515 274.978ZM310.515 274.978V298.021L292.5 308.423L274.485 298.021V274.978L292.5 264.576L310.515 274.978ZM349.485 275.538V297.461L330.5 308.423L312.485 298.021V274.978L330.5 264.576L349.485 275.538ZM234.515 276.008V297.021L216.5 307.423L198.485 297.021V276.008L216.5 265.606L234.515 276.008ZM215.515 265.021L198.393 274.907L198.235 274.817L197.633 274.47L215.515 264.146V265.021ZM235.366 274.47L234.765 274.817L234.606 274.907L217.485 265.021V264.146L235.366 274.47ZM196.765 232.183L215.515 243.008V262.991L196.765 273.817L196.633 273.893L178.75 263.567L178.515 263.431V242.538L196.606 232.092L196.765 232.183ZM254.485 242.538V263.431L254.25 263.567L236.366 273.893L236.235 273.817L217.485 262.991V243.008L236.235 232.183L236.393 232.092L254.485 242.538ZM235.485 209.538V230.431L235.25 230.567L216.5 241.393L197.75 230.567L197.515 230.431V209.538L216.5 198.576L235.485 209.538Z' stroke='white'/>
<path d='M178.25 177.433L178.485 177.568V198.461L159.5 209.423L140.515 198.461V177.568L140.75 177.433L159.5 166.606L178.25 177.433ZM139.765 134.183L158.515 145.008V164.991L139.765 175.817L139.606 175.907L121.515 165.461V144.568L121.75 144.433L139.633 134.106L139.765 134.183ZM197.25 144.433L197.485 144.568V165.461L179.393 175.907L179.235 175.817L160.485 164.991V145.008L179.235 134.183L179.366 134.106L197.25 144.433ZM158.515 142.978V143.854L140.633 133.529L141.235 133.183L141.393 133.092L158.515 142.978ZM177.765 133.183L178.366 133.529L160.485 143.854V142.978L177.606 133.092L177.765 133.183ZM140.366 110.47L139.765 110.817L139.515 110.961V131.991L120.765 142.817L120.606 142.907L102.515 132.461V110.538L121.5 99.5762L140.366 110.47ZM216.485 110.538V132.461L198.393 142.907L198.235 142.817L179.485 131.991V110.961L179.235 110.817L178.633 110.47L197.5 99.5762L216.485 110.538ZM177.515 110.978V131.991L159.5 142.393L141.485 131.991V110.978L159.5 100.576L177.515 110.978Z' fill='#A2AFF7' stroke='white'/>
<path d='M272.764 232.183L291.514 243.008V265.021L273.5 275.423L254.514 264.461V242.538L272.606 232.092L272.764 232.183ZM330.25 243.433L330.485 243.568V264.461L311.5 275.423L293.485 265.021V243.008L311.5 232.606L330.25 243.433ZM349.485 209.538V231.461L331.392 241.907L331.235 241.817L312.485 230.991V210.008L331.235 199.183L331.392 199.092L349.485 209.538ZM291.764 199.183L310.514 210.008V230.991L292.5 241.393L273.75 230.567L273.514 230.431V209.538L291.606 199.092L291.764 199.183ZM330.485 176.538V197.431L330.25 197.567L311.5 208.393L292.75 197.567L292.514 197.431V176.538L311.5 165.576L330.485 176.538Z' fill='#EBEDFD' stroke='white'/>
<path d='M176.75 67.1826L195.5 78.0078V100.021L177.485 110.423L158.5 99.4609V77.5381L176.592 67.0918L176.75 67.1826ZM234.235 78.4326L234.471 78.5684V99.4609L215.485 110.423L197.471 100.021V78.0078L215.485 67.6064L234.235 78.4326ZM253.471 44.5381V66.4609L235.378 76.9072L235.221 76.8174L216.471 65.9912V45.0078L235.221 34.1826L235.378 34.0918L253.471 44.5381ZM195.75 34.1826L214.5 45.0078V65.9912L196.485 76.3926L177.735 65.5674L177.5 65.4307V44.5381L195.592 34.0918L195.75 34.1826ZM234.471 11.5381V32.4307L234.235 32.5674L215.485 43.3926L196.735 32.5674L196.5 32.4307V11.5381L215.485 0.576172L234.471 11.5381Z' fill='#C171F7' stroke='white'/>
<path d='M63.75 199.183L83.2354 210.433L83.4707 210.568V231.461L64.4854 242.423L45.5 231.461V209.538L63.5918 199.092L63.75 199.183ZM140.471 176.538V198.461L121.485 209.423L103.471 199.021V177.008L122.221 166.183L122.378 166.092L140.471 176.538ZM82.75 166.183L101.5 177.008V199.021L84.3779 208.907L84.2207 208.817L64.7354 197.567L64.5 197.431V176.538L82.5918 166.092L82.75 166.183ZM121.471 143.538V164.431L121.235 164.567L102.485 175.393L83.7354 164.567L83.5 164.431V143.538L102.485 132.576L121.471 143.538Z' fill='#D1D8FB' stroke='white'/>
</svg>
Step 4 - create a legend frame
Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "horcont_legend_performance" with these properties:
⁠
Screenshot 2025-04-18 at 7.24.58.png
⁠
⁠
Add 5x new Rectangle (R command) objects, call them "html_one/two/three/four/five_divider" with these properties:
⁠
Screenshot 2025-04-18 at 7.27.12.png
⁠
⁠
⁠
Screenshot 2025-04-18 at 7.27.26.png
⁠
⁠
⁠
Screenshot 2025-04-18 at 7.27.38.png
⁠
⁠
⁠
Screenshot 2025-04-18 at 7.27.53.png
⁠
⁠
⁠
Screenshot 2025-04-18 at 7.28.08.png
⁠
⁠
Add 5x new Text (T command), call them "lbl_first/second/third/fourth/fifth_value" with these properties:
⁠
Screenshot 2025-04-18 at 7.29.32.png
⁠
⁠

This is an output:
⁠
Screenshot 2025-04-18 at 7.13.07.png
⁠
⁠

How to use it via DesignKit

Prerequisites

the designed component according to the instructions from the previous section

Used Prefixes

vercont_performance_chart = Vertical Container
svg_performance_content = Image
horcont_legend_performance = Horizontal Container
lbl_title_performance = Label
html_one_divider = HTML Text

YAML Output

⁠
output.png
⁠
⁠

Used Colours

Background - #FFFFFF
Text colour - #000000
Legend colours - #A2AFF7, #C171F7, #D1D8FB, #EBEDFD, #F4BC47

⁠
← Password Generator
⁠
⁠
⁠
Picture Uploader →
⁠
⁠
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.