Back to LibraryCharts
Area Chart - Legend
Added Jun 14, 2026
A stacked area chart with two smooth data series and a legend. Inspired by the shadcn/ui Area Chart with Legend.
Dark Mode
Area Chart - Legend
Showing total visitors for the last 6 months
Category 2
Category 1
Trending up by 5.2% this month
January - June 2024
CopySnips Live Preview
How to Use
- Create a collection: ClearCollect(colAreaChartLegendData, {month: "January", Category1: 186, Category2: 80}, ...)
- Paste the copied YAML into Power Apps Studio (Ctrl+V).
- On your screen's OnVisible, add: Set(varChartAnimate, true); Set(varTooltipLegendIdx, 0)
- To replay animation: Set(varChartAnimate, false); ClearCollect(...); Set(varChartAnimate, true)
Problem Solved
Renders a two-series stacked SVG area chart with smooth bezier curves inside a Power Apps Image control. Blue = Category 1, Purple = Category 2.
Integration
Bind colAreaChartLegendData to any data source with {month, Category1, Category2} columns.
YAML Code
- conAreaChartLegend:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
BorderColor: =RGBA(226, 232, 240, 1)
BorderStyle: =BorderStyle.Solid
BorderThickness: =1
DropShadow: =DropShadow.Regular
Fill: =RGBA(255, 255, 255, 1)
Height: =350
RadiusBottomLeft: =12
RadiusBottomRight: =12
RadiusTopLeft: =12
RadiusTopRight: =12
Width: =440
Children:
- tmrChartAnimate:
Control: Timer@2.0.0
Properties:
Duration: =1200
Height: =1
OnTimerEnd: =Set(varChartAnimate, false)
Repeat: =false
Start: =varChartAnimate
Visible: =false
Width: =1
X: =0
Y: =0
- lblChartTitle:
Control: Label@2.5.1
Properties:
Color: =RGBA(15, 23, 42, 1)
Font: =Font.'Open Sans'
FontWeight: =FontWeight.Bold
Height: =24
Size: =14
Text: ="Area Chart - Legend"
Width: =400
X: =20
Y: =14
- lblChartDescription:
Control: Label@2.5.1
Properties:
Color: =RGBA(100, 116, 139, 1)
Font: =Font.'Open Sans'
Height: =20
Size: =12
Text: ="Showing total visitors for the last 6 months"
Width: =400
X: =20
Y: =44
- rectHeaderLine:
Control: Rectangle@2.3.0
Properties:
Fill: =RGBA(226, 232, 240, 1)
Height: =1
Width: =440
X: =0
Y: =72
- imgAreaChart:
Control: Image@2.2.3
Properties:
Height: =176
Width: =416
X: =12
Y: =80
Image: |-
=With(
{
_n: CountRows(colAreaChartLegendData),
_p: Min(1, tmrChartAnimate.Value / 1200)
},
With(
{
_range: Max(1, Max(Max(colAreaChartLegendData, Category1), Max(colAreaChartLegendData, Category2))),
_step: 400 / Max(1, _n - 1),
_ease: 1 - Power(Max(0, 1 - _p), 3)
},
"data:image/svg+xml;utf8, " & EncodeUrl(
"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 416 176'>" &
"<line x1='8' y1='8' x2='408' y2='8' stroke='#e2e8f0' stroke-width='1'/>" &
"<line x1='8' y1='41' x2='408' y2='41' stroke='#e2e8f0' stroke-width='1'/>" &
"<line x1='8' y1='74' x2='408' y2='74' stroke='#e2e8f0' stroke-width='1'/>" &
"<line x1='8' y1='107' x2='408' y2='107' stroke='#e2e8f0' stroke-width='1'/>" &
"<line x1='8' y1='140' x2='408' y2='140' stroke='#e2e8f0' stroke-width='1'/>" &
"<path fill='#3b82f6' fill-opacity='0.4' d='" &
Concat(Sequence(_n),
If(Value = 1,
"M " & Text(Round(8, 1)) & "," & Text(Round(140 - Index(colAreaChartLegendData, 1).Category1 / _range * 132 * _ease, 1)),
" C " &
Text(Round(8 + (Value - 2) * _step + _step * 0.4, 1)) & "," &
Text(Round(140 - Index(colAreaChartLegendData, Max(1, Value - 1)).Category1 / _range * 132 * _ease, 1)) & " " &
Text(Round(8 + (Value - 1) * _step - _step * 0.4, 1)) & "," &
Text(Round(140 - Index(colAreaChartLegendData, Value).Category1 / _range * 132 * _ease, 1)) & " " &
Text(Round(8 + (Value - 1) * _step, 1)) & "," &
Text(Round(140 - Index(colAreaChartLegendData, Value).Category1 / _range * 132 * _ease, 1))
)
) &
" L " & Text(Round(8 + (_n - 1) * _step, 1)) & ",140 L 8,140 Z'/>" &
"<path fill='none' stroke='#3b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='" &
Concat(Sequence(_n),
If(Value = 1,
"M " & Text(Round(8, 1)) & "," & Text(Round(140 - Index(colAreaChartLegendData, 1).Category1 / _range * 132 * _ease, 1)),
" C " &
Text(Round(8 + (Value - 2) * _step + _step * 0.4, 1)) & "," &
Text(Round(140 - Index(colAreaChartLegendData, Max(1, Value - 1)).Category1 / _range * 132 * _ease, 1)) & " " &
Text(Round(8 + (Value - 1) * _step - _step * 0.4, 1)) & "," &
Text(Round(140 - Index(colAreaChartLegendData, Value).Category1 / _range * 132 * _ease, 1)) & " " &
Text(Round(8 + (Value - 1) * _step, 1)) & "," &
Text(Round(140 - Index(colAreaChartLegendData, Value).Category1 / _range * 132 * _ease, 1))
)
) &
"'/>" &
"<path fill='#a855f7' fill-opacity='0.4' d='" &
Concat(Sequence(_n),
If(Value = 1,
"M " & Text(Round(8, 1)) & "," & Text(Round(140 - Index(colAreaChartLegendData, 1).Category2 / _range * 132 * _ease, 1)),
" C " &
Text(Round(8 + (Value - 2) * _step + _step * 0.4, 1)) & "," &
Text(Round(140 - Index(colAreaChartLegendData, Max(1, Value - 1)).Category2 / _range * 132 * _ease, 1)) & " " &
Text(Round(8 + (Value - 1) * _step - _step * 0.4, 1)) & "," &
Text(Round(140 - Index(colAreaChartLegendData, Value).Category2 / _range * 132 * _ease, 1)) & " " &
Text(Round(8 + (Value - 1) * _step, 1)) & "," &
Text(Round(140 - Index(colAreaChartLegendData, Value).Category2 / _range * 132 * _ease, 1))
)
) &
" L " & Text(Round(8 + (_n - 1) * _step, 1)) & ",140 L 8,140 Z'/>" &
"<path fill='none' stroke='#a855f7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='" &
Concat(Sequence(_n),
If(Value = 1,
"M " & Text(Round(8, 1)) & "," & Text(Round(140 - Index(colAreaChartLegendData, 1).Category2 / _range * 132 * _ease, 1)),
" C " &
Text(Round(8 + (Value - 2) * _step + _step * 0.4, 1)) & "," &
Text(Round(140 - Index(colAreaChartLegendData, Max(1, Value - 1)).Category2 / _range * 132 * _ease, 1)) & " " &
Text(Round(8 + (Value - 1) * _step - _step * 0.4, 1)) & "," &
Text(Round(140 - Index(colAreaChartLegendData, Value).Category2 / _range * 132 * _ease, 1)) & " " &
Text(Round(8 + (Value - 1) * _step, 1)) & "," &
Text(Round(140 - Index(colAreaChartLegendData, Value).Category2 / _range * 132 * _ease, 1))
)
) &
"'/>" &
If(varTooltipLegendIdx > 0,
"<circle cx='" & Text(Round(8 + (varTooltipLegendIdx - 1) * _step, 1)) &
"' cy='" & Text(Round(140 - Index(colAreaChartLegendData, varTooltipLegendIdx).Category1 / _range * 132 * _ease, 1)) &
"' r='4' fill='#3b82f6' stroke='white' stroke-width='2'/>" &
"<circle cx='" & Text(Round(8 + (varTooltipLegendIdx - 1) * _step, 1)) &
"' cy='" & Text(Round(140 - Index(colAreaChartLegendData, varTooltipLegendIdx).Category2 / _range * 132 * _ease, 1)) &
"' r='4' fill='#a855f7' stroke='white' stroke-width='2'/>",
""
) &
Concat(Sequence(_n),
"<text x='" & Text(Round(8 + (Value - 1) * _step, 1)) &
"' y='163' text-anchor='middle' font-family='Arial,sans-serif' font-size='11' fill='#94a3b8'>" &
Left(Index(colAreaChartLegendData, Value).month, 3) & "</text>"
) &
"</svg>"
)
)
)
- galChartInteract:
Control: Gallery@2.15.0
Variant: Horizontal
Properties:
Fill: =RGBA(0, 0, 0, 0)
Height: =140
Items: =Sequence(CountRows(colAreaChartLegendData))
ShowScrollbar: =false
TemplatePadding: =0
TemplateSize: =Parent.Width / Max(1, CountRows(colAreaChartLegendData))
Width: =416
X: =12
Y: =83
Children:
- btnChartHit:
Control: Button@0.0.45
Properties:
Appearance: ='ButtonCanvas.Appearance'.Transparent
Height: =Parent.TemplateHeight
OnSelect: =If(varTooltipLegendIdx = ThisItem.Value, Set(varTooltipLegendIdx, 0), Set(varTooltipLegendIdx, ThisItem.Value))
Text: =""
Width: =Parent.TemplateWidth
X: =0
Y: =0
- rectTooltipLine:
Control: Rectangle@2.3.0
Properties:
Fill: =RGBA(100, 116, 139, 0.5)
Height: =140
Visible: =varTooltipLegendIdx > 0
Width: =1
X: =12 + 8 + (varTooltipLegendIdx - 1) * (400 / Max(1, CountRows(colAreaChartLegendData) - 1))
Y: =83
- conTooltip:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
BorderColor: =RGBA(226, 232, 240, 1)
BorderStyle: =BorderStyle.Solid
BorderThickness: =1
DropShadow: =DropShadow.Regular
Fill: =RGBA(255, 255, 255, 1)
Height: =72
RadiusBottomLeft: =8
RadiusBottomRight: =8
RadiusTopLeft: =8
RadiusTopRight: =8
Visible: =varTooltipLegendIdx > 0
Width: =120
X: =Max(8, Min(312, 12 + 8 + (varTooltipLegendIdx - 1) * (400 / Max(1, CountRows(colAreaChartLegendData) - 1)) - 60))
Y: =86
Children:
- lblTooltipMonth:
Control: Label@2.5.1
Properties:
Color: =RGBA(100, 116, 139, 1)
Font: =Font.'Open Sans'
Height: =16
Size: =10
Text: =If(varTooltipLegendIdx > 0, Index(colAreaChartLegendData, varTooltipLegendIdx).month, "")
Width: =104
X: =8
Y: =6
- imgDotCategory1:
Control: Image@2.2.3
Properties:
Fill: =RGBA(59, 130, 246, 1)
Height: =8
Image: =Blank()
RadiusBottomLeft: =4
RadiusBottomRight: =4
RadiusTopLeft: =4
RadiusTopRight: =4
Width: =3
X: =8
Y: =28
- lblCategory1Value:
Control: Label@2.5.1
Properties:
Color: =RGBA(15, 23, 42, 1)
Font: =Font.'Open Sans'
FontWeight: =FontWeight.Semibold
Height: =16
Size: =11
Text: =If(varTooltipLegendIdx > 0, Text(Index(colAreaChartLegendData, varTooltipLegendIdx).Category1), "")
Width: =96
X: =16
Y: =26
- imgDotCategory2:
Control: Image@2.2.3
Properties:
Fill: =RGBA(168, 85, 247, 1)
Height: =8
Image: =Blank()
RadiusBottomLeft: =4
RadiusBottomRight: =4
RadiusTopLeft: =4
RadiusTopRight: =4
Width: =3
X: =8
Y: =50
- lblCategory2Value:
Control: Label@2.5.1
Properties:
Color: =RGBA(15, 23, 42, 1)
Font: =Font.'Open Sans'
FontWeight: =FontWeight.Semibold
Height: =16
Size: =11
Text: =If(varTooltipLegendIdx > 0, Text(Index(colAreaChartLegendData, varTooltipLegendIdx).Category2), "")
Width: =96
X: =16
Y: =48
- imgLegendDotCategory1:
Control: Image@2.2.3
Properties:
Fill: =RGBA(59, 130, 246, 1)
Height: =10
Image: =Blank()
RadiusBottomLeft: =5
RadiusBottomRight: =5
RadiusTopLeft: =5
RadiusTopRight: =5
Width: =10
X: =117
Y: =269
- lblLegendCategory1:
Control: Label@2.5.1
Properties:
Color: =RGBA(100, 116, 139, 1)
Font: =Font.'Open Sans'
Height: =18
Size: =11
Text: ="Category 1"
Width: =85
X: =131
Y: =267
- imgLegendDotCategory2:
Control: Image@2.2.3
Properties:
Fill: =RGBA(168, 85, 247, 1)
Height: =10
Image: =Blank()
RadiusBottomLeft: =5
RadiusBottomRight: =5
RadiusTopLeft: =5
RadiusTopRight: =5
Width: =10
X: =224
Y: =269
- lblLegendCategory2:
Control: Label@2.5.1
Properties:
Color: =RGBA(100, 116, 139, 1)
Font: =Font.'Open Sans'
Height: =18
Size: =11
Text: ="Category 2"
Width: =85
X: =238
Y: =267
- rectFooterLine:
Control: Rectangle@2.3.0
Properties:
Fill: =RGBA(226, 232, 240, 1)
Height: =1
Width: =440
X: =0
Y: =294
- lblTrendText:
Control: Label@2.5.1
Properties:
Color: =RGBA(15, 23, 42, 1)
Font: =Font.'Open Sans'
FontWeight: =FontWeight.Semibold
Height: =20
Size: =12
Text: ="Trending up by 5.2% this month"
Width: =400
X: =20
Y: =305
- lblDateRange:
Control: Label@2.5.1
Properties:
Color: =RGBA(100, 116, 139, 1)
Font: =Font.'Open Sans'
Height: =20
Size: =11
Text: ="January - June 2024"
Width: =400
X: =20
Y: =329Implementation
Copies the customized component code directly to your clipboard. Use Ctrl+V in Power Apps Studio.
Something not pasting right? Troubleshooting guide