Charts

Area Chart - Linear

Added Jun 14, 2026

A sharp-line area chart powered by a Power Apps collection. Inspired by the shadcn/ui Area Chart: card layout with header, animated SVG area with L-path commands, and footer trend indicator.

Area Chart - Linear

Showing total visitors for the last 6 months

Trending up by 5.2% this month

January - June 2024

CopySnips Live Preview

How to Use

Create a collection: ClearCollect(colAreaChartData, {month: "January", Value: 186}, ...)
Paste the copied YAML into Power Apps Studio (Ctrl+V).
On your screen's OnVisible, add: Set(varChartAnimate, true)
To replay the animation from a button: Set(varChartAnimate, false); ClearCollect(...); Set(varChartAnimate, true)

Problem Solved

Renders a dynamic SVG area chart inside a Power Apps Image control with a smooth grow-up animation driven by a hidden Timer.

Integration

Bind colAreaChartData to any data source using ClearCollect. The chart redraws automatically on data change.

- conAreaChart:
    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: =320
      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 - Linear"
            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(colAreaChartData),
                  _min: Min(colAreaChartData, Value),
                  _max: Max(colAreaChartData, Value),
                  _p: Min(1, tmrChartAnimate.Value / 1200)
                },
                With(
                  {
                    _range: Max(1, _max - _min),
                    _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 ", " L ") &
                      Text(Round(8 + (Value - 1) * _step, 1)) & "," &
                      Text(Round(140 - (Index(colAreaChartData, Value).Value - _min) / _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' d='" &
                    Concat(Sequence(_n),
                      If(Value = 1, "M ", " L ") &
                      Text(Round(8 + (Value - 1) * _step, 1)) & "," &
                      Text(Round(140 - (Index(colAreaChartData, Value).Value - _min) / _range * 132 * _ease, 1))
                    ) &
                    "'/>" &
                    If(varTooltipIdx > 0,
                      "<circle cx='" & Text(Round(8 + (varTooltipIdx - 1) * _step, 1)) &
                      "' cy='" & Text(Round(140 - (Index(colAreaChartData, varTooltipIdx).Value - _min) / _range * 132 * _ease, 1)) &
                      "' r='4' fill='#3b82f6' 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(colAreaChartData, 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(colAreaChartData))
            ShowScrollbar: =false
            TemplatePadding: =0
            TemplateSize: =Parent.Width / Max(1, CountRows(colAreaChartData))
            Width: =416
            X: =12
            Y: =83
          Children:
            - btnChartHit:
                Control: Button@0.0.45
                Properties:
                  Appearance: ='ButtonCanvas.Appearance'.Transparent
                  Height: =Parent.TemplateHeight
                  OnSelect: =If(varTooltipIdx = ThisItem.Value, Set(varTooltipIdx, 0), Set(varTooltipIdx, 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: =varTooltipIdx > 0
            Width: =1
            X: =12 + 8 + (varTooltipIdx - 1) * (400 / Max(1, CountRows(colAreaChartData) - 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: =50
            RadiusBottomLeft: =8
            RadiusBottomRight: =8
            RadiusTopLeft: =8
            RadiusTopRight: =8
            Visible: =varTooltipIdx > 0
            Width: =110
            X: =Max(8, Min(322, 12 + 8 + (varTooltipIdx - 1) * (400 / Max(1, CountRows(colAreaChartData) - 1)) - 55))
            Y: =86
          Children:
            - lblTooltipMonth:
                Control: Label@2.5.1
                Properties:
                  Color: =RGBA(100, 116, 139, 1)
                  Font: =Font.'Open Sans'
                  Height: =18
                  Size: =10
                  Text: =If(varTooltipIdx > 0, Index(colAreaChartData, varTooltipIdx).month, "")
                  Width: =100
                  X: =8
                  Y: =5
            - imgTooltipDot:
                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
            - lblTooltipValue:
                Control: Label@2.5.1
                Properties:
                  Color: =RGBA(15, 23, 42, 1)
                  Font: =Font.'Open Sans'
                  FontWeight: =FontWeight.Semibold
                  Height: =18
                  Size: =11
                  Text: =If(varTooltipIdx > 0, Text(Index(colAreaChartData, varTooltipIdx).Value), "")
                  Width: =90
                  X: =16
                  Y: =26
      - rectFooterLine:
          Control: Rectangle@2.3.0
          Properties:
            Fill: =RGBA(226, 232, 240, 1)
            Height: =1
            Width: =440
            X: =0
            Y: =259
      - 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: =270
      - 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: =296

Implementation

Copies the customized component code directly to your clipboard. Use Ctrl+V in Power Apps Studio.

Something not pasting right? Troubleshooting guide

Area Chart - Linear

Card Content

How to Use

Problem Solved

Integration

YAML Code

Implementation