Charts

Radar Chart - Dots

Added Jun 18, 2026

An animated radar (spider) chart with filled dots at each data-point vertex, a grow-from-center animation, and click-to-reveal tooltips via the legend. Powered by a Power Apps collection. Inspired by the shadcn/ui Radar Chart - Dots.

Radar Chart - Dots

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 the collection: ClearCollect(colRdrDotData, {label: "January", value: 186}, {label: "February", value: 305}, {label: "March", value: 237}, {label: "April", value: 273}, {label: "May", value: 209}, {label: "June", value: 214})
On your screen's OnVisible, add: Set(varRdrDotAnimate, true); Set(varTooltipRdrDotIdx, 0)
Paste the copied YAML into Power Apps Studio (Ctrl+V).
The radar polygon and dots grow from the center outward. Click a legend item to show a tooltip for that data point.
To replay the animation: Set(varRdrDotAnimate, false); Set(varRdrDotAnimate, true)
Replace colRdrDotData with any data source that has {label, value} columns. The chart adapts to any number of data points: axes, grid, dots, and labels all adjust automatically.

Problem Solved

Renders an animated SVG radar chart with dots at each vertex inside a Power Apps Image control, fully dynamic for any number of data points. Uses Cos()/Sin() for axis angles and recomputes the easing factor locally in the dots Concat to avoid the PA two-Concat scoping bug.

Integration

Bind colRdrDotData to any data source with {label, value} columns. The chart supports any number of rows: the grid, axis lines, polygon, dots, and labels all adapt automatically when the collection changes.

