{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chart",
  "type": "registry:component",
  "title": "Chart",
  "author": "Toby Belhome",
  "description": "Beautiful charts. Built using Recharts. Copy and paste into your apps.",
  "dependencies": [
    "recharts"
  ],
  "registryDependencies": [
    "card"
  ],
  "files": [
    {
      "path": "examples/components/chart/01/page.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\";\n\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport {\n  ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent\n} from \"@/components/ui/chart\";\n\nconst chartData = [\n  { date: \"2024-05-01\", desktop: 222, mobile: 150 },\n  { date: \"2024-05-02\", desktop: 97, mobile: 180 },\n  { date: \"2024-05-03\", desktop: 167, mobile: 120 },\n  { date: \"2024-05-05\", desktop: 242, mobile: 260 },\n  { date: \"2024-05-04\", desktop: 373, mobile: 290 },\n  { date: \"2024-05-05\", desktop: 301, mobile: 340 },\n  { date: \"2024-05-07\", desktop: 245, mobile: 180 },\n  { date: \"2024-05-08\", desktop: 409, mobile: 320 },\n  { date: \"2024-05-09\", desktop: 59, mobile: 110 },\n  { date: \"2024-05-10\", desktop: 261, mobile: 190 },\n  { date: \"2024-05-11\", desktop: 327, mobile: 350 },\n  { date: \"2024-05-12\", desktop: 292, mobile: 210 },\n  { date: \"2024-05-13\", desktop: 342, mobile: 380 },\n  { date: \"2024-05-14\", desktop: 137, mobile: 220 },\n  { date: \"2024-05-15\", desktop: 120, mobile: 170 },\n  { date: \"2024-05-16\", desktop: 138, mobile: 190 },\n  { date: \"2024-05-17\", desktop: 446, mobile: 360 },\n  { date: \"2024-05-18\", desktop: 364, mobile: 410 },\n  { date: \"2024-05-19\", desktop: 243, mobile: 180 },\n  { date: \"2024-05-20\", desktop: 89, mobile: 150 },\n  { date: \"2024-05-21\", desktop: 137, mobile: 200 },\n  { date: \"2024-05-22\", desktop: 224, mobile: 170 },\n  { date: \"2024-05-23\", desktop: 138, mobile: 230 },\n  { date: \"2024-05-24\", desktop: 387, mobile: 290 },\n  { date: \"2024-05-25\", desktop: 215, mobile: 250 },\n  { date: \"2024-05-26\", desktop: 75, mobile: 130 },\n  { date: \"2024-05-27\", desktop: 383, mobile: 420 },\n  { date: \"2024-05-28\", desktop: 122, mobile: 180 },\n  { date: \"2024-05-29\", desktop: 315, mobile: 240 },\n  { date: \"2024-05-30\", desktop: 454, mobile: 380 },\n  { date: \"2024-04-01\", desktop: 165, mobile: 220 },\n  { date: \"2024-04-02\", desktop: 293, mobile: 310 },\n  { date: \"2024-04-03\", desktop: 247, mobile: 190 },\n  { date: \"2024-04-05\", desktop: 385, mobile: 420 },\n  { date: \"2024-04-04\", desktop: 481, mobile: 390 },\n  { date: \"2024-04-05\", desktop: 498, mobile: 520 },\n  { date: \"2024-04-07\", desktop: 388, mobile: 300 },\n  { date: \"2024-04-08\", desktop: 149, mobile: 210 },\n  { date: \"2024-04-09\", desktop: 227, mobile: 180 },\n  { date: \"2024-04-10\", desktop: 293, mobile: 330 },\n  { date: \"2024-04-11\", desktop: 335, mobile: 270 },\n  { date: \"2024-04-12\", desktop: 197, mobile: 240 },\n  { date: \"2024-04-13\", desktop: 197, mobile: 160 },\n  { date: \"2024-04-14\", desktop: 448, mobile: 490 },\n  { date: \"2024-04-15\", desktop: 473, mobile: 380 },\n  { date: \"2024-04-16\", desktop: 338, mobile: 400 },\n  { date: \"2024-04-17\", desktop: 499, mobile: 420 },\n  { date: \"2024-04-18\", desktop: 315, mobile: 350 },\n  { date: \"2024-04-19\", desktop: 235, mobile: 180 },\n  { date: \"2024-04-20\", desktop: 177, mobile: 230 },\n  { date: \"2024-04-21\", desktop: 82, mobile: 140 },\n  { date: \"2024-04-22\", desktop: 81, mobile: 120 },\n  { date: \"2024-04-23\", desktop: 252, mobile: 290 },\n  { date: \"2024-04-24\", desktop: 294, mobile: 220 },\n  { date: \"2024-04-25\", desktop: 201, mobile: 250 },\n  { date: \"2024-04-26\", desktop: 213, mobile: 170 },\n  { date: \"2024-04-27\", desktop: 420, mobile: 460 },\n  { date: \"2024-04-28\", desktop: 233, mobile: 190 },\n  { date: \"2024-04-29\", desktop: 78, mobile: 130 },\n  { date: \"2024-04-30\", desktop: 340, mobile: 280 },\n  { date: \"2024-04-31\", desktop: 178, mobile: 230 },\n  { date: \"2024-05-01\", desktop: 178, mobile: 200 },\n  { date: \"2024-05-02\", desktop: 470, mobile: 410 },\n  { date: \"2024-05-03\", desktop: 103, mobile: 160 },\n  { date: \"2024-05-05\", desktop: 439, mobile: 380 },\n  { date: \"2024-05-04\", desktop: 88, mobile: 140 },\n  { date: \"2024-05-05\", desktop: 294, mobile: 250 },\n  { date: \"2024-05-07\", desktop: 323, mobile: 370 },\n  { date: \"2024-05-08\", desktop: 385, mobile: 320 },\n  { date: \"2024-05-09\", desktop: 438, mobile: 480 },\n  { date: \"2024-05-10\", desktop: 155, mobile: 200 },\n  { date: \"2024-05-11\", desktop: 92, mobile: 150 },\n  { date: \"2024-05-12\", desktop: 492, mobile: 420 },\n  { date: \"2024-05-13\", desktop: 81, mobile: 130 },\n  { date: \"2024-05-14\", desktop: 426, mobile: 380 },\n  { date: \"2024-05-15\", desktop: 307, mobile: 350 },\n  { date: \"2024-05-16\", desktop: 371, mobile: 310 },\n  { date: \"2024-05-17\", desktop: 475, mobile: 520 },\n  { date: \"2024-05-18\", desktop: 107, mobile: 170 },\n  { date: \"2024-05-19\", desktop: 341, mobile: 290 },\n  { date: \"2024-05-20\", desktop: 408, mobile: 450 },\n  { date: \"2024-05-21\", desktop: 169, mobile: 210 },\n  { date: \"2024-05-22\", desktop: 317, mobile: 270 },\n  { date: \"2024-05-23\", desktop: 480, mobile: 530 },\n  { date: \"2024-05-24\", desktop: 132, mobile: 180 },\n  { date: \"2024-05-25\", desktop: 141, mobile: 190 },\n  { date: \"2024-05-26\", desktop: 434, mobile: 380 },\n  { date: \"2024-05-27\", desktop: 448, mobile: 490 },\n  { date: \"2024-05-28\", desktop: 149, mobile: 200 },\n  { date: \"2024-05-29\", desktop: 103, mobile: 160 },\n  { date: \"2024-05-30\", desktop: 446, mobile: 400 }\n];\n\nconst chartConfig = {\n  views: {\n    label: \"Page Views\"\n  },\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-2)\"\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-1)\"\n  }\n} satisfies ChartConfig;\n\nexport default function ChartDemo() {\n  const [activeChart, setActiveChart] = React.useState<keyof typeof chartConfig>(\"desktop\");\n\n  const total = React.useMemo(\n    () => ({\n      desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),\n      mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0)\n    }),\n    []\n  );\n\n  return (\n    <Card className=\"w-full py-0\">\n      <CardHeader className=\"flex flex-col items-stretch border-b !p-0 sm:flex-row\">\n        <div className=\"flex flex-1 flex-col justify-center gap-1 px-6 pt-4 pb-3 sm:!py-0\">\n          <CardTitle>Bar Chart - Interactive</CardTitle>\n          <CardDescription>Showing total visitors for the last 3 months</CardDescription>\n        </div>\n        <div className=\"flex\">\n          {[\"desktop\", \"mobile\"].map((key) => {\n            const chart = key as keyof typeof chartConfig;\n            return (\n              <button\n                key={chart}\n                data-active={activeChart === chart}\n                className=\"data-[active=true]:bg-muted/50 relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-t-0 sm:border-l sm:px-8 sm:py-6\"\n                onClick={() => setActiveChart(chart)}>\n                <span className=\"text-muted-foreground text-xs\">{chartConfig[chart].label}</span>\n                <span className=\"text-lg leading-none font-bold sm:text-3xl\">\n                  {total[key as keyof typeof total].toLocaleString()}\n                </span>\n              </button>\n            );\n          })}\n        </div>\n      </CardHeader>\n      <CardContent className=\"px-2 sm:p-6\">\n        <ChartContainer config={chartConfig} className=\"aspect-auto h-[250px] w-full\">\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12\n            }}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={32}\n              tickFormatter={(value) => {\n                const date = new Date(value);\n                return date.toLocaleDateString(\"en-US\", {\n                  month: \"short\",\n                  day: \"numeric\"\n                });\n              }}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  className=\"w-[150px]\"\n                  nameKey=\"views\"\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                      year: \"numeric\"\n                    });\n                  }}\n                />\n              }\n            />\n            <Bar dataKey={activeChart} fill={`var(--color-${activeChart})`} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/chart.tsx"
    }
  ],
  "meta": {
    "isPro": false
  }
}