# Listening Moods Radar Chart

> Card with a radar chart scoring six listening moods out of 100, each axis label carrying its score so the values read without the shape. Client component on recharts 3.8.

A shadcn/ui block from the [@01orbital](https://01orbital.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/01orbital/radar-chart-01).

- Page, with a live preview: https://shadcn.exchange/r/01orbital/radar-chart-01
- Screenshot: https://shadcn.exchange/shot/01orbital/radar-chart-01/light.png
- Registry item: https://01orbital.dev/r/radar-chart-01.json
- Categories: charts
- Listed: 2026-11-01, source last changed 2026-11-01

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/01orbital/radar-chart-01.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `recharts`
- Registry items: `card`, `@01orbital/chart`

## Files

### `blocks/charts/radar-chart-01/index.tsx`

```tsx
"use client"

import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from "@/components/ui/chart"

// The copy: change text here, not in the markup.
const COPY = {
  title: "Listening profile",
  description: "How October's listening splits by mood, out of 100",
} as const

const MOODS = [
  { mood: "Calm", score: 82 },
  { mood: "Focus", score: 74 },
  { mood: "Warm", score: 63 },
  { mood: "Bright", score: 38 },
  { mood: "Energy", score: 46 },
  { mood: "Dark", score: 55 },
]

const CHART_CONFIG = {
  score: { label: "Score", color: "var(--chart-2)" },
} satisfies ChartConfig

// Each axis prints its score, so the shape is never the only record of it.
const SCORES = new Map(MOODS.map((entry) => [entry.mood, entry.score]))

export default function RadarChart01() {
  return (
    <Card className="mx-auto w-full max-w-md">
      <CardHeader>
        <CardTitle>
          <h2>{COPY.title}</h2>
        </CardTitle>
        <CardDescription>{COPY.description}</CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer
          config={CHART_CONFIG}
          className="mx-auto aspect-square max-h-72"
        >
          <RadarChart
            accessibilityLayer
            data={MOODS}
            outerRadius="62%"
            margin={{ left: 24, right: 24 }}
          >
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent hideLabel />}
            />
            <PolarGrid />
            {/* Stock ChartContainer's label color misses recharts 3's label layer. */}
            <PolarAngleAxis
              tick={{ fill: "var(--muted-foreground)" }}
              dataKey="mood"
              tickFormatter={(mood: string) => `${mood} ${SCORES.get(mood)}`}
            />
            <Radar
              dataKey="score"
              fill="var(--color-score)"
              fillOpacity={0.2}
              stroke="var(--color-score)"
              strokeWidth={2}
              dot={{ r: 3, fillOpacity: 1 }}
            />
          </RadarChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```