- conRdrDotChart:
    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: =452
      RadiusBottomLeft: =12
      RadiusBottomRight: =12
      RadiusTopLeft: =12
      RadiusTopRight: =12
      Width: =560
    Children:
      - tmrRdrDotAnimate:
          Control: Timer@2.1.0
          Properties:
            Duration: =1200
            Height: =1
            OnTimerEnd: =Set(varRdrDotAnimate, false)
            Repeat: =false
            Start: =varRdrDotAnimate
            Visible: =false
            Width: =1
            X: =0
            Y: =0
      - lblRdrDotTitle:
          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: ="Radar Chart - Dots"
            Width: =520
            X: =20
            Y: =14
      - lblRdrDotDesc:
          Control: Label@2.5.1
          Properties:
            Align: =Align.Center
            Color: =RGBA(100, 116, 139, 1)
            Font: =Font.'Open Sans'
            Height: =20
            Size: =12
            Text: ="Showing total visitors for the last 6 months"
            Width: =520
            X: =20
            Y: =44
      - rectRdrDotHeader:
          Control: Rectangle@2.3.0
          Properties:
            Fill: =RGBA(226, 232, 240, 1)
            Height: =1
            Width: =560
            X: =0
            Y: =68
      - imgRdrDotChart:
          Control: Image@2.2.3
          Properties:
            Height: =270
            Width: =416
            X: =72
            Y: =72
            Image: |-
              =With(
                {
                  _n:   CountRows(colRdrDotData),
                  _max: Max(1, Max(colRdrDotData, value)),
                  _p:   Min(1, tmrRdrDotAnimate.Value / 1200),
                  _col: "#3b82f6"
                },
                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 270'>" &
                    Concat(Sequence(CountRows(colRdrDotData)),
                      With(
                        {
                          _ga1: (Value - 1) * 2 * Pi() / CountRows(colRdrDotData) - Pi() / 2,
                          _ga2: Value * 2 * Pi() / CountRows(colRdrDotData) - Pi() / 2
                        },
                        With(
                          { _c1: Cos(_ga1), _s1: Sin(_ga1), _c2: Cos(_ga2), _s2: Sin(_ga2) },
                          "<line x1='208' y1='148' x2='" & Text(Round(208 + 80*_c1, 1)) & "' y2='" & Text(Round(148 + 80*_s1, 1)) & "' stroke='#e2e8f0' stroke-width='1'/>" &
                          "<line x1='" & Text(Round(208+80*_c1,1)) & "' y1='" & Text(Round(148+80*_s1,1)) & "' x2='" & Text(Round(208+80*_c2,1)) & "' y2='" & Text(Round(148+80*_s2,1)) & "' stroke='#e2e8f0' stroke-width='1'/>" &
                          "<line x1='" & Text(Round(208+60*_c1,1)) & "' y1='" & Text(Round(148+60*_s1,1)) & "' x2='" & Text(Round(208+60*_c2,1)) & "' y2='" & Text(Round(148+60*_s2,1)) & "' stroke='#e2e8f0' stroke-width='1'/>" &
                          "<line x1='" & Text(Round(208+40*_c1,1)) & "' y1='" & Text(Round(148+40*_s1,1)) & "' x2='" & Text(Round(208+40*_c2,1)) & "' y2='" & Text(Round(148+40*_s2,1)) & "' stroke='#e2e8f0' stroke-width='1'/>" &
                          "<line x1='" & Text(Round(208+20*_c1,1)) & "' y1='" & Text(Round(148+20*_s1,1)) & "' x2='" & Text(Round(208+20*_c2,1)) & "' y2='" & Text(Round(148+20*_s2,1)) & "' stroke='#e2e8f0' stroke-width='1'/>" &
                          "<text x='" & Text(Round(208+100*_c1, 1)) & "' y='" & Text(Round(148+100*_s1, 1)) & "' text-anchor='middle' font-family='Arial,sans-serif' font-size='10' fill='#64748b'>" & Index(colRdrDotData, Value).label & "</text>"
                        )
                      )
                    ) &
                    If(_ease > 0,
                      "<polygon points='" &
                      Concat(Sequence(_n),
                        With(
                          {
                            _v: Index(colRdrDotData, Value).value,
                            _a: (Value - 1) * 2 * Pi() / _n - Pi() / 2
                          },
                          With(
                            { _r: _ease * _v / _max * 80 },
                            Text(Round(208 + _r * Cos(_a), 1)) & "," & Text(Round(148 + _r * Sin(_a), 1)) & " "
                          )
                        )
                      ) &
                      "' fill='" & _col & "' fill-opacity='0.6' stroke='" & _col & "' stroke-width='2' stroke-linejoin='round'/>" &
                      Concat(Sequence(CountRows(colRdrDotData)),
                        With(
                          {
                            _col2: "#3b82f6",
                            _e2:   1 - Power(Max(0, 1 - Min(1, tmrRdrDotAnimate.Value / 1200)), 3),
                            _m2:   Max(1, Max(colRdrDotData, value)),
                            _v2:   Index(colRdrDotData, Value).value,
                            _a2:   (Value - 1) * 2 * Pi() / CountRows(colRdrDotData) - Pi() / 2
                          },
                          With(
                            { _r2: _e2 * _v2 / _m2 * 80 },
                            "<circle cx='" & Text(Round(208 + _r2 * Cos(_a2), 1)) & "' cy='" & Text(Round(148 + _r2 * Sin(_a2), 1)) & "' r='4' fill='" & _col2 & "'/>"
                          )
                        )
                      ),
                      ""
                    ) &
                    "</svg>"
                  )
                )
              )
      - galRdrDotLegend:
          Control: Gallery@2.15.0
          Variant: Horizontal
          Properties:
            Fill: =RGBA(0, 0, 0, 0)
            Height: =36
            Items: =Sequence(CountRows(colRdrDotData))
            ShowScrollbar: =false
            TemplatePadding: =0
            TemplateSize: =560 / Max(1, CountRows(colRdrDotData))
            Width: =560
            X: =0
            Y: =350
          Children:
            - imgRdrDotLegDot:
                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: =8
                  Y: =13
            - lblRdrDotLegLabel:
                Control: Label@2.5.1
                Properties:
                  Color: =RGBA(15, 23, 42, 1)
                  Font: =Font.'Open Sans'
                  Height: =14
                  Size: =10
                  Text: =Index(colRdrDotData, ThisItem.Value).label
                  Width: =75
                  X: =22
                  Y: =11
            - btnRdrDotLegHit:
                Control: Button@0.0.45
                Properties:
                  Appearance: ='ButtonCanvas.Appearance'.Transparent
                  Height: =Parent.TemplateHeight
                  OnSelect: =If(varTooltipRdrDotIdx = ThisItem.Value, Set(varTooltipRdrDotIdx, 0), Set(varTooltipRdrDotIdx, ThisItem.Value))
                  Text: =""
                  Width: =Parent.TemplateWidth
                  X: =0
                  Y: =0
      - rectRdrDotFooter:
          Control: Rectangle@2.3.0
          Properties:
            Fill: =RGBA(226, 232, 240, 1)
            Height: =1
            Width: =560
            X: =0
            Y: =394
      - lblRdrDotTrend:
          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: =520
            X: =20
            Y: =404
      - lblRdrDotDateRange:
          Control: Label@2.5.1
          Properties:
            Align: =Align.Center
            Color: =RGBA(100, 116, 139, 1)
            Font: =Font.'Open Sans'
            Height: =20
            Size: =11
            Text: ="January - June 2024"
            Width: =520
            X: =20
            Y: =428
      - conRdrDotTooltip:
          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: =68
            RadiusBottomLeft: =8
            RadiusBottomRight: =8
            RadiusTopLeft: =8
            RadiusTopRight: =8
            Visible: =varTooltipRdrDotIdx > 0
            Width: =130
            X: =Max(10, Min(420, (varTooltipRdrDotIdx - 1) * (560 / Max(1, CountRows(colRdrDotData))) + 47 - 65))
            Y: =270
          Children:
            - lblRdrDotTipLabel:
                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(varTooltipRdrDotIdx > 0, Index(colRdrDotData, varTooltipRdrDotIdx).label, "")
                  Width: =116
                  X: =8
                  Y: =6
            - imgRdrDotTipDot:
                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: =8
                  X: =8
                  Y: =30
            - lblRdrDotTipValue:
                Control: Label@2.5.1
                Properties:
                  Color: =RGBA(15, 23, 42, 1)
                  Font: =Font.'Open Sans'
                  FontWeight: =FontWeight.Bold
                  Height: =18
                  Size: =13
                  Text: =If(varTooltipRdrDotIdx > 0, Text(Index(colRdrDotData, varTooltipRdrDotIdx).value), "")
                  Width: =100
                  X: =22
                  Y: =28
            - lblRdrDotTipSeries:
                Control: Label@2.5.1
                Properties:
                  Color: =RGBA(100, 116, 139, 1)
                  Font: =Font.'Open Sans'
                  Height: =16
                  Size: =10
                  Text: ="Desktop"
                  Width: =116
                  X: =8
                  Y: =48

Implementation

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

Something not pasting right? Troubleshooting guide

Radar Chart - Dots

Card Content

Chart Color

How to Use

Problem Solved

Integration

Implementation

Radar Chart - Dots

Card Content

Chart Color

How to Use

Problem Solved

Integration

YAML Code

Implementation