LineChart

import { LineChart } from "@vortex/ui-cals"
 
const multiSeries = [
  {
    data: [
      { quarter: "Q1", value: 4500 },
      { quarter: "Q2", value: 5200 },
      { quarter: "Q3", value: 4800 },
      { quarter: "Q4", value: 6100 },
    ],
    xKey: "quarter",
    yKey: "value",
    name: "2024",
  },
  // 2025 시리즈 …
]
 
<LineChart series={multiSeries} />

const spikySeries = [
  {
    data: [
      { month: "1월", value: 0 },
      { month: "2월", value: 100 },
      { month: "3월", value: 5 },
      { month: "4월", value: 0 },
      { month: "5월", value: 90 },
      { month: "6월", value: 85 },
      { month: "7월", value: 0 },
    ],
    xKey: "month",
    yKey: "value",
    name: "값",
  },
]
 
const CURVES = ["linear", "natural", "monotone"] as const
 
<div className="grid grid-cols-1 gap-4 md:grid-cols-3">
  {CURVES.map((curve) => (
    <div key={curve} className="space-y-1">
      <p className="text-xs font-medium">curve="{curve}"</p>
      <LineChart series={spikySeries} curve={curve} height={220} />
    </div>
  ))}
</div>

<LineChart series={multiSeries} legend={false} tooltip={false} />

<LineChart series={series} showDot={false} />

<LineChart series={series} showDataLabel dataLabelPosition="bottom" />

const labeledSeries = [
  {
    data: [
      { month: "1월", sales: 350, note: "저조" },
      { month: "2월", sales: 480, note: "" },
      { month: "3월", sales: 620, note: "목표 달성" },
      { month: "4월", sales: 410, note: "" },
    ],
    xKey: "month",
    yKey: "sales",
    name: "매출",
    labelKey: "note",
  },
]
 
<LineChart series={labeledSeries} showDataLabel />

<LineChart series={largeSeries} thousandSeparator showDataLabel />

<LineChart
  series={series}
  xAxisTickFormatter={(v) => `2025년 ${v}`}
  yAxisTickFormatter={(v) => `${v}건`}
/>

<LineChart series={series} showXAxisGrid={false} showYAxisGrid />

<LineChart series={multiSeries} colors={["#f59e0b", "#8b5cf6"]} />

<LineChart series={multiSeries} legendToggle />

const [clicked, setClicked] = useState<LineChartPointClickData | null>(null)
 
<LineChart series={series} onPointClick={setClicked} />

import { LineChart, Button, FormCol, Text } from "@vortex/ui-cals"
 
<LineChart
  series={series}
  title="월별 매출"
  actions={
    <>
      <Button>조회</Button>
      <Button variant="outline">초기화</Button>
    </>
  }
  searchContent={
    <>
      <FormCol span={12}><Text label="기간" placeholder="2025-01 ~ 2025-06" /></FormCol>
      <FormCol span={12}><Text label="지점" placeholder="지점명" /></FormCol>
    </>
  }
/>

<LineChart series={series} title="접힌 채 시작" defaultCollapsed />
<LineChart series={series} title="접기 막기" collapseDisabled />

<LineChart series={profitSeries} showDataLabel />

<LineChart series={[]} />