Radar chart React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Pro item: the CLI needs a Pro account. See plans

Usage

Import RadarChart from @/components/ui/radar-chart.

import { RadarChart } from "@/components/ui/radar-chart"

const data = [
  { label: "Speed", starter: 6, pro: 9 },
  { label: "Storage", starter: 4, pro: 8 },
  { label: "Integrations", starter: 5, pro: 9 },
  { label: "Support", starter: 3, pro: 8 },
  { label: "Security", starter: 6, pro: 9 },
  { label: "Analytics", starter: 4, pro: 7 },
]

export function PlanComparison() {
  return (
    <RadarChart
      data={data}
      series={[
        { key: "starter", label: "Starter" },
        { key: "pro", label: "Pro" },
      ]}
      max={10}
      label="Starter vs. Pro, scored out of 10"
    />
  )
}

Props

• data*
  ChartDatum[]

  One row per axis, in clockwise order from the top: { label: "Speed", starter: 6, pro: 9 }. A missing value sits at the center.

• xKeydefault "label"
  string

  The row key that names each axis.

• series
  RadarChartSeries[]

  Which keys to draw, in color order: { key, label?, color?, name?, dashed? }. dashed draws an outline only (a target or last period) with a muted tooltip row. Inferred from the numeric keys of the first rows when omitted.

• colors
  string[]

  Per-position palette overrides: a slot ("series-3"), a tone ("neutral", "brand") or any CSS color.

• sizedefault "md"
  "sm" | "md" | "lg"

  The largest square the chart takes: 240, 320 or 420px. It shrinks to the container's width below that.

• shapedefault "polygon"
  "polygon" | "circle"

  The grid rings: straight-edged polygons or circles.

• levelsdefault 4
  number

  How many grid rings divide the range from min to max.

• maxdefault 0
  number

  The value on the outer ring (100 for percentages). 0, or anything not above min, rounds the largest visible value up so every ring lands on a round number.

• mindefault 0
  number

  The value at the center.

• fillOpacitydefault 0.18
  number

  Opacity of each series' fill (dashed series have no fill).

• strokeWidthdefault 2
  number

  Outline width in px.

• curvedefault "linear"
  "linear" | "cardinal"

  Straight edges between axes, or a smooth closed curve through every point.

• showDotsdefault true
  boolean

  A dot on every value. Without them the inspected axis still shows its dots.

• showGriddefault true
  boolean

  The rings and spokes behind the series.

• showAxisLabelsdefault true
  boolean

  Category names around the web. Off, the web takes the whole square.

• showLevelLabelsdefault false
  boolean

  The value of each ring, printed along the top spoke.

• showLegenddefault true
  boolean

  A legend for two or more series.

• legendPositiondefault "bottom"
  "top" | "bottom"

  Where the legend sits; it wraps onto more lines on narrow screens.

• legendToggledefault true
  boolean

  Legend entries are toggle buttons that hide and show a series (the last visible one stays).

• showTooltipdefault true
  boolean

  The readout for the inspected axis. Off, the spoke still highlights and the live region still speaks.

• tooltipModedefault "auto"
  "auto" | "float" | "fixed"

  float beside the spoke's end (mouse), fixed above the chart where a finger cannot cover it (touch); auto picks by pointer.

• valueFormatdefault "number"
  ChartValueFormat

  How values print in the readout, ring labels and table: number, compact, currency or percent. Percent takes whole numbers (82 -> "82%").

• currencydefault "USD"
  string

  ISO 4217 code for valueFormat currency.

• decimalsdefault ""
  number

  Fraction digits in the readout and table; auto by magnitude when unset (Default in the playground).

• formatValue
  (value: number, context: { series: string; kind: "tooltip" | "level" | "table" }) => string

  Replaces the built-in value formatting everywhere.

• localedefault ""
  string

  Locale for numbers. Empty uses the UIProvider / LocaleProvider locale (en-US in the playground).

• animateddefault true
  boolean

  Series grow out of the center on first view, morph when the data changes and fade when hidden or highlighted. Always off under reduced motion.

• loadingdefault false
  boolean

  A round skeleton in the chart's square while data loads.

• emptyState
  ReactNode

  Replaces the built-in empty state when no row has a value.

• labeldefault ""
  string

  The accessible name of the chart and the table caption. Empty joins the series names.

• descriptiondefault ""
  string

  A sentence for screen readers that states the takeaway.

• surfacedefault ""
  string

  The color behind the chart, used to ring the dots and halo the ring labels. Empty uses the surface token.

• hiddenSeries
  string[]

  Hidden series keys when you control legend toggling; pair with onHiddenSeriesChange.

• defaultHiddenSeries
  string[]

  Series hidden at first, uncontrolled.

• onHiddenSeriesChange
  (keys: string[]) => void

  Called when a legend toggle hides or shows a series.

• activeIndex
  number | null

  The inspected axis when you control it.

• defaultActiveIndexdefault ""
  number | null

  The axis inspected at first, uncontrolled. Unset (Default in the playground) starts with no readout.

• onActiveIndexChange
  (index: number | null) => void

  Called as the inspected axis changes (mouse, touch or keyboard) and with null when it clears.

• labels
  Partial<RadarChartLabels>

  Strings: empty, loading, table, inspectHint, showSeries, hideSeries, axis (Category), compare ((comparison)).

• classNames
  Partial<Record<RadarChartSlot, string>>

  Classes for legend, plot, tooltip, table, grid, axisLabel, levelLabel, area, dot and inspect.

Parts

FAQ

More React chart and stat components