{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-chart-16","type":"registry:block","title":"Area chart with glowing dot markers","description":"Area chart with glowing dot markers","dependencies":["recharts"],"registryDependencies":["@reui/badge","card","chart"],"files":[{"path":"c-chart-16.tsx","type":"registry:block","content":"\"use client\"\n\nimport { CSSProperties } from \"react\"\nimport { Badge } from \"@/components/reui/badge\"\nimport { Area, AreaChart, CartesianGrid, XAxis } 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\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst chartData = [\n  { week: \"W1\", signups: 64 },\n  { week: \"W2\", signups: 78 },\n  { week: \"W3\", signups: 52 },\n  { week: \"W4\", signups: 92 },\n  { week: \"W5\", signups: 85 },\n  { week: \"W6\", signups: 110 },\n  { week: \"W7\", signups: 98 },\n  { week: \"W8\", signups: 125 },\n]\n\nconst chartConfig = {\n  signups: {\n    label: \"Signups\",\n    color: \"var(--chart-3)\",\n  },\n} satisfies ChartConfig\n\nexport function Pattern() {\n  return (\n    <Card className=\"w-full max-w-md\">\n      <CardHeader>\n        <CardTitle>\n          New Signups\n          <Badge variant=\"success-light\" className=\"ml-2\">\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"TradeUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowRightUpLongLine\"\n              aria-hidden=\"true\"\n            />\n            +144%\n          </Badge>\n        </CardTitle>\n        <CardDescription>Weekly user registration trends</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{ top: 20, right: 2, bottom: 0, left: 2 }}\n          >\n            <defs>\n              <linearGradient id=\"chart16-fill\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-signups)\"\n                  stopOpacity={0.35}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-signups)\"\n                  stopOpacity={0}\n                />\n              </linearGradient>\n              <filter\n                id=\"chart16-dot-glow\"\n                x=\"-50%\"\n                y=\"-50%\"\n                width=\"200%\"\n                height=\"200%\"\n              >\n                <feGaussianBlur stdDeviation=\"3\" result=\"blur\" />\n                <feComposite in=\"SourceGraphic\" in2=\"blur\" operator=\"over\" />\n              </filter>\n              <filter\n                id=\"chart16-line-glow\"\n                x=\"-10%\"\n                y=\"-20%\"\n                width=\"120%\"\n                height=\"140%\"\n              >\n                <feGaussianBlur stdDeviation=\"8\" result=\"blur\" />\n                <feComposite in=\"SourceGraphic\" in2=\"blur\" operator=\"over\" />\n              </filter>\n            </defs>\n            <CartesianGrid vertical={false} strokeDasharray=\"3 3\" />\n            <XAxis\n              dataKey=\"week\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent\n                  indicator=\"dot\"\n                  className=\"min-w-36 gap-2.5\"\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).toLocaleString()}\n                      </span>\n                    </div>\n                  )}\n                />\n              }\n            />\n            <Area\n              dataKey=\"signups\"\n              type=\"natural\"\n              fill=\"url(#chart16-fill)\"\n              stroke=\"var(--color-signups)\"\n              strokeWidth={2}\n              filter=\"url(#chart16-line-glow)\"\n              dot={{\n                r: 4,\n                fill: \"var(--color-signups)\",\n                strokeWidth: 2,\n                stroke: \"var(--background)\",\n                filter: \"url(#chart16-dot-glow)\",\n              }}\n              activeDot={{ r: 6, strokeWidth: 3, stroke: \"var(--background)\" }}\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}","target":"components/examples/c-chart-16.tsx"}],"meta":{"order":16}}