Charts

<RadarChart data={radarData} metrics={metrics} size={250}>
  <RadarGrid />
  <RadarAxis />
  <RadarLabels />
  {radarData.map((item, index) => (
    <RadarArea index={index} key={item.label} />
  ))}
</RadarChart>

const metrics = [
  { key: "attack", label: "Attack" },
  { key: "defense", label: "Defense" },
  { key: "magic", label: "Magic" },
];

<RadarChart data={data} metrics={metrics} size={250}>
  <RadarGrid />
  <RadarAxis />
  <RadarLabels />
  {data.map((item, i) => (
    <RadarArea index={i} key={item.label} />
  ))}
</RadarChart>

<RadarChart data={skillsData} metrics={skillMetrics} size={250}>
  <RadarGrid showLabels={false} />
  <RadarLabels />
  {skillsData.map((item, i) => (
    <RadarArea
      index={i}
      key={item.label}
      showGlow={false}
      showPoints={false}
      showStroke={false}
    />
  ))}
</RadarChart>

<RadarChart data={[data[0]]} metrics={metrics} size={250}>
  <RadarGrid />
  <RadarAxis />
  <RadarLabels />
  <RadarArea index={0} showPoints={false} />
</RadarChart>

<RadarChart data={data} levels={3} metrics={metrics} size={250}>
  <RadarGrid showLabels={false} />
  <RadarLabels />
  {data.map((item, i) => (
    <RadarArea index={i} key={item.label} showPoints={false} />
  ))}
</RadarChart>

<RadarChart data={data} metrics={metrics} size={250}>
  <RadarGrid />
  <RadarLabels />
  {data.map((item, i) => (
    <RadarArea index={i} key={item.label} />
  ))}
</RadarChart>