Charts

Radar Chart - Grid None

Added Jun 20, 2026

An animated radar (spider) chart with no background grid: only the filled polygon, dots at each vertex, axis labels, and a grow-from-center animation. Click-to-reveal tooltips via the legend. Powered by a Power Apps collection. Inspired by the shadcn/ui Radar Chart - Grid None.

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(colRdrGnData, {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(varRdrGnAnimate, true); Set(varTooltipRdrGnIdx, 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(varRdrGnAnimate, false); Set(varRdrGnAnimate, true)
Replace colRdrGnData with any data source that has {label, value} columns. The chart adapts to any number of data points: polygon, dots, and labels all adjust automatically.

Problem Solved

Renders an animated SVG radar chart with no grid lines inside a Power Apps Image control. The clean look highlights the data polygon and dots without visual noise from grid rings or spoke lines. Fully dynamic for any number of data points.

Integration

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

- conRdrGnChart:
    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:
      - tmrRdrGnAnimate:
          Control: Timer@2.1.0
          Properties:
            Duration: =1200
            Height: =1
            OnTimerEnd: =Set(varRdrGnAnimate, false)
            Repeat: =false
            Start: =varRdrGnAnimate
            Visible: =false
            Width: =1
            X: =0
            Y: =0
      - lblRdrGnTitle:
          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 - Grid None"
            Width: =520
            X: =20
            Y: =14
      - lblRdrGnDesc:
          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
      - rectRdrGnHeader:
          Control: Rectangle@2.3.0
          Properties:
            Fill: =RGBA(226, 232, 240, 1)
            Height: =1
            Width: =560
            X: =0
            Y: =68
      - imgRdrGnChart:
          Control: Image@2.2.3
          Properties:
            Height: =270
            Width: =416
            X: =72
            Y: =72
            Image: |-
              =With(
                {
                  _n:   CountRows(colRdrGnData),
                  _max: Max(1, Max(colRdrGnData, value)),
                  _p:   Min(1, tmrRdrGnAnimate.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(colRdrGnData)),
                      With(
                        { _ga1: (Value - 1) * 2 * Pi() / CountRows(colRdrGnData) - Pi() / 2 },
                        With(
                          { _c1: Cos(_ga1), _s1: Sin(_ga1) },
                          "<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(colRdrGnData, Value).label & "</text>"
                        )
                      )
                    ) &
                    If(_ease > 0,
                      "<polygon points='" &
                      Concat(Sequence(_n),
                        With(
                          {
                            _v: Index(colRdrGnData, 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(colRdrGnData)),
                        With(
                          {
                            _col2: "#3b82f6",
                            _e2:   1 - Power(Max(0, 1 - Min(1, tmrRdrGnAnimate.Value / 1200)), 3),
                            _m2:   Max(1, Max(colRdrGnData, value)),
                            _v2:   Index(colRdrGnData, Value).value,
                            _a2:   (Value - 1) * 2 * Pi() / CountRows(colRdrGnData) - 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>"
                  )
                )
              )
      - galRdrGnLegend:
          Control: Gallery@2.15.0
          Variant: Horizontal
          Properties:
            Fill: =RGBA(0, 0, 0, 0)
            Height: =36
            Items: =Sequence(CountRows(colRdrGnData))
            ShowScrollbar: =false
            TemplatePadding: =0
            TemplateSize: =560 / Max(1, CountRows(colRdrGnData))
            Width: =560
            X: =0
            Y: =350
          Children:
            - imgRdrGnLegDot:
                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
            - lblRdrGnLegLabel:
                Control: Label@2.5.1
                Properties:
                  Color: =RGBA(15, 23, 42, 1)
                  Font: =Font.'Open Sans'
                  Height: =14
                  Size: =10
                  Text: =Index(colRdrGnData, ThisItem.Value).label
                  Width: =75
                  X: =22
                  Y: =11
            - btnRdrGnLegHit:
                Control: Button@0.0.45
                Properties:
                  Appearance: ='ButtonCanvas.Appearance'.Transparent
                  Height: =Parent.TemplateHeight
                  OnSelect: =If(varTooltipRdrGnIdx = ThisItem.Value, Set(varTooltipRdrGnIdx, 0), Set(varTooltipRdrGnIdx, ThisItem.Value))
                  Text: =""
                  Width: =Parent.TemplateWidth
                  X: =0
                  Y: =0
      - rectRdrGnFooter:
          Control: Rectangle@2.3.0
          Properties:
            Fill: =RGBA(226, 232, 240, 1)
            Height: =1
            Width: =560
            X: =0
            Y: =394
      - lblRdrGnTrend:
          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
      - lblRdrGnDateRange:
          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
      - conRdrGnTooltip:
          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: =varTooltipRdrGnIdx > 0
            Width: =130
            X: =Max(10, Min(420, (varTooltipRdrGnIdx - 1) * (560 / Max(1, CountRows(colRdrGnData))) + 47 - 65))
            Y: =270
          Children:
            - lblRdrGnTipLabel:
                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(varTooltipRdrGnIdx > 0, Index(colRdrGnData, varTooltipRdrGnIdx).label, "")
                  Width: =116
                  X: =8
                  Y: =6
            - imgRdrGnTipDot:
                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
            - lblRdrGnTipValue:
                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(varTooltipRdrGnIdx > 0, Text(Index(colRdrGnData, varTooltipRdrGnIdx).value), "")
                  Width: =100
                  X: =22
                  Y: =28
            - lblRdrGnTipSeries:
                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 - Grid None

Card Content

Chart Color

How to Use

Problem Solved

Integration

Implementation

Radar Chart - Grid None

Card Content

Chart Color

How to Use

Problem Solved

Integration

YAML Code

Implementation