{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-chart-18","type":"registry:block","title":"Stacked area chart with crosshatch pattern fill","description":"Stacked area chart with crosshatch pattern fill","dependencies":["recharts"],"registryDependencies":["@reui/badge","card","chart"],"files":[{"path":"c-chart-18.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  { month: \"January\", api: 1820, webhook: 1640 },\n  { month: \"February\", api: 2340, webhook: 2160 },\n  { month: \"March\", api: 1960, webhook: 1880 },\n  { month: \"April\", api: 2780, webhook: 2540 },\n  { month: \"May\", api: 2100, webhook: 1920 },\n  { month: \"June\", api: 3120, webhook: 2880 },\n  { month: \"July\", api: 2540, webhook: 2320 },\n  { month: \"August\", api: 3480, webhook: 3160 },\n  { month: \"September\", api: 2860, webhook: 2580 },\n  { month: \"October\", api: 2420, webhook: 2140 },\n  { month: \"November\", api: 3240, webhook: 2960 },\n  { month: \"December\", api: 2680, webhook: 2440 },\n]\n\nconst chartConfig = {\n  api: {\n    label: \"API Calls\",\n    color: \"var(--chart-1)\",\n  },\n  webhook: {\n    label: \"Webhooks\",\n    color: \"var(--chart-3)\",\n  },\n} satisfies ChartConfig\n\nfunction CrosshatchPattern({ config }: { config: ChartConfig }) {\n  const entries = Object.entries(config).filter(([, v]) => v.color)\n  return (\n    <>\n      {entries.map(([key, { color }]) => (\n        <pattern\n          key={key}\n          id={`chart18-crosshatch-${key}`}\n          x=\"0\"\n          y=\"0\"\n          width=\"8\"\n          height=\"8\"\n          patternUnits=\"userSpaceOnUse\"\n        >\n          <path d=\"M0,8 L8,0\" stroke={color} strokeWidth=\"0.8\" opacity=\"0.4\" />\n          <path d=\"M0,0 L8,8\" stroke={color} strokeWidth=\"0.8\" opacity=\"0.2\" />\n        </pattern>\n      ))}\n    </>\n  )\n}\n\nexport function Pattern() {\n  return (\n    <Card className=\"w-full max-w-md\">\n      <CardHeader>\n        <CardTitle>\n          Request Volume\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            +12.8%\n          </Badge>\n        </CardTitle>\n        <CardDescription>\n          API and webhook traffic over 12 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{ top: 20, right: 0, bottom: 0, left: 0 }}\n          >\n            <CartesianGrid vertical={false} strokeDasharray=\"3 3\" />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  indicator=\"dot\"\n                  className=\"min-w-40 gap-2.5\"\n                  labelFormatter={(value) => (\n                    <div className=\"border-border/50 mb-0.5 border-b pb-2\">\n                      <span className=\"text-xs font-medium\">{value} 2024</span>\n                    </div>\n                  )}\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            <defs>\n              <CrosshatchPattern config={chartConfig} />\n            </defs>\n            <Area\n              dataKey=\"webhook\"\n              type=\"natural\"\n              fill=\"url(#chart18-crosshatch-webhook)\"\n              fillOpacity={0.5}\n              stroke=\"var(--color-webhook)\"\n              stackId=\"a\"\n              strokeWidth={1}\n            />\n            <Area\n              dataKey=\"api\"\n              type=\"natural\"\n              fill=\"url(#chart18-crosshatch-api)\"\n              fillOpacity={0.5}\n              stroke=\"var(--color-api)\"\n              stackId=\"a\"\n              strokeWidth={1}\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}","target":"components/examples/c-chart-18.tsx"}],"meta":{"order":18}}