Radar Chart Example

1"use client"
2 
3// In your app (monorepo/npm): import { RadarChart, RadarGrid, RadarAxis, RadarLabels, RadarArea } from "@bklitui/ui/charts"
4import { RadarChart, RadarGrid, RadarAxis, RadarLabels, RadarArea } from "@/components/charts"
5 
6const metrics = [
7  { key: "speed", label: "Speed" },
8  { key: "reliability", label: "Reliability" },
9  { key: "comfort", label: "Comfort" },
10  { key: "safety", label: "Safety" },
11  { key: "efficiency", label: "Efficiency" },
12];
13const data = [
14  { id: "a", speed: 80, reliability: 70, comfort: 60, safety: 90, efficiency: 75 },
15];
16 
17export default function Component() {
18  return (
19    <main className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
20      <div className="w-full max-w-3xl">
21        <RadarChart data={data} metrics={metrics} size={320}>
22  <RadarGrid />
23  <RadarAxis />
24  <RadarLabels fontSize={10} offset={16} />
25  {data.map((row, i) => (
26    <RadarArea key={row.id} index={i} fill="var(--chart-line-primary)" fillOpacity={0.35} />
27  ))}
28</RadarChart>
29      </div>
30    </main>
31  )
32}