Radar Chart

import { RadarChart } from "@/components/ui/radar-chart";

const data = [
  { label: "Math", value: 120 },
  { label: "Chinese", value: 98 },
  { label: "English", value: 86 },
  { label: "Geography", value: 99 },
  { label: "Physics", value: 85 },
  { label: "History", value: 65 },
];

export function MyRadarChart() {
  return <RadarChart data={data} />;
}

npx @aniui/cli add radar-chart

import { RadarChart } from "@/components/ui/radar-chart";

const series = [
  { data, color: "#2563eb" },
  { data: data2, color: "#f97316" },
];

export function MultiRadarChart() {
  return <RadarChart series={series} />;
}

import { RadarChart } from "@/components/ui/radar-chart";

export function FilledRadarChart() {
  return <RadarChart data={data} fillOpacity={0.5} />;
}

import { RadarChart } from "@/components/ui/radar-chart";

export function RadarChartWithDots() {
  return <RadarChart data={data} showDots />;
}

import { RadarChart } from "@/components/ui/radar-chart";

export function RadarChartCircleGrid() {
  return <RadarChart data={data} gridLevels={5} />;
}

import { RadarChart } from "@/components/ui/radar-chart";

export function RadarChartWithLegend() {
  return (
    <RadarChart
      series={series}
      showLabels
      showDots
      height={240}
    />
  );
}