{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-chart-25","type":"registry:block","title":"Lighthouse scores radial with labels","description":"Lighthouse scores radial with labels","dependencies":["recharts"],"registryDependencies":["card","chart"],"files":[{"path":"c-chart-25.tsx","type":"registry:block","content":"\"use client\"\n\nimport { CSSProperties } from \"react\"\nimport { PolarAngleAxis, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport {\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/components/ui/chart\"\n\nconst chartData = [\n  { name: \"mobile\", score: 58, fill: \"url(#chart28-mobile)\" },\n  { name: \"desktop\", score: 76, fill: \"url(#chart28-desktop)\" },\n  { name: \"api\", score: 92, fill: \"url(#chart28-api)\" },\n]\n\nconst chartConfig = {\n  score: { label: \"Score\" },\n  mobile: { label: \"Mobile\", color: \"var(--chart-4)\" },\n  desktop: { label: \"Desktop\", color: \"var(--chart-2)\" },\n  api: { label: \"API\", color: \"var(--chart-1)\" },\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>Lighthouse Scores</CardTitle>\n        <CardDescription>Performance audit by platform</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[300px]\"\n        >\n          <RadialBarChart\n            data={chartData}\n            innerRadius={35}\n            outerRadius={110}\n            barSize={22}\n          >\n            <defs>\n              {([\"mobile\", \"desktop\", \"api\"] as const).map((key) => (\n                <linearGradient\n                  key={key}\n                  id={`chart28-${key}`}\n                  x1=\"0\"\n                  y1=\"0\"\n                  x2=\"1\"\n                  y2=\"0\"\n                >\n                  <stop\n                    offset=\"0%\"\n                    stopColor={`var(--color-${key})`}\n                    stopOpacity={0.5}\n                  />\n                  <stop\n                    offset=\"100%\"\n                    stopColor={`var(--color-${key})`}\n                    stopOpacity={1}\n                  />\n                </linearGradient>\n              ))}\n              <filter\n                id=\"chart28-glow\"\n                x=\"-15%\"\n                y=\"-15%\"\n                width=\"130%\"\n                height=\"130%\"\n              >\n                <feGaussianBlur stdDeviation=\"3\" result=\"blur\" />\n                <feComposite in=\"SourceGraphic\" in2=\"blur\" operator=\"over\" />\n              </filter>\n            </defs>\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  className=\"min-w-40 gap-2.5\"\n                  nameKey=\"name\"\n                  formatter={(value, name) => (\n                    <div className=\"flex w-full items-center justify-between gap-2\">\n                      <div className=\"flex items-center gap-1.5\">\n                        <div\n                          className=\"h-2.5 w-2.5 shrink-0 rounded-xs bg-(--color-bg)\"\n                          style={\n                            {\n                              \"--color-bg\": `var(--color-${name})`,\n                            } as CSSProperties\n                          }\n                        />\n                        <span className=\"text-muted-foreground\">\n                          {chartConfig[name as keyof typeof chartConfig]\n                            ?.label || name}\n                        </span>\n                      </div>\n                      <span className=\"text-foreground font-semibold tabular-nums\">\n                        {Number(value)}/100\n                      </span>\n                    </div>\n                  )}\n                />\n              }\n            />\n            <PolarAngleAxis\n              type=\"number\"\n              domain={[0, 100]}\n              angleAxisId={0}\n              tick={false}\n            />\n            <RadialBar\n              dataKey=\"score\"\n              background\n              cornerRadius={10}\n              filter=\"url(#chart28-glow)\"\n              label={{\n                position: \"insideStart\",\n                fill: \"#fff\",\n                fontSize: 11,\n                fontWeight: 600,\n              }}\n            />\n            <ChartLegend\n              content={<ChartLegendContent nameKey=\"name\" />}\n              className=\"-translate-y-2\"\n            />\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}","target":"components/examples/c-chart-25.tsx"}],"meta":{"order":25}}