Radar chart

"use client";

import {
  ChartcnRadarChart,
  Radar,
  PolarGrid,
  PolarAngleAxis,
  Tooltip,
  Legend,
  Dot,
  ActiveDot,
} from "@/components/charts/radar-chart";
import type { ChartConfig } from "@/components/ui/chart";

const data = [
  { desktop: 186, mobile: 80, skill: "JavaScript" },
  { desktop: 305, mobile: 200, skill: "TypeScript" },
  { desktop: 237, mobile: 120, skill: "React" },
  { desktop: 173, mobile: 190, skill: "Node.js" },
  { desktop: 209, mobile: 130, skill: "CSS" },
  { desktop: 214, mobile: 140, skill: "Python" },
];

const chartConfig = {
  desktop: {
    colors: {
      dark: ["#60a5fa"],
      light: ["#3b82f6"],
    },
    label: "Desktop",
  },
  mobile: {
    colors: {
      dark: ["#34d399"],
      light: ["#10b981"],
    },
    label: "Mobile",
  },
} satisfies ChartConfig;

export function ChartcnExampleRadarChart() {
  return (
    <ChartcnRadarChart
      data={data}
      config={chartConfig}
      className="h-full w-full p-4"
    >
      <PolarGrid />
      <PolarAngleAxis dataKey="skill" />
      <Legend isClickable />
      <Tooltip />
      <Radar
        dataKey="desktop"
        variant="filled" // [!code highlight]
        isClickable
      >
        <Dot variant="colored-border" />
        <ActiveDot variant="default" />
      </Radar>
      <Radar dataKey="mobile" variant="filled" isClickable>
        <Dot variant="colored-border" />
        <ActiveDot variant="default" />
      </Radar>
    </ChartcnRadarChart>
  );
}