Charts

Radial Chart - Shape

Added Jun 20, 2026

An animated radial chart with a bold thick arc (28px ring, 100° sweep) that gives it a distinctive shape character. Features a center numeric value and label, animated grow effect, and a short arc track. Powered by a Power Apps Image control. Inspired by the shadcn/ui Radial Chart - Shape.

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(varRdlShpAnimate, true)
Paste the copied YAML into Power Apps Studio (Ctrl+V).
The thick arc grows from 0 to the configured value over 1.2 seconds.
To replay the animation: Set(varRdlShpAnimate, false); Set(varRdlShpAnimate, true)
Change the Value and Max Value settings to control how much of the arc fills. The arc sweeps 100° at full value (value = maxValue).

Problem Solved

Renders an animated thick radial arc chart with center text in a Power Apps Image control. Uses a 28px stroke-width and 100° sweep to create a bold, distinctive shape. SVG arc endpoint computed with Cos()/Sin() and Int() for locale-safe integer coordinates.

Integration

Set Value and Max Value to control the fill percentage. Arc sweeps 100° at full value. All text and colors are configurable. Use Text(Int(_v), "#,##0") to display values like "1,260" with thousand separators.

- conRdlShpChart:
    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:
      - tmrRdlShpAnimate:
          Control: Timer@2.1.0
          Properties:
            Duration: =1200
            Height: =1
            OnTimerEnd: =Set(varRdlShpAnimate, false)
            Repeat: =false
            Start: =varRdlShpAnimate
            Visible: =false
            Width: =1
            X: =0
            Y: =0
      - lblRdlShpTitle:
          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 - Shape"
            Width: =408
            X: =20
            Y: =14
      - lblRdlShpDesc:
          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
      - rectRdlShpHeader:
          Control: Rectangle@2.3.0
          Properties:
            Fill: =RGBA(226, 232, 240, 1)
            Height: =1
            Width: =448
            X: =0
            Y: =68
      - imgRdlShpChart:
          Control: Image@2.2.3
          Properties:
            Height: =200
            Width: =416
            X: =16
            Y: =72
            Image: |-
              =With(
                {
                  _v:   Value(200),
                  _max: Max(1, Value(400)),
                  _p:   Min(1, tmrRdlShpAnimate.Value / 1200),
                  _col: "#3b82f6"
                },
                With(
                  { _ease: 1 - Power(Max(0, 1 - _p), 3) },
                  With(
                    { _deg: _ease * Min(1, _v / _max) * 270 },
                    With(
                    { _ang: Radians(135 + _deg) },
                    "data:image/svg+xml;utf8, " & EncodeUrl(
                      "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 20 416 200'>" &
                      "<path d='M 141 202 A 95 95 0 0 1 275 68 A 95 95 0 0 1 275 202 L 254 181 A 65 65 0 0 0 254 89 A 65 65 0 0 0 162 181 Z' fill='#e2e8f0'/>" &
                      If(_deg > 0.5,
                        If(_deg > 180,
                          "<path d='M 141 202 A 95 95 0 0 1 275 68 A 95 95 0 0 1 " &
                          Text(Int(Round(208 + 95 * Cos(_ang), 0)), "0") & " " &
                          Text(Int(Round(135 + 95 * Sin(_ang), 0)), "0") & " L " &
                          Text(Int(Round(208 + 65 * Cos(_ang), 0)), "0") & " " &
                          Text(Int(Round(135 + 65 * Sin(_ang), 0)), "0") &
                          " A 65 65 0 0 0 254 89 A 65 65 0 0 0 162 181 Z' fill='" & _col & "'/>",
                          "<path d='M 141 202 A 95 95 0 0 1 " &
                          Text(Int(Round(208 + 95 * Cos(_ang), 0)), "0") & " " &
                          Text(Int(Round(135 + 95 * Sin(_ang), 0)), "0") & " L " &
                          Text(Int(Round(208 + 65 * Cos(_ang), 0)), "0") & " " &
                          Text(Int(Round(135 + 65 * Sin(_ang), 0)), "0") &
                          " A 65 65 0 0 0 162 181 Z' fill='" & _col & "'/>"
                        ),
                        ""
                      ) &
                      "<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>"
                    ))
                  )
                )
              )
      - rectRdlShpFooter:
          Control: Rectangle@2.3.0
          Properties:
            Fill: =RGBA(226, 232, 240, 1)
            Height: =1
            Width: =448
            X: =0
            Y: =276
      - lblRdlShpTrend:
          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
      - lblRdlShpDateRange:
          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 - Shape

Card Content

Chart Color

How to Use

Problem Solved

Integration

Implementation

Radial Chart - Shape

Card Content

Chart Color

How to Use

Problem Solved

Integration

YAML Code

Implementation