{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-chart-24","type":"registry:block","title":"Filled radar with glowing stroke","description":"Filled radar with glowing stroke","dependencies":["recharts"],"registryDependencies":["card","chart"],"files":[{"path":"c-chart-24.tsx","type":"registry:block","content":"\"use client\"\n\nimport {\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n} from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/components/ui/chart\"\n\nconst chartData = [\n  { metric: \"Speed\", value: 88 },\n  { metric: \"Reliability\", value: 94 },\n  { metric: \"Scalability\", value: 72 },\n  { metric: \"Cost\", value: 68 },\n  { metric: \"Security\", value: 82 },\n  { metric: \"DX\", value: 78 },\n]\n\nconst chartConfig = {\n  value: { label: \"Score\", color: \"var(--chart-2)\" },\n} satisfies ChartConfig\n\nexport function Pattern() {\n  return (\n    <Card className=\"w-full max-w-xs\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Infrastructure Score</CardTitle>\n        <CardDescription>Platform performance metrics</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[280px]\"\n        >\n          <RadarChart accessibilityLayer data={chartData}>\n            <defs>\n              <linearGradient id=\"chart25-fill\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">\n                <stop\n                  offset=\"0%\"\n                  stopColor=\"var(--color-value)\"\n                  stopOpacity={0.45}\n                />\n                <stop\n                  offset=\"100%\"\n                  stopColor=\"var(--color-value)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n              <filter\n                id=\"chart25-glow\"\n                x=\"-15%\"\n                y=\"-15%\"\n                width=\"130%\"\n                height=\"130%\"\n              >\n                <feGaussianBlur stdDeviation=\"5\" result=\"blur\" />\n                <feComposite in=\"SourceGraphic\" in2=\"blur\" operator=\"over\" />\n              </filter>\n            </defs>\n            <ChartTooltip content={<ChartTooltipContent />} />\n            <PolarAngleAxis dataKey=\"metric\" tick={{ fontSize: 11 }} />\n            <PolarGrid strokeDasharray=\"3 3\" />\n            <PolarRadiusAxis\n              angle={90}\n              domain={[0, 100]}\n              tick={false}\n              axisLine={false}\n            />\n            <Radar\n              dataKey=\"value\"\n              fill=\"url(#chart25-fill)\"\n              stroke=\"var(--color-value)\"\n              strokeWidth={2.5}\n              filter=\"url(#chart25-glow)\"\n              dot={{\n                r: 4,\n                fill: \"var(--background)\",\n                strokeWidth: 2.5,\n                stroke: \"var(--color-value)\",\n              }}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}","target":"components/examples/c-chart-24.tsx"}],"meta":{"order":24}}