{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "line-chart",
  "type": "registry:ui",
  "title": "Line chart",
  "description": "A multi series SVG line chart with smooth curves, a dashed hairline grid and dots on the last point of each line, colored from chart tokens. No library.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/area-chart.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/line-chart.tsx",
      "type": "registry:ui",
      "target": "components/ui/line-chart.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { smoothPath } from \"@/components/ui/area-chart\"\n\n/** LineChart — multiple smooth series on a hairline grid, with end-point dots. */\n\nconst COLORS = [\"var(--chart-1)\", \"var(--chart-2)\", \"var(--chart-3)\", \"var(--chart-4)\", \"var(--chart-5)\"]\n\n// Lumen MRR by month ($k): total, expansion, churn.\nconst SAMPLE_SERIES: number[][] = [\n  [12, 14, 13, 17, 19, 18, 23, 26, 25, 30, 33, 36],\n  [4, 5, 6, 6, 8, 9, 9, 11, 12, 14, 15, 17],\n  [6, 6, 5, 6, 5, 5, 4, 5, 4, 4, 3, 3],\n]\n\ntype LineChartProps = {\n  /** One array of values per series; all series share the x axis. */\n  series?: number[][]\n  className?: string\n  label?: string\n  grid?: boolean\n}\n\nfunction LineChart({\n  series = SAMPLE_SERIES,\n  className,\n  label = \"Line chart\",\n  grid = true,\n}: LineChartProps) {\n  const flat = series.flat()\n  const max = Math.max(...flat, 1)\n  const min = Math.min(...flat, 0)\n  const w = 320\n  const h = 120\n  const pad = 6\n  const toPts = (data: number[]) =>\n    data.map((v, i) => [(i / Math.max(data.length - 1, 1)) * w, h - pad - ((v - min) / (max - min || 1)) * (h - pad * 2)] as const)\n  return (\n    <div data-slot=\"line-chart\" className={cn(\"relative h-32 w-full\", className)}>\n      <svg role=\"img\" aria-label={label} viewBox={`0 0 ${w} ${h}`} preserveAspectRatio=\"none\" className=\"absolute inset-0 size-full overflow-visible\">\n        {grid\n          ? [0, 0.25, 0.5, 0.75, 1].map((f) => (\n              <line key={f} x1=\"0\" x2={w} y1={pad + (h - pad * 2) * f} y2={pad + (h - pad * 2) * f} className=\"stroke-border\" strokeWidth=\"1\" strokeDasharray={f === 1 ? undefined : \"2 3\"} vectorEffect=\"non-scaling-stroke\" />\n            ))\n          : null}\n        {series.map((data, si) => (\n          <path key={si} d={smoothPath(toPts(data))} fill=\"none\" stroke={COLORS[si % COLORS.length]} strokeWidth={si === 0 ? 1.75 : 1.5} strokeOpacity={si === 0 ? 1 : 0.85} strokeLinecap=\"round\" vectorEffect=\"non-scaling-stroke\" />\n        ))}\n      </svg>\n      {series.map((data, si) => {\n        const p = toPts(data).at(-1)\n        if (!p) return null\n        return (\n          <span\n            key={si}\n            aria-hidden\n            className=\"absolute size-2 -translate-x-1/2 -translate-y-1/2 rounded-full border-[1.5px] border-surface\"\n            style={{ left: `${(p[0] / w) * 100}%`, top: `${(p[1] / h) * 100}%`, background: COLORS[si % COLORS.length] }}\n          />\n        )\n      })}\n    </div>\n  )\n}\nexport { LineChart }\nexport type { LineChartProps }\n"
    }
  ]
}