Charts

Radial Chart - Text

Added Jun 20, 2026

An animated radial (arc) chart with a center value and label, a grow animation from 0 to the target value, and a thin progress ring track. Powered by a Power Apps Image control. Inspired by the shadcn/ui Radial Chart - Text.

Radial Chart - Text

January - June 2024

200Visitors

Trending up by 5.2% this month

Showing total visitors for the last 6 months

CopySnips Live Preview

How to Use

On your screen's OnVisible, add: Set(varRdlTxtAnimate, true)
Paste the copied YAML into Power Apps Studio (Ctrl+V).
The arc ring grows from 0 to the configured value over 1.2 seconds.
To replay the animation: Set(varRdlTxtAnimate, false); Set(varRdlTxtAnimate, true)
Change the Value and Max Value settings to control how much of the ring fills. For example, Value=150, Max Value=200 fills 75% of the ring.

Problem Solved

Renders an animated radial progress ring with a center numeric value inside a Power Apps Image control. Uses SVG arc paths with Cos()/Sin() for the animated fill arc endpoint, and easing via a cubic-out curve driven by a Timer control.

Integration

Set Value and Max Value in the component settings to control the fill percentage. The ring sweeps 250° for a full value (value = maxValue). All text and colors are configurable.

- conRdlTxtChart:
    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: =336
      RadiusBottomLeft: =12
      RadiusBottomRight: =12
      RadiusTopLeft: =12
      RadiusTopRight: =12
      Width: =448
    Children:
      - tmrRdlTxtAnimate:
          Control: Timer@2.1.0
          Properties:
            Duration: =1200
            Height: =1
            OnTimerEnd: =Set(varRdlTxtAnimate, false)
            Repeat: =false
            Start: =varRdlTxtAnimate
            Visible: =false
            Width: =1
            X: =0
            Y: =0
      - lblRdlTxtTitle:
          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: ="Radial Chart - Text"
            Width: =408
            X: =20
            Y: =14
      - lblRdlTxtDesc:
          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: =408
            X: =20
            Y: =44
      - rectRdlTxtHeader:
          Control: Rectangle@2.3.0
          Properties:
            Fill: =RGBA(226, 232, 240, 1)
            Height: =1
            Width: =448
            X: =0
            Y: =68
      - imgRdlTxtChart:
          Control: Image@2.2.3
          Properties:
            Height: =200
            Width: =416
            X: =16
            Y: =72
            Image: |-
              =With(
                {
                  _v:   Value(200),
                  _max: Max(1, Value(200)),
                  _p:   Min(1, tmrRdlTxtAnimate.Value / 1200),
                  _col: "#3b82f6"
                },
                With(
                  { _ease: 1 - Power(Max(0, 1 - _p), 3) },
                  With(
                    { _fill: Int(Round(_ease * Min(1, _v / _max) * 415, 0)) },
                    "data:image/svg+xml;utf8, " & EncodeUrl(
                      "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 30 416 200'>" &
                      "<circle cx='208' cy='135' r='66' fill='none' stroke='#e2e8f0' stroke-width='14'/>" &
                      If(_fill > 0,
                        "<circle cx='208' cy='135' r='66' fill='none' stroke='" & _col & "' stroke-width='14' stroke-linecap='round' stroke-dasharray='" & Text(_fill, "0") & " " & Text(415 - _fill, "0") & "' transform='rotate(-90 208 135)'/>",
                        ""
                      ) &
                      "<text x='208' y='130' text-anchor='middle' dominant-baseline='middle' font-family='Arial,sans-serif' font-size='32' font-weight='bold' fill='#0f172a'>" & Text(Int(_v), "0") & "</text>" &
                      "<text x='208' y='162' text-anchor='middle' font-family='Arial,sans-serif' font-size='12' fill='#64748b'>" & "Visitors" & "</text>" &
                      "</svg>"
                    )
                  )
                )
              )
      - rectRdlTxtFooter:
          Control: Rectangle@2.3.0
          Properties:
            Fill: =RGBA(226, 232, 240, 1)
            Height: =1
            Width: =448
            X: =0
            Y: =276
      - lblRdlTxtTrend:
          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: =408
            X: =20
            Y: =284
      - lblRdlTxtDateRange:
          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: =408
            X: =20
            Y: =308

Implementation

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

Something not pasting right? Troubleshooting guide

Radial Chart - Text

Card Content

Chart Color

How to Use

Problem Solved

Integration

Implementation

Radial Chart - Text

Card Content

Chart Color

How to Use

Problem Solved

Integration

YAML Code

Implementation