Radar Chart · Youj

Installation & usage

npm i @youj/react

For an app already set up with npx @youj/cli init, which installs the peers (@youj/core, @youj/motion, motion and Base UI) and wires the provider. New app? Start at Installation.

Use a radar chart to compare a handful of things on the same few measures, when the overall shape matters more than any one number: models, plans, candidates, products. Keep it to three to eight axes and a few series. For one thing over time use a Sparkline; for exact values side by side, a table; the Compare items card pairs this chart with an overview table.

import { RadarChart } from '@youj/react'

<RadarChart
  label="Assistants compared"
  axes={[
    { id: 'reasoning', label: 'Reasoning', description: 'How well it works through multi-step problems.' },
    { id: 'speed', label: 'Speed' },
    { id: 'safety', label: 'Safety' },
  ]}
  series={[
    { id: 'atlas', name: 'Atlas 2', values: [88, 56, 80] },
    { id: 'quill', name: 'Quill S', values: [64, 92, 72] },
  ]}
/>

axes are drawn clockwise from the top, and each series gives one value per axis in the same order. The scale runs from zero at the center to max at the outer ring (by default the largest value rounded up to a round number; pass one to keep the scale still as data changes), divided by rings. Series take the chart colors in order unless they set a tone. formatValue writes values with their unit, and legendEnd adds your own controls beside the legend. Fewer than three axes, or no series, shows the empty state.

Reference

Propsaxes, series, max, rings… (9)

Props

RadarChart props
Prop	Type	Default
`axes`Required	`readonly RadarChartAxis[]`	–
`series`Required	`readonly RadarChartSeries[]`	–
`max`	`number` The value at the outer ring. Default: the largest value rounded up to a round number.	–
`rings`	`number` How many rings divide the scale. default 4	`4`
`formatValue`	`(value: number, axis: RadarChartAxis) => string` Formats values for the readout, the table and the spoken points. Default: the locale's number format.	–
`locale`	`string` Default: the YoujProvider locale.	–
`label`	`string` Names the chart for assistive tech. Default: the labels' "Radar chart".	–
`legend`	`boolean` Show the legend under the plot. default true	`true`
`legendEnd`	`ReactNode` Rendered in place of the legend, e.g. your own series controls.	–
`config`	`Readonly<Record<string, { color?: string }>>` A ChartConfig shared with your other charts: a series whose id is a key takes its color, so one series matches across chart types.	–
Other props pass through: extends `ComponentProps<'div'>`.

StylingParts and data attributes

MotionReveal, new values, toggling a series · reduced motion

Motion

Motion tokens
Moment	Tokens	Value
Revealevery shape opens from the center, its corners sliding out along the spokes, when a third of the chart scrolls into view	`duration.deliberateease.emphasized` 560ms · cubic-bezier(0.6, 0, 0.1, 1)	560mscubic-bezier(0.6, 0, 0.1, 1)
New values, toggling a seriesshapes morph to their new corners; a hidden series folds to the center	`spring.smooth` 0.36s, bounce 0	0.36s, bounce 0
Lighting a series, an axis or a pointthe other shapes quiet, the spoke strengthens, the readout fades in	`duration.fastease.standard` 140ms · cubic-bezier(0.2, 0, 0, 1)	140mscubic-bezier(0.2, 0, 0, 1)

Reduced motion

Drawn in place; new values and toggles land at once.

Reduced motion

The shapes are drawn in place, and new values and toggled series land at once.

AccessibilityKeyboard, focus, screen readers