Chartcn

Shadcn Radar Chart Generator

Compare profiles across several dimensions with a radar (spider) chart, one translucent polygon per series.

CSV, TSV from Excel/Sheets, a Markdown table, or JSON.

CSV
Code
Image
chart.tsx
"use client"

import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
import {
  type ChartConfig,
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const data = [
  { Skill: "Problem Solving", Junior: 60, Senior: 90 },
  { Skill: "Communication", Junior: 70, Senior: 85 },
  { Skill: "Technical Depth", Junior: 50, Senior: 95 },
  { Skill: "Teamwork", Junior: 80, Senior: 88 },
  { Skill: "Leadership", Junior: 40, Senior: 82 },
]

const chartConfig = {
  Junior: { label: "Junior", color: "var(--chart-1)" },
  Senior: { label: "Senior", color: "var(--chart-2)" },
} satisfies ChartConfig

export function Chart() {
  return (
    <ChartContainer config={chartConfig} className="aspect-square h-[350px] w-full">
      <RadarChart data={data}>
        <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="line" />} />
        <PolarAngleAxis dataKey="Skill" tick={{ fill: "var(--muted-foreground)", fontSize: 12 }} />
        <PolarGrid strokeDasharray="3 5" />
        <Radar dataKey="Junior" fill="var(--color-Junior)" fillOpacity={0.25} stroke="var(--color-Junior)" strokeWidth={2} dot={{ r: 3, fillOpacity: 1 }} />
        <Radar dataKey="Senior" fill="var(--color-Senior)" fillOpacity={0.25} stroke="var(--color-Senior)" strokeWidth={2} dot={{ r: 3, fillOpacity: 1 }} />
        <ChartLegend content={<ChartLegendContent />} itemSorter={null} />
      </RadarChart>
    </ChartContainer>
  )
}

When to use a radar chart

Radar charts suit comparing a few items across 4–8 dimensions on the same scale.

  • Skill profiles, e.g. junior vs. senior
  • Product feature scorecards
  • Competitor comparisons

Data format

  • Column 1 lists the dimensions (the spokes); each other column is a series polygon.
  • Values should share a scale, such as 0–100.
  • Paste CSV, JSON from your API, TSV copied from Excel or Google Sheets, or a Markdown table. The generated component keeps your column names as its data keys.
CSV
Skill,Junior,Senior
Problem Solving,60,90
Communication,70,85
Technical Depth,50,95
Teamwork,80,88
Leadership,40,82
Same data as JSON
[
  {"skill": "Problem Solving", "junior": 60, "senior": 90},
  {"skill": "Communication", "junior": 70, "senior": 85},
  {"skill": "Technical Depth", "junior": 50, "senior": 95},
  …
]

Options

Colors
Custom color per series polygon.

How to add it to your project

  1. 1. Add the shadcn/ui chart component (it installs Recharts):
    npx shadcn@latest add chart
  2. 2. Paste your data above, pick the options, and copy the generated chart.tsx.
  3. 3. Save it in your project (e.g. components/radar-chart.tsx) and render <Chart />, or <Chart data={rows} /> in Data as prop mode.

Radar Chart FAQ