Radar chart

const data = [
  { metric: "Performance", value: 85 },
  { metric: "Reliability", value: 92 },
  { metric: "Usability", value: 78 },
  { metric: "Security", value: 88 },
  { metric: "Scalability", value: 70 },
  { metric: "Cost", value: 65 },
]

const chartConfig = {
  value: { label: "Score", color: "var(--chart-1)" },
}

<ChartContainer config={chartConfig} className="h-[350px]">
  <RadarChart data={data} cx="50%" cy="50%" outerRadius="80%">
    <PolarGrid className="stroke-border" />
    <PolarAngleAxis dataKey="metric" className="text-xs fill-muted-foreground" />
    <PolarRadiusAxis angle={30} domain={[0, 100]} className="text-xs fill-muted-foreground" />
    <Radar
      dataKey="value"
      fill="var(--chart-1)"
      fillOpacity={0.2}
      stroke="var(--chart-1)"
      strokeWidth={2}
    />
    <ChartTooltip content={<ChartTooltipContent />} />
  </RadarChart>
</ChartContainer>

const chartConfig = {
  current: { label: "Current", color: "var(--chart-1)" },
  target: { label: "Target", color: "var(--chart-3)" },
}

<RadarChart data={data} cx="50%" cy="50%" outerRadius="80%">
  <PolarGrid className="stroke-border" />
  <PolarAngleAxis dataKey="metric" className="text-xs fill-muted-foreground" />
  <Radar
    dataKey="current"
    fill="var(--chart-1)"
    fillOpacity={0.15}
    stroke="var(--chart-1)"
    strokeWidth={2}
  />
  <Radar
    dataKey="target"
    fill="var(--chart-3)"
    fillOpacity={0.15}
    stroke="var(--chart-3)"
    strokeWidth={2}
  />
  <ChartLegend content={<ChartLegendContent />} />
</RadarChart>