نمودارهای زیبا با Recharts؛ کپی کنید و در پروژه‌تان استفاده کنید.
به‌روز شد: کامپوننت chart حالا از Recharts v3 استفاده می‌کند. اگر کد قبلی دارید، بخش به‌روزرسانی به Recharts v3 را ببینید.
نمودارها مجموعه‌ای از کامپوننت‌های نمودار هستند که می‌توانید آن‌ها را در اپ خود کپی کنید.
این نمودارها از ابتدا ظاهر خوبی دارند، با سایر کامپوننت‌ها هماهنگ‌اند و کاملاً قابل سفارشی‌سازی هستند.
کتابخانهٔ نمودارها را ببینید.
یک نمودار میله‌ای می‌سازیم و شبکه، محور، تولتیپ و راهنما را اضافه می‌کنیم.
ابتدا داده را تعریف کنید
این داده تعداد کاربران دسکتاپ و موبایل در هر ماه را نشان می‌دهد.
نکته: شکل داده آزاد است. با prop به نام dataKey داده را به نمودار وصل کنید.
const chartData = [
{ month: "فروردین", desktop: 186, mobile: 80 },
{ month: "اردیبهشت", desktop: 305, mobile: 200 },
{ month: "خرداد", desktop: 237, mobile: 120 },
{ month: "تیر", desktop: 73, mobile: 190 },
{ month: "مرداد", desktop: 209, mobile: 130 },
{ month: "شهریور", desktop: 214, mobile: 140 },
]
پیکربندی نمودار را تعریف کنید
chartConfig برچسب‌ها، آیکون‌ها و رنگ‌ها را نگه می‌دارد.
components/example-chart.tsximport { type ChartConfig } from "@/components/ui/chart"
const chartConfig = {
desktop: {
label: "دسکتاپ",
color: "#2563eb",
},
mobile: {
label: "موبایل",
color: "#60a5fa",
},
} satisfies ChartConfig
نمودار را بسازید
حالا با کامپوننت‌های Recharts نمودار را بسازید.
مهم: روی ChartContainer حتماً min-h-[VALUE] بگذارید تا نمودار واکنش‌گرا باشد.
شبکه را به نمودار اضافه می‌کنیم.
کامپوننت CartesianGrid را import کنید.
import { Bar, BarChart, CartesianGrid } from "recharts"
CartesianGrid را به نمودار اضافه کنید.
<ChartContainer config={chartConfig} className="min-h-[200px] w-full">
<BarChart accessibilityLayer data={chartData}>
<CartesianGrid vertical={false} />
<Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
<Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
</BarChart>
</ChartContainer>
برای محور افقی از XAxis استفاده کنید.
کامپوننت XAxis را import کنید.
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
XAxis را به نمودار اضافه کنید.
<ChartContainer config={chartConfig} className="h-[200px] w-full">
<BarChart accessibilityLayer data={chartData}>
<CartesianGrid vertical={false} />
<XAxis
dataKey="month"
tickLine={false}
tickMargin={10}
axisLine={false}
tickFormatter={(value) => value.slice(0, 3)}
/>
<Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
<Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
</BarChart>
</ChartContainer>
تا اینجا فقط از کامپوننت‌های Recharts استفاده کردیم. برای تولتیپ، ChartTooltip و ChartTooltipContent را از chart بیاورید.
ChartTooltip و ChartTooltipContent را import کنید.
import { ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
آن‌ها را به نمودار اضافه کنید.
<ChartContainer config={chartConfig} className="h-[200px] w-full">
<BarChart accessibilityLayer data={chartData}>
<CartesianGrid vertical={false} />
<XAxis
dataKey="month"
tickLine={false}
tickMargin={10}
axisLine={false}
tickFormatter={(value) => value.slice(0, 3)}
/>
<ChartTooltip content={<ChartTooltipContent />} />
<Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
<Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
</BarChart>
</ChartContainer>
روی نمودار هاور کنید تا تولتیپ را ببینید.
همین کار را برای راهنما با ChartLegend و ChartLegendContent انجام دهید.
ChartLegend و ChartLegendContent را import کنید.
import { ChartLegend, ChartLegendContent } from "@/components/ui/chart"
آن‌ها را به نمودار اضافه کنید.
<ChartContainer config={chartConfig} className="h-[200px] w-full">
<BarChart accessibilityLayer data={chartData}>
<CartesianGrid vertical={false} />
<XAxis
dataKey="month"
tickLine={false}
tickMargin={10}
axisLine={false}
tickFormatter={(value) => value.slice(0, 3)}
/>
<ChartTooltip content={<ChartTooltipContent />} />
<ChartLegend content={<ChartLegendContent />} />
<Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
<Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
</BarChart>
</ChartContainer>
اولین نمودارتان آماده است.