نمودار میله‌ای
bar-chartنمودارستونی یا افقی، گروهی، انباشته یا صددرصدی، با مقدار منفی، رنگ جدا برای هر دسته و برجسته کردن یک ستون.
| ۱۴۰۴ | ۱۴۰۵ | |
|---|---|---|
| بهار | ۱۸۲ | ۲۳۶ |
| تابستان | ۲۰۵ | ۲۵۱ |
| پاییز | ۱۷۱ | ۲۱۴ |
| زمستان | ۱۹۶ | ۰ |
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگی‌هاش را می‌نویسه.
$ npx vibefarsi add bar-chartنصب دستی
محتوای تب «کد» را در
components/charts/bar-chart.tsxبگذارید. پیش‌نیاز: chart-core.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { BarChart } from "@/components/charts/bar-chart"23<BarChart title="فروش فصلی" data={quarters} x="q"4 series={[{ key: "y1404", label: "۱۴۰۴" }, { key: "y1405", label: "۱۴۰۵" }]} />56// افقی، از برچسب‌های سمت راست به چپ رشد می‌کنه:7<BarChart title="سهم بانک‌ها" orientation="horizontal" data={banks} x="bank"8 series={[{ key: "count", label: "تراکنش" }]} showValues />پراپ‌ها
| پراپ | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| orientation | "vertical" | "horizontal" | "vertical" | افقی برای برچسب‌های بلند فارسی بهتره. |
| stack | "none" | "stacked" | "percent" | "none" | none سری‌ها را کنار هم می‌گذاره. |
| showValues | boolean | false | عدد هر میله (یا جمع انباشته) سر میله نوشته میشه. |
| colors | string[] | - | وقتی فقط یک سری دارید، یک رنگ برای هر دسته. |
| highlight | number | - | بقیه‌ی میله‌ها کم‌رنگ میشن، مثلاً برای ماه جاری. |
| radius | number | 4 | فقط سر میله گرد میشه، نه پایه‌اش. |
نکته‌ها
- در حالت گروهی سری اول سمت راست هر دسته قرار می‌گیره تا ترتیب راهنما و میله‌ها یکی باشه.
- ارتفاع نمودار افقی اگه ندید از تعداد ردیف‌ها حساب میشه.