نمودار ترکیبی
combo-chartنمودارمیله، خط و ناحیه روی یک نمودار با دو محور، مثلاً درآمد به تومان روی محور راست و نرخ تبدیل به درصد روی محور چپ.
درآمد، سفارش و نرخ تبدیل
| درآمد | نرخ تبدیل | |
|---|---|---|
| فروردین | ۱۸۵٬۰۰۰٬۰۰۰ تومان | ۲٫۳٪ |
| اردیبهشت | ۲۲۱٬۰۰۰٬۰۰۰ تومان | ۲٫۴۴٪ |
| خرداد | ۲۳۱٬۰۰۰٬۰۰۰ تومان | ۲٫۷۷٪ |
| تیر | ۲۷۸٬۰۰۰٬۰۰۰ تومان | ۲٫۷۴٪ |
| مرداد | ۲۷۶٬۰۰۰٬۰۰۰ تومان | ۲٫۶٪ |
| شهریور | ۳۱۶٬۰۰۰٬۰۰۰ تومان | ۲٫۱۶٪ |
| مهر | ۳۳۲٬۰۰۰٬۰۰۰ تومان | ۱٫۹۹٪ |
| آبان | ۳۳۸٬۰۰۰٬۰۰۰ تومان | ۱٫۷٪ |
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگی‌هاش را می‌نویسه.
$ npx vibefarsi add combo-chartنصب دستی
محتوای تب «کد» را در
components/charts/combo-chart.tsxبگذارید. پیش‌نیاز: chart-core.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { ComboChart } from "@/components/charts/combo-chart"23<ComboChart4 title="درآمد و نرخ تبدیل"5 data={months}6 x="month"7 series={[8 { key: "revenue", label: "درآمد", type: "bar" },9 { key: "orders", label: "سفارش", type: "line" },10 { key: "rate", label: "نرخ تبدیل", type: "line", axis: "left", dashed: true },11 ]}12 axisFormatLeft={(n) => percentFa(n)}13 formatLeft={(n) => percentFa(n, 1)}14/>پراپ‌ها
| پراپ | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
| series[].type | "bar" | "line" | "area" | - | شکل هر سری. میله‌ها کنار هم گروه میشن و خط‌ها روی‌شون می‌آن. |
| series[].axis | "right" | "left" | "right" | محور اصلی سمت راسته و محور دوم سمت چپ. |
| formatLeft / axisFormatLeft | (n) => string | - | قالب جدا برای سری‌های محور چپ. |
نکته‌ها
- خطوط شبکه فقط از محور راست کشیده میشن و تیک‌های محور چپ با همون ردیف‌ها هم‌تراز میشن تا دو شبکه روی هم نیفتن.