{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chart-radar",
  "title": "Chart Radar",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "A radar chart with filled or outlined shapes, polygon or circular rings, dots and a fixed scale, in a frame with a legend that switches series off, a table of every axis, patterns and states.",
  "dependencies": [
    "recharts@^3"
  ],
  "registryDependencies": [
    "https://ui.ballmac.com/r/chart.json",
    "https://ui.ballmac.com/r/chart-frame.json"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/chart-radar.tsx",
      "content": "// Ballmac UI: Chart Radar. https://ui.ballmac.com/components/chart-radar\n\"use client\"\n\nimport * as React from \"react\"\nimport { PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadarChart } from \"recharts\"\n\nimport { ChartTooltip, ChartTooltipContent } from \"@/components/ballmac/chart\"\nimport { ChartFrame, type ChartFrameProps } from \"@/components/ballmac/chart-frame\"\n\ntype ChartRadarProps = Omit<ChartFrameProps, \"children\" | \"summaryMode\" | \"skeleton\" | \"table\"> & {\n  /** Fill each shape. Turn it off to draw outlines, which keeps overlapping series readable. */\n  fillShape?: boolean\n  /** Draw a dot on every axis. */\n  dots?: boolean\n  /** The shape of the grid rings. */\n  grid?: \"polygon\" | \"circle\" | \"none\"\n  /** Fix the scale, for example `[0, 100]`. */\n  domain?: [number, number]\n  /** Write the scale along one axis. */\n  scale?: boolean\n  tooltip?: boolean\n}\n\n/**\n * A radar chart in a ChartFrame: filled or outlined shapes, polygon or circular rings, dots, a fixed scale, a legend that switches series off,\n * a table of every axis, patterns, and loading, empty and error states.\n */\nfunction ChartRadar({ data, xKey, series, fillShape = true, dots = false, grid = \"polygon\", domain, scale = false, tooltip = true, aspect = \"square\", ...frame }: ChartRadarProps) {\n  // Axes run clockwise from the top. Right to left they run the other way, which is the same ring with the first axis kept on top and the rest reversed.\n  const points = (rtl: boolean) => (rtl && data.length > 2 ? [data[0]!, ...data.slice(1).reverse()] : data)\n  return (\n    <ChartFrame data={data} xKey={xKey} series={series} summaryMode=\"ranking\" skeleton=\"radar\" aspect={aspect} {...frame}>\n      {(chart) => (\n        <RadarChart data={points(chart.rtl)} outerRadius=\"72%\" margin={{ top: 12, right: 28, bottom: 12, left: 28 }} accessibilityLayer>\n          <defs>{chart.defs}</defs>\n          {grid !== \"none\" ? <PolarGrid gridType={grid} /> : null}\n          <PolarAngleAxis dataKey={xKey} tick={{ fill: \"var(--muted-foreground)\", fontSize: 12 }} tickFormatter={(v: unknown) => chart.formatCategory(v)} />\n          {scale ? <PolarRadiusAxis angle={chart.rtl ? 90 + 180 / Math.max(3, data.length) : 90 - 180 / Math.max(3, data.length)} domain={domain} tick={{ fill: \"var(--muted-foreground)\", fontSize: 10 }} axisLine={false} tickLine={false} /> : <PolarRadiusAxis domain={domain} tick={false} axisLine={false} tickLine={false} />}\n          {tooltip ? <ChartTooltip cursor={false} content={<ChartTooltipContent indicator=\"line\" />} /> : null}\n          {series.map((s) => (\n            <Radar\n              key={s.key}\n              dataKey={s.key}\n              hide={chart.isHidden(s.key)}\n              stroke={chart.color(s.key)}\n              strokeWidth={2}\n              fill={chart.patterns ? chart.fill(s.key) : chart.color(s.key)}\n              fillOpacity={fillShape || chart.patterns ? (chart.patterns ? 1 : 0.22) : 0}\n              dot={dots ? { r: 3.5, fillOpacity: 1 } : false}\n              isAnimationActive={chart.animate}\n              animationDuration={700}\n            />\n          ))}\n        </RadarChart>\n      )}\n    </ChartFrame>\n  )\n}\n\nexport { ChartRadar, type ChartRadarProps }\n",
      "type": "registry:ui",
      "target": "@components/ballmac/chart-radar.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "chart",
      "radar",
      "spider",
      "comparison",
      "scorecard",
      "recharts",
      "graph"
    ],
    "version": "1.0.0",
    "updated": "2026-10-18",
    "ai": {
      "summary": "<ChartRadar title description data xKey series={[{ key, label, color? }]} />. fillShape (false draws outlines), dots, grid: polygon | circle | none, domain ([0, 100]), scale (write the scale), legend, patterns, state and every ChartFrame prop.",
      "whenToUse": [
        "Comparing a few things across the same 5 to 8 dimensions",
        "Scorecards and profiles"
      ],
      "whenNotToUse": [
        "Precise comparison of values (use chart-bar)",
        "More than three or four overlapping series"
      ],
      "composesWith": [
        "chart-frame",
        "stat-card"
      ],
      "a11y": [
        {
          "keys": "Arrow keys",
          "action": "Move between axes (accessibilityLayer)"
        },
        {
          "keys": "Tab, Enter / Space",
          "action": "Legend buttons switch series off and on; the Chart / Table switch shows the numbers as a table"
        },
        {
          "keys": "Screen readers",
          "action": "The figure has a name and a summary written from the data"
        }
      ],
      "customization": [
        "fillShape and dots",
        "grid and domain",
        "series colors"
      ]
    },
    "examples": [
      "chart-radar-demo",
      "chart-radar-compare",
      "chart-radar-circle",
      "chart-radar-patterns"
    ],
    "url": "https://ui.ballmac.com/components/chart-radar"
  },
  "categories": [
    "data-display"
  ],
  "type": "registry:ui"
}