{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stacked-bar-chart",
  "type": "registry:ui",
  "title": "Stacked bar chart",
  "description": "Stacked bar chart that splits each column into colored series segments with hover titles, category labels underneath and a series legend. Uses chart CSS tokens.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/stacked-bar-chart.tsx",
      "type": "registry:ui",
      "target": "components/ui/stacked-bar-chart.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\n/** Vertical bars stacked by series, with a legend, for comparing revenue mix across periods. */\ntype Stack = { label: string; values: number[] }\n\ntype StackedBarChartProps = {\n  /** One stack per period; `values` line up with `seriesLabels`. Defaults to eight months of Lumen revenue. */\n  data?: Stack[]\n  /** Names of the stacked series, bottom to top. */\n  seriesLabels?: string[]\n  className?: string\n  label?: string\n}\n\nconst SAMPLE_SERIES = [\"Subscriptions\", \"Usage\", \"Services\"]\n\nconst SAMPLE_DATA: Stack[] = [\n  { label: \"Jan\", values: [48, 14, 6] },\n  { label: \"Feb\", values: [52, 16, 8] },\n  { label: \"Mar\", values: [55, 19, 7] },\n  { label: \"Apr\", values: [61, 18, 10] },\n  { label: \"May\", values: [64, 23, 9] },\n  { label: \"Jun\", values: [70, 24, 12] },\n  { label: \"Jul\", values: [74, 29, 11] },\n  { label: \"Aug\", values: [81, 31, 14] },\n]\n\nfunction StackedBarChart({\n  data = SAMPLE_DATA,\n  seriesLabels = SAMPLE_SERIES,\n  className,\n  label = \"Stacked bar chart\",\n}: StackedBarChartProps) {\n  const colors = [\"var(--chart-1)\", \"var(--chart-2)\", \"var(--chart-3)\", \"var(--chart-5)\"]\n  const max = Math.max(...data.map((d) => d.values.reduce((a, b) => a + b, 0)), 1)\n  return (\n    <div data-slot=\"stacked-bar-chart\" role=\"img\" aria-label={label} className={cn(\"w-full max-w-lg space-y-3\", className)}>\n      <div className=\"flex h-40 items-stretch gap-2 border-b border-border\">\n        {data.map((d) => {\n          return (\n            <div key={d.label} className=\"flex min-h-0 flex-1 flex-col items-center\">\n              <div className=\"flex min-h-0 w-full flex-1 flex-col justify-end gap-px overflow-hidden rounded-t-[5px]\">\n                {[...d.values].reverse().map((v, i) => {\n                  const idx = d.values.length - 1 - i\n                  return (\n                    <div\n                      key={idx}\n                      title={`${seriesLabels[idx]}: ${v}`}\n                      style={{ height: `${(v / max) * 100}%`, background: colors[idx % colors.length] }}\n                      className=\"w-full\"\n                    />\n                  )\n                })}\n              </div>\n              </div>\n          )\n        })}\n      </div>\n      <div className=\"-mt-1 flex gap-2\">\n        {data.map((d) => (\n          <span key={d.label} className=\"flex-1 text-center font-mono text-[10px] text-fg-subtle\">{d.label}</span>\n        ))}\n      </div>\n      <div className=\"flex flex-wrap gap-3\">\n        {seriesLabels.map((s, i) => (\n          <span key={s} className=\"inline-flex items-center gap-1.5 text-xs text-fg-muted\">\n            <span className=\"size-2 rounded-sm\" style={{ background: colors[i % colors.length] }} aria-hidden />\n            {s}\n          </span>\n        ))}\n      </div>\n    </div>\n  )\n}\nexport { StackedBarChart }\nexport type { StackedBarChartProps, Stack }\n"
    }
  ]
}