{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "files": [
    {
      "content": "\"use client\";\n\nimport { TrendingUpIcon } from \"lucide-react\";\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\";\n\nimport { Card } from \"~/registry/ui/card\";\nimport { Chart, type ChartConfig } from \"~/registry/ui/chart\";\n\nexport const description = \"A multiple bar 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 ChartBarDemo() {\n  return (\n    <Card.Root>\n      <Card.Header>\n        <Card.Title>Bar Chart - Multiple</Card.Title>\n        <Card.Description>January - June 2024</Card.Description>\n      </Card.Header>\n      <Card.Content>\n        <Chart.Root config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              axisLine={false}\n              dataKey=\"month\"\n              tickFormatter={(value) => value.slice(0, 3)}\n              tickLine={false}\n              tickMargin={10}\n            />\n            <Chart.Tooltip\n              content={<Chart.TooltipContent indicator=\"dashed\" />}\n              cursor={false}\n            />\n            <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n            <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n          </BarChart>\n        </Chart.Root>\n      </Card.Content>\n      <Card.Footer className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 font-medium leading-none\">\n          Trending up by 5.2% this month <TrendingUpIcon className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </Card.Footer>\n    </Card.Root>\n  );\n}\n",
      "path": "src/registry/examples/chart/chart-bar-demo.tsx",
      "type": "registry:example"
    }
  ],
  "name": "chart-bar-demo",
  "registryDependencies": [
    "@kanpeki/chart"
  ],
  "type": "registry:example"
}