{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "charts-4",
  "title": "Monthly Visitors Line",
  "description": "Line chart card plotting unique visitors month by month, with a grid, labelled axes, and a hover tooltip on each point.",
  "dependencies": [
    "recharts",
    "@base-ui/react"
  ],
  "registryDependencies": [
    "card",
    "chart"
  ],
  "files": [
    {
      "path": "registry/blocks/charts/4/charts-block.tsx",
      "content": "\"use client\"\n\nimport { CartesianGrid, Line, LineChart, XAxis, YAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport {\n  type ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/components/ui/chart\"\n\nconst chartData = [\n  { month: \"Jan\", visitors: 4200 },\n  { month: \"Feb\", visitors: 5100 },\n  { month: \"Mar\", visitors: 4800 },\n  { month: \"Apr\", visitors: 6300 },\n  { month: \"May\", visitors: 7200 },\n  { month: \"Jun\", visitors: 6900 },\n  { month: \"Jul\", visitors: 8400 },\n  { month: \"Aug\", visitors: 9100 },\n  { month: \"Sep\", visitors: 8700 },\n  { month: \"Oct\", visitors: 10200 },\n  { month: \"Nov\", visitors: 11300 },\n  { month: \"Dec\", visitors: 12600 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartsBlock() {\n  return (\n    <section className=\"flex w-full items-center justify-center bg-background px-6 py-12 text-foreground\">\n      <Card className=\"w-full max-w-2xl\">\n        <CardHeader>\n          <CardTitle>Monthly Visitors</CardTitle>\n          <CardDescription>\n            Unique visitors to acme.com over the last year\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer\n            config={chartConfig}\n            className=\"h-64 w-full [&_.recharts-surface:focus-visible]:outline-2 [&_.recharts-surface:focus-visible]:outline-offset-2 [&_.recharts-surface:focus-visible]:outline-ring [&_.recharts-surface:focus-visible]:outline-solid\"\n          >\n            <LineChart\n              aria-label=\"Visitors by month\"\n              data={chartData}\n              margin={{ top: 12, left: 0, right: 12 }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n              />\n              <YAxis\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                // Fits the widest tick this formatter produces (\"10.5K\"); at 40\n                // recharts clipped the leading digit to \"0.5K\".\n                width={48}\n                tickFormatter={(value) => `${Number(value) / 1000}K`}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={\n                  <ChartTooltipContent\n                    formatter={(value) =>\n                      `${Number(value).toLocaleString(\"en-US\")} visitors`\n                    }\n                  />\n                }\n              />\n              <Line\n                dataKey=\"visitors\"\n                type=\"monotone\"\n                stroke=\"var(--color-visitors)\"\n                strokeWidth={2}\n                dot={false}\n                activeDot={{ r: 4 }}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n      </Card>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/charts-4.tsx"
    }
  ],
  "meta": {
    "height": "452px",
    "tier": "free"
  },
  "categories": [
    "charts"
  ],
  "type": "registry:block"
}