نمودار خطی

نصب

1. با CLI

   اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگی‌هاش را می‌نویسه.

   $ npx vibefarsi add line-chart

2. نصب دستی

   محتوای تب «کد» را در components/charts/line-chart.tsx بگذارید. پیش‌نیاز: chart-core.

   $ npm i lucide-react
   کپی کل فایلregistry json

استفاده

1import { LineChart } from "@/components/charts/line-chart"23const data = [4  { month: "فروردین", sales: 4_200_000, target: 5_000_000 },5  { month: "اردیبهشت", sales: 5_100_000, target: 5_000_000 },6  { month: "خرداد", sales: 4_800_000, target: 5_500_000 },7]89<LineChart10  title="فروش ماهانه"11  data={data}12  x="month"13  series={[{ key: "sales", label: "فروش" }, { key: "target", label: "هدف", dashed: true }]}14  format={formatToman}15/>

پراپ‌ها

نکته‌ها

• اولین ردیف سمت راست می‌نشینه و زمان به چپ می‌ره، همون جهتی که متن فارسی خوانده میشه.
• مقدار null یا جاافتاده خط را می‌شکنه به‌جای این‌که به صفر سقوط کنه.
• تاریخ‌های Date خودشون به شمسی مثل «۱۲ مهر» تبدیل میشن.