Radar Chart

Radar Chart

Preview

Code

src/app/shared/chart-widgets/simple-radar-chart.tsx

'use client';

import {
  Radar,
  RadarChart,
  PolarGrid,
  PolarAngleAxis,
  PolarRadiusAxis,
  ResponsiveContainer,
} from 'recharts';

export default function SimpleRadarChart() {
  return (
    <ResponsiveContainer width="100%" height="100%">
      <RadarChart
        className={cn(
          tickStyles.base,
          tickStyles.two,
          tickStyles.three,
          tickStyles.four,
          tickStyles.five,
          tickStyles.six,
          className
        )}
        cx="50%"
        cy="50%"
        outerRadius="80%"
        data={data}
      >
        <PolarGrid className="stroke-gray-200" />
        <PolarAngleAxis dataKey={dataKey} />
        <PolarRadiusAxis />
        <Radar
          name="Mike"
          dataKey={radarKey}
          stroke={stroke}
          fill={fill}
          strokeWidth={1.5}
          className="fill-opacity-60 dark:fill-opacity-20"
        />
      </RadarChart>
    </ResponsiveContainer>
  );
}