Skip to content
Beautiful UI

ChartsLumen Halo

Radar ChartProv1.0.0

Two or three profiles over the same measures, as lit outlines over faint bodies. Arrow keys sweep the axes and the tooltip ranks the profiles on each one with the lead in words; legend entries hide a profile or bring it forward.

Recharts · shadcn/ui charts

.md
pnpm dlx shadcn@latest add @beautiful-ui-pro/lumen-radar-chart

Needs your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.

Styles didn't apply?

The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.

Set up the Beautiful UI registry

Free pieces install from their URL with no setup (that URL gives the Base UI build; Radix projects use /r/radix-nova/<name>.json, or add the registries below and the CLI picks your build). Pro pieces need the registries below and BEAUTIFUL_UI_TOKEN in .env.local.

components.json
{
  "registries": {
    "@beautiful-ui": "https://beautiful-ui.dev/r/{style}/{name}.json",
    "@beautiful-ui-pro": {
      "url": "https://beautiful-ui.dev/r/pro/{style}/{name}.json",
      "headers": { "Authorization": "Bearer ${BEAUTIFUL_UI_TOKEN}" }
    }
  }
}

MCP server

claude mcp add --transport http beautiful-ui https://beautiful-ui.dev/api/mcp
Catalog for agents: /llms.txt

Usage

Import it and pass your content. The props that matter most are listed next.

Example
"use client";
import { RadarChart } from "@/components/ui/lumen/charts/radar-chart";

const scores = [
  { measure: "Speed", now: 86, last: 71 },
  { measure: "Reliability", now: 92, last: 88 },
  { measure: "Price", now: 64, last: 66 },
  { measure: "Support", now: 79, last: 58 },
  { measure: "Docs", now: 74, last: 52 },
];

const config = {
  now: { label: "This release", color: "var(--chart-1)" },
  last: { label: "Last release", color: "var(--chart-3)" },
};

export function ReleaseScores() {
  return <RadarChart data={scores} axis="measure" config={config} max={100} label="Scores by measure" />;
}

Props

  • data / axis–

    Row[] / keyof Row

    One row per axis, and the field that names it.

  • config–

    ChartConfig

    One entry per profile with its label and color (var(--chart-N)) or theme { light, dark }.

  • series–

    string[]

    Which config keys to draw, in order. Default: all. Two or three read best.

  • max–

    number

    The outer ring's value. Default: the largest value rounded up; set 100 for scores.

  • valueFormat–

    StatFormat | (n) => string

    Numbers on the rings, tooltip, table and summary.

  • grid / ticks"polygon" / true

    "polygon" | "circle" / boolean

    Ring shape, and ring values along the first axis.

Show all 12 props

  • legend"toggle" with 2+ profiles

    "toggle" | "static" | "none"

    Toggle buttons hide a profile; pointing at or focusing one brings it forward.

  • tooltiptrue

    boolean

    The profiles on the active axis, highest first, with the lead.

  • labels–

    { lead?, tie? }

    Words for the lead line, for i18n: lead(leader, gap, runnerUp).

  • height320

    number

    Plot height in px; the width follows the container.

  • motion"full"

    "full" | "subtle" | "off"

    Reduced motion always wins.

  • loading / error / emptyText / label / axisLabel–

    boolean / string / string / string / string

    States in words with the height held; the chart's accessible name; the axis column's name in the table.

Source

components/ui/lumen/charts/radar-chart.tsx

This component is included with Pro.

Try the live preview above. Get Pro to install the source.

Get All-Access
121 more Pro pieces in Lumen HaloEvery story chart, block and screen in the same language. Previews are live for everyone; the code comes with Pro.See the plans

More in Charts