Charts

Pie Chart - Label List

Added Jun 17, 2026

A pie chart with category labels rendered inside each slice, a clock-sweep animation, and click-to-reveal tooltips via the legend. Powered by a Power Apps collection. Inspired by the shadcn/ui Pie Chart - Label List.

January - June 2024

Trending up by 5.2% this month

Showing total visitors for the last 6 months

CopySnips Live Preview

How to Use

Create the collection: ClearCollect(colPieLblData, {label: "Chrome", value: 275}, {label: "Safari", value: 200}, {label: "Firefox", value: 187}, {label: "Edge", value: 173}, {label: "Other", value: 90})
On your screen's OnVisible, add: Set(varPieLblAnimate, true); Set(varTooltipPieLblIdx, 0)
Paste the copied YAML into Power Apps Studio (Ctrl+V).
The pie sweeps in from 12 o'clock. Labels appear inside each slice once its animation completes. Click a legend item to highlight the slice and show a tooltip.
To replay the animation: Set(varPieLblAnimate, false); Set(varPieLblAnimate, true)
Replace colPieLblData with any data source that has {label, value} columns.

Problem Solved

Renders an animated SVG pie chart with in-slice category labels and an interactive legend inside a Power Apps Image control.

Integration

Bind colPieLblData to any data source with {label, value} columns. The chart redraws automatically when the collection changes.

