{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bar-chart",
  "type": "registry:ui",
  "title": "Bar Chart",
  "description": "A bar chart for comparisons and distributions, with stacked, horizontal, and grouped variants.",
  "dependencies": [
    "recharts"
  ],
  "registryDependencies": [
    "chart",
    "card"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/bar-chart.tsx",
      "content": "\"use client\";\n\nimport type * as React from \"react\";\nimport { Bar, BarChart as RechartsBarChart, XAxis, YAxis } from \"recharts\";\nimport { Card, CardContent, CardFooter, CardHeader } from \"@/components/ui/card\";\nimport {\n\ttype ChartConfig,\n\tChartContainer,\n\tChartLegend,\n\tChartLegendContent,\n\tChartTooltip,\n\tChartTooltipContent,\n} from \"@/components/ui/chart\";\n\nconst CHART_COLORS = [\"#00bbff\", \"#34d399\", \"#60a5fa\", \"#f472b6\", \"#fb923c\"];\n\nfunction toKeys(v: string | string[]): string[] {\n\treturn Array.isArray(v) ? v : [v];\n}\n\nfunction ChartCard({\n\ttitle,\n\tdescription,\n\tfooter,\n\tchildren,\n\tdataPoints = 0,\n}: {\n\ttitle?: string;\n\tdescription?: string;\n\tfooter?: string;\n\tchildren: React.ReactNode;\n\tdataPoints?: number;\n}) {\n\tconst width =\n\t\tdataPoints > 0 ? Math.min(768, Math.max(300, dataPoints * 80)) : undefined;\n\treturn (\n\t\t<Card\n\t\t\tclassName=\"max-w-3xl\"\n\t\t\tstyle={width ? { width } : { width: \"100%\" }}\n\t\t>\n\t\t\t{(title || description) && (\n\t\t\t\t<CardHeader className=\"pb-0\">\n\t\t\t\t\t{title && (\n\t\t\t\t\t\t<p className=\"text-sm font-semibold text-card-foreground\">\n\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t)}\n\t\t\t\t\t{description && (\n\t\t\t\t\t\t<p className=\"text-xs text-muted-foreground\">{description}</p>\n\t\t\t\t\t)}\n\t\t\t\t</CardHeader>\n\t\t\t)}\n\t\t\t<CardContent>{children}</CardContent>\n\t\t\t{footer && (\n\t\t\t\t<CardFooter>\n\t\t\t\t\t<p className=\"text-xs text-muted-foreground\">{footer}</p>\n\t\t\t\t</CardFooter>\n\t\t\t)}\n\t\t</Card>\n\t);\n}\n\nexport type BarChartProps = {\n\tdata: Array<Record<string, string | number>>;\n\txKey: string;\n\tyKeys: string | string[];\n\ttitle?: string;\n\tdescription?: string;\n\tfooter?: string;\n\tcolors?: string[];\n\tvariant?: \"default\" | \"stacked\" | \"horizontal\" | \"multiple\";\n};\n\nexport function BarChart(props: BarChartProps) {\n\tconst keys = toKeys(props.yKeys);\n\tconst colors = props.colors ?? CHART_COLORS;\n\tconst chartConfig: ChartConfig = Object.fromEntries(\n\t\tkeys.map((key, i) => [\n\t\t\tkey,\n\t\t\t{ label: key, color: colors[i % colors.length] },\n\t\t]),\n\t);\n\n\tconst isStacked = props.variant === \"stacked\";\n\tconst isHorizontal = props.variant === \"horizontal\";\n\tconst alwaysLegend = props.variant === \"multiple\";\n\tconst showLegend = alwaysLegend || keys.length > 1;\n\n\treturn (\n\t\t<ChartCard\n\t\t\ttitle={props.title}\n\t\t\tdescription={props.description}\n\t\t\tfooter={props.footer}\n\t\t\tdataPoints={props.data.length}\n\t\t>\n\t\t\t<ChartContainer config={chartConfig} className=\"h-50 w-full\">\n\t\t\t\t<RechartsBarChart\n\t\t\t\t\tdata={props.data}\n\t\t\t\t\tlayout={isHorizontal ? \"vertical\" : \"horizontal\"}\n\t\t\t\t>\n\t\t\t\t\t{isHorizontal ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<YAxis\n\t\t\t\t\t\t\t\tdataKey={props.xKey}\n\t\t\t\t\t\t\t\ttype=\"category\"\n\t\t\t\t\t\t\t\taxisLine={false}\n\t\t\t\t\t\t\t\ttickLine={false}\n\t\t\t\t\t\t\t\ttick={{ fill: \"#71717a\", fontSize: 11 }}\n\t\t\t\t\t\t\t\twidth={80}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<XAxis\n\t\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\t\taxisLine={false}\n\t\t\t\t\t\t\t\ttickLine={false}\n\t\t\t\t\t\t\t\ttick={{ fill: \"#71717a\", fontSize: 11 }}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<XAxis\n\t\t\t\t\t\t\t\tdataKey={props.xKey}\n\t\t\t\t\t\t\t\taxisLine={false}\n\t\t\t\t\t\t\t\ttickLine={false}\n\t\t\t\t\t\t\t\ttick={{ fill: \"#71717a\", fontSize: 11 }}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<YAxis\n\t\t\t\t\t\t\t\taxisLine={false}\n\t\t\t\t\t\t\t\ttickLine={false}\n\t\t\t\t\t\t\t\ttick={{ fill: \"#71717a\", fontSize: 11 }}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t\t<ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n\t\t\t\t\t{showLegend && <ChartLegend content={<ChartLegendContent />} />}\n\t\t\t\t\t{keys.map((key) => (\n\t\t\t\t\t\t<Bar\n\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\tdataKey={key}\n\t\t\t\t\t\t\tfill={`var(--color-${key})`}\n\t\t\t\t\t\t\tradius={8}\n\t\t\t\t\t\t\tmaxBarSize={40}\n\t\t\t\t\t\t\t{...(isStacked ? { stackId: \"stack\" } : {})}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</RechartsBarChart>\n\t\t\t</ChartContainer>\n\t\t</ChartCard>\n\t);\n}\n",
      "type": "registry:ui"
    }
  ]
}