{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "files": [
    {
      "content": "\"use client\";\n\nimport { TrendingUpIcon } from \"lucide-react\";\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\";\n\nimport { Card } from \"~/registry/ui/card\";\nimport { Chart, type ChartConfig } from \"~/registry/ui/chart\";\n\nexport const description = \"A multiple line chart\";\n\nconst chartData = [\n  { desktop: 186, mobile: 80, month: \"January\" },\n  { desktop: 305, mobile: 200, month: \"February\" },\n  { desktop: 237, mobile: 120, month: \"March\" },\n  { desktop: 73, mobile: 190, month: \"April\" },\n  { desktop: 209, mobile: 130, month: \"May\" },\n  { desktop: 214, mobile: 140, month: \"June\" },\n];\n\nconst chartConfig = {\n  desktop: {\n    color: \"var(--chart-1)\",\n    label: \"Desktop\",\n  },\n  mobile: {\n    color: \"var(--chart-2)\",\n    label: \"Mobile\",\n  },\n} satisfies ChartConfig;\n\nexport function ChartLineDemo() {\n  return (\n    <Card.Root>\n      <Card.Header>\n        <Card.Title>Line Chart - Multiple</Card.Title>\n        <Card.Description>January - June 2024</Card.Description>\n      </Card.Header>\n      <Card.Content>\n        <Chart.Root config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              axisLine={false}\n              dataKey=\"month\"\n              tickFormatter={(value) => value.slice(0, 3)}\n              tickLine={false}\n              tickMargin={8}\n            />\n            <Chart.Tooltip content={<Chart.TooltipContent />} cursor={false} />\n            <Line\n              dataKey=\"desktop\"\n              dot={false}\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              type=\"monotone\"\n            />\n            <Line\n              dataKey=\"mobile\"\n              dot={false}\n              stroke=\"var(--color-mobile)\"\n              strokeWidth={2}\n              type=\"monotone\"\n            />\n          </LineChart>\n        </Chart.Root>\n      </Card.Content>\n      <Card.Footer>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 font-medium leading-none\">\n              Trending up by 5.2% this month{\" \"}\n              <TrendingUpIcon className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 text-muted-foreground leading-none\">\n              Showing total visitors for the last 6 months\n            </div>\n          </div>\n        </div>\n      </Card.Footer>\n    </Card.Root>\n  );\n}\n",
      "path": "src/registry/examples/chart/chart-line-demo.tsx",
      "type": "registry:example"
    }
  ],
  "name": "chart-line-demo",
  "registryDependencies": [
    "@kanpeki/chart"
  ],
  "type": "registry:example"
}