chart-radar-grid-custom

1"use client"
2 
3import { TrendingUp } from "lucide-react"
4import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
5 
6import {
7  Card,
8  CardContent,
9  CardDescription,
10  CardFooter,
11  CardHeader,
12  CardTitle,
13} from "@/registry/new-york/ui/card"
14import {
15  ChartConfig,
16  ChartContainer,
17  ChartTooltip,
18  ChartTooltipContent,
19} from "@/registry/new-york/ui/chart"
20const chartData = [
21  { month: "January", desktop: 186 },
22  { month: "February", desktop: 305 },
23  { month: "March", desktop: 237 },
24  { month: "April", desktop: 273 },
25  { month: "May", desktop: 209 },
26  { month: "June", desktop: 214 },
27]
28 
29const chartConfig = {
30  desktop: {
31    label: "Desktop",
32    color: "hsl(var(--chart-1))",
33  },
34} satisfies ChartConfig
35 
36export default function Component() {
37  return (
38    <Card>
39      <CardHeader className="items-center pb-4">
40        <CardTitle>Radar Chart - Grid Custom</CardTitle>
41        <CardDescription>
42          Showing total visitors for the last 6 months
43        </CardDescription>
44      </CardHeader>
45      <CardContent className="pb-0">
46        <ChartContainer
47          config={chartConfig}
48          className="mx-auto aspect-square max-h-[250px]"
49        >
50          <RadarChart data={chartData}>
51            <ChartTooltip
52              cursor={false}
53              content={<ChartTooltipContent hideLabel />}
54            />
55            <PolarGrid radialLines={false} polarRadius={[90]} strokeWidth={1} />
56            <PolarAngleAxis dataKey="month" />
57            <Radar
58              dataKey="desktop"
59              fill="var(--color-desktop)"
60              fillOpacity={0.6}
61            />
62          </RadarChart>
63        </ChartContainer>
64      </CardContent>
65      <CardFooter className="flex-col gap-2 text-sm">
66        <div className="flex items-center gap-2 font-medium leading-none">
67          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
68        </div>
69        <div className="flex items-center gap-2 leading-none text-muted-foreground">
70          January - June 2024
71        </div>
72      </CardFooter>
73    </Card>
74  )
75}