{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "line-chart",
  "type": "registry:ui",
  "title": "Line Chart",
  "description": "A line chart for trends over time with optional dots, labels, and multiple series.",
  "dependencies": [
    "recharts"
  ],
  "registryDependencies": [
    "chart",
    "card"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/line-chart.tsx",
      "content": "\"use client\";\n\nimport type * as React from \"react\";\nimport {\n\tLabelList,\n\tLine,\n\tLineChart as RechartsLineChart,\n\tXAxis,\n\tYAxis,\n} 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 maxWidth =\n\t\tdataPoints > 0 ? Math.min(768, Math.max(300, dataPoints * 80)) : undefined;\n\treturn (\n\t\t<Card\n\t\t\tclassName=\"w-full max-w-3xl\"\n\t\t\tstyle={maxWidth ? { maxWidth } : undefined}\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 LineChartProps = {\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\tshowDots?: boolean;\n\tshowLabels?: boolean;\n};\n\nexport function LineChart(props: LineChartProps) {\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\tconst showLegend = keys.length > 1;\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<RechartsLineChart\n\t\t\t\t\tdata={props.data}\n\t\t\t\t\t{...(props.showLabels === true\n\t\t\t\t\t\t? { margin: { top: 24, left: 12, right: 12 } }\n\t\t\t\t\t\t: {})}\n\t\t\t\t>\n\t\t\t\t\t<XAxis\n\t\t\t\t\t\tdataKey={props.xKey}\n\t\t\t\t\t\taxisLine={false}\n\t\t\t\t\t\ttickLine={false}\n\t\t\t\t\t\ttick={{ fill: \"#71717a\", fontSize: 11 }}\n\t\t\t\t\t/>\n\t\t\t\t\t<YAxis\n\t\t\t\t\t\taxisLine={false}\n\t\t\t\t\t\ttickLine={false}\n\t\t\t\t\t\ttick={{ fill: \"#71717a\", fontSize: 11 }}\n\t\t\t\t\t/>\n\t\t\t\t\t<ChartTooltip 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<Line\n\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\ttype=\"monotone\"\n\t\t\t\t\t\t\tdataKey={key}\n\t\t\t\t\t\t\tstroke={`var(--color-${key})`}\n\t\t\t\t\t\t\tstrokeWidth={2}\n\t\t\t\t\t\t\tdot={\n\t\t\t\t\t\t\t\tprops.showDots !== false\n\t\t\t\t\t\t\t\t\t? { fill: `var(--color-${key})` }\n\t\t\t\t\t\t\t\t\t: false\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{props.showLabels === true && (\n\t\t\t\t\t\t\t\t<LabelList\n\t\t\t\t\t\t\t\t\tposition=\"top\"\n\t\t\t\t\t\t\t\t\toffset={12}\n\t\t\t\t\t\t\t\t\tfontSize={12}\n\t\t\t\t\t\t\t\t\tfill=\"#a1a1aa\"\n\t\t\t\t\t\t\t\t\tdataKey={props.xKey}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</Line>\n\t\t\t\t\t))}\n\t\t\t\t</RechartsLineChart>\n\t\t\t</ChartContainer>\n\t\t</ChartCard>\n\t);\n}\n",
      "type": "registry:ui"
    }
  ]
}