- conPieLblChart:
    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: =390
      RadiusBottomLeft: =12
      RadiusBottomRight: =12
      RadiusTopLeft: =12
      RadiusTopRight: =12
      Width: =440
    Children:
      - tmrPieLblAnimate:
          Control: Timer@2.1.0
          Properties:
            Duration: =1200
            Height: =1
            OnTimerEnd: =Set(varPieLblAnimate, false)
            Repeat: =false
            Start: =varPieLblAnimate
            Visible: =false
            Width: =1
            X: =0
            Y: =0
      - lblPieLblTitle:
          Control: Label@2.5.1
          Properties:
            Align: =Align.Center
            Color: =RGBA(15, 23, 42, 1)
            Font: =Font.'Open Sans'
            FontWeight: =FontWeight.Bold
            Height: =24
            Size: =14
            Text: ="Pie Chart - Label List"
            Width: =400
            X: =20
            Y: =14
      - lblPieLblDesc:
          Control: Label@2.5.1
          Properties:
            Align: =Align.Center
            Color: =RGBA(100, 116, 139, 1)
            Font: =Font.'Open Sans'
            Height: =20
            Size: =12
            Text: ="January - June 2024"
            Width: =400
            X: =20
            Y: =44
      - rectPieLblHeader:
          Control: Rectangle@2.3.0
          Properties:
            Fill: =RGBA(226, 232, 240, 1)
            Height: =1
            Width: =440
            X: =0
            Y: =68
      - imgPieLblChart:
          Control: Image@2.2.3
          Properties:
            Height: =216
            Width: =416
            X: =12
            Y: =72
            Image: |-
              =With(
                {
                  _n:     CountRows(colPieLblData),
                  _total: Sum(colPieLblData, value),
                  _p:     Min(1, tmrPieLblAnimate.Value / 1200)
                },
                With(
                  { _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 216'>" &
                    Concat(Sequence(_n),
                      With(
                        {
                          _cf: Sum(FirstN(colPieLblData, Value - 1), value) / _total,
                          _tf: Index(colPieLblData, Value).value / _total
                        },
                        With(
                          {
                            _sf: _cf,
                            _ef: Min(_cf + _tf, _ease)
                          },
                          If(_sf < _ease And _ef - _sf > 0.001,
                            With(
                              {
                                _sa: _sf * 2 * Pi() - Pi() / 2,
                                _ea: _ef * 2 * Pi() - Pi() / 2,
                                _df: _ef - _sf
                              },
                              With(
                                {
                                  _x1:  Text(Round(208 + 96 * Cos(_sa), 1)),
                                  _y1:  Text(Round(108 + 96 * Sin(_sa), 1)),
                                  _x2:  Text(Round(208 + 96 * Cos(_ea), 1)),
                                  _y2:  Text(Round(108 + 96 * Sin(_ea), 1)),
                                  _la:  If(_df > 0.5, "1", "0"),
                                  _col: Switch(Value, 1, "#3b82f6", 2, "#10b981", 3, "#f59e0b", 4, "#8b5cf6", "#6b7280"),
                                  _str: If(varTooltipPieLblIdx = Value, " stroke='white' stroke-width='3'", "")
                                },
                                "<path d='M 208,108 L " & _x1 & "," & _y1 &
                                " A 96,96 0 " & _la & ",1 " & _x2 & "," & _y2 &
                                " Z' fill='" & _col & "'" & _str & "/>" &
                                If(_ease >= _cf + _tf And _tf > 0.05,
                                  With(
                                    { _ma: (_cf + _tf / 2) * 2 * Pi() - Pi() / 2 },
                                    "<text x='" & Text(Round(208 + 58 * Cos(_ma), 1)) &
                                    "' y='" & Text(Round(108 + 58 * Sin(_ma) + 4, 1)) &
                                    "' text-anchor='middle' font-family='Arial,sans-serif' font-size='11' font-weight='600' fill='white'>" &
                                    Index(colPieLblData, Value).label & "</text>"
                                  ),
                                  ""
                                )
                              )
                            ),
                            ""
                          )
                        )
                      )
                    ) &
                    "</svg>"
                  )
                )
              )
      - galPieLblLegend:
          Control: Gallery@2.15.0
          Variant: Horizontal
          Properties:
            Fill: =RGBA(0, 0, 0, 0)
            Height: =36
            Items: =Sequence(CountRows(colPieLblData))
            ShowScrollbar: =false
            TemplatePadding: =0
            TemplateSize: =440 / Max(1, CountRows(colPieLblData))
            Width: =440
            X: =0
            Y: =296
          Children:
            - imgPieLblLegDot:
                Control: Image@2.2.3
                Properties:
                  Fill: =Switch(ThisItem.Value, 1, RGBA(59, 130, 246, 1), 2, RGBA(16, 185, 129, 1), 3, RGBA(245, 158, 11, 1), 4, RGBA(139, 92, 246, 1), RGBA(107, 114, 128, 1))
                  Height: =10
                  Image: =Blank()
                  RadiusBottomLeft: =5
                  RadiusBottomRight: =5
                  RadiusTopLeft: =5
                  RadiusTopRight: =5
                  Width: =10
                  X: =14
                  Y: =13
            - lblPieLblLegLabel:
                Control: Label@2.5.1
                Properties:
                  Color: =RGBA(15, 23, 42, 1)
                  Font: =Font.'Open Sans'
                  Height: =14
                  Size: =10
                  Text: =Index(colPieLblData, ThisItem.Value).label
                  Width: =62
                  X: =28
                  Y: =11
            - btnPieLblLegHit:
                Control: Button@0.0.45
                Properties:
                  Appearance: ='ButtonCanvas.Appearance'.Transparent
                  Height: =Parent.TemplateHeight
                  OnSelect: =If(varTooltipPieLblIdx = ThisItem.Value, Set(varTooltipPieLblIdx, 0), Set(varTooltipPieLblIdx, ThisItem.Value))
                  Text: =""
                  Width: =Parent.TemplateWidth
                  X: =0
                  Y: =0
      - conPieLblTooltip:
          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: =varTooltipPieLblIdx > 0
            Width: =130
            X: =Max(10, Min(300, (varTooltipPieLblIdx - 1) * (440 / Max(1, CountRows(colPieLblData))) + 22 - 65))
            Y: =218
          Children:
            - lblTooltipPieLblLabel:
                Control: Label@2.5.1
                Properties:
                  Color: =RGBA(100, 116, 139, 1)
                  Font: =Font.'Open Sans'
                  FontWeight: =FontWeight.Semibold
                  Height: =18
                  Size: =10
                  Text: =If(varTooltipPieLblIdx > 0, Index(colPieLblData, varTooltipPieLblIdx).label, "")
                  Width: =116
                  X: =8
                  Y: =6
            - imgTooltipPieLblDot:
                Control: Image@2.2.3
                Properties:
                  Fill: =Switch(varTooltipPieLblIdx, 1, RGBA(59, 130, 246, 1), 2, RGBA(16, 185, 129, 1), 3, RGBA(245, 158, 11, 1), 4, RGBA(139, 92, 246, 1), RGBA(107, 114, 128, 1))
                  Height: =8
                  Image: =Blank()
                  RadiusBottomLeft: =4
                  RadiusBottomRight: =4
                  RadiusTopLeft: =4
                  RadiusTopRight: =4
                  Width: =8
                  X: =8
                  Y: =30
            - lblTooltipPieLblValue:
                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(varTooltipPieLblIdx > 0, Text(Index(colPieLblData, varTooltipPieLblIdx).value), "")
                  Width: =108
                  X: =20
                  Y: =28
            - lblTooltipPieLblPct:
                Control: Label@2.5.1
                Properties:
                  Color: =RGBA(100, 116, 139, 1)
                  Font: =Font.'Open Sans'
                  Height: =18
                  Size: =10
                  Text: =If(varTooltipPieLblIdx > 0, Text(Round(Index(colPieLblData, varTooltipPieLblIdx).value / Max(1, Sum(colPieLblData, value)) * 100, 1)) & "% of total", "")
                  Width: =116
                  X: =8
                  Y: =50
      - rectPieLblFooter:
          Control: Rectangle@2.3.0
          Properties:
            Fill: =RGBA(226, 232, 240, 1)
            Height: =1
            Width: =440
            X: =0
            Y: =340
      - lblPieLblTrend:
          Control: Label@2.5.1
          Properties:
            Align: =Align.Center
            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: =350
      - lblPieLblDateRange:
          Control: Label@2.5.1
          Properties:
            Align: =Align.Center
            Color: =RGBA(100, 116, 139, 1)
            Font: =Font.'Open Sans'
            Height: =20
            Size: =11
            Text: ="Showing total visitors for the last 6 months"
            Width: =400
            X: =20
            Y: =374

Implementation

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

Something not pasting right? Troubleshooting guide

Pie Chart - Label List

Card Content

Slice Colors

How to Use

Problem Solved

Integration

Implementation

Pie Chart - Label List

Card Content

Slice Colors

How to Use

Problem Solved

Integration

YAML Code

Implementation