Several measures on one shape: a hairline polygon on a dotted construction sheet, each axis named in small caps at its end, and the axis you point at measured off as a dimension line with its figure on it.
import{RadarChart}from"@/components/ui/radar-chart"// A typeface judged out of ten on six counts.constarchivo=[{label:"Legibility",value:9},{label:"Width range",value:10},{label:"Weights",value:9},{label:"Figures",value:7},{label:"Languages",value:8},{label:"Warmth",value:4},]// Three faces on the same six counts.constfaces=archivo.map((d,i)=>({label:d.label,archivo:d.value,bodoni:[6,3,5,8,7,9][i],garamond:[8,2,4,6,9,8][i]}))constthree=[{key:"archivo",label:"Archivo"},{key:"bodoni",label:"Bodoni Moda"},{key:"garamond",label:"EB Garamond"},]exportdefaultfunctionExample(){return(<divclassName="flex flex-wrap items-start gap-x-24 gap-y-16"><RadarChartdata={archivo}max={10}label="Archivo, out of ten on six counts"/><RadarChartdata={faces}series={three.slice(0,2)}max={10}label="Archivo and Bodoni Moda, out of ten"/></div>)}
Contract
Underneath: the grid item (variant="dots") as the sheet, an SVG drawn in pixels, plus a hook; the axis names are native buttons.
Anatomy: <figure class="ot-radar" style="--n; --m"> holding a ot-grid[data-variant="dots"].ot-radar-sheet, inside it .ot-radar-plot (role="group", aria-label, square, --r the rim's radius) of <svg class="ot-radar-draw" aria-hidden> (.ot-radar-build: the construction polygons at the quarters and the spokes; a .ot-radar-series per series, data-series, each a .ot-radar-line and a .ot-radar-bead per point; and, while an axis is measured, .ot-radar-dims, one .ot-radar-dim per series), .ot-radar-figure (one series), and one <button class="ot-radar-axis" style="--c; --s"> per axis. With series, <figcaption class="ot-radar-key"> of .ot-radar-names, each after a .ot-radar-swatch.
Paul Rand's "design": a dotted construction sheet, lettered and numbered along its border, with registration crosses at its corners (the grid item's), and on it dotted construction polygons at each quarter and dotted spokes, the rim a step firmer. The shape is one ink hairline through the values, clockwise from the top, a paper bead on each point, as line-chart threads its rings. Each axis is named at its end in small caps (all-small-caps, pencil), hung off the spoke in the direction it runs. The rim's radius is a third of the plot, less where the plot is narrow, so the names keep 76px beside it and stay off the sheet's lettered border.
Pointing at an axis (the nearest by angle) or at its name, or focusing its name, inks the name, fills its bead of the first series in the accent (the one accent in view, with spiccato), and measures the value off as Rand's dimension line: a hairline stepped a little off the spoke, from the centre to the point, ticked at both ends and drawn out from the centre (moderato, exhale). One series sets its figure beside the line, "9/10", the rim's value after it in pencil (SPECTRA's fractions). With series, each series has its own dimension line, one step further from the spoke, in its own line's voice, and the key gives each figure.
Series (series): the second is dashed graphite and named in italic, the third dotted pencil (chart's voices: roman, italic, pencil). Written for up to three.
Fewer than three axes draw no shape: a line says "A radar needs three measures or more; this one has 2."
Keyboard: the names are one tab stop (rove, round); the arrows go round the axes and wrap, Home and End jump to the first and last. Right to left the drawing, the names and the arrows mirror. Screen readers: each name reads "Width range: 10 of 10" (with series, each series' figure). Forced colours: the lines CanvasText, the construction GrayText, the measured bead Highlight.
One axis per entry, clockwise from the top. With one series the length is value; with several, each series reads its own key. Fewer than three axes draw a note saying so instead of a shape.
series
{ key: string; label: string }[]
Two or three shapes on one sheet. The first is an ink hairline, the second dashed graphite, the third dotted pencil, each named in a key under the sheet (the second in italic). Pointing at an axis measures every series off it, each dimension line one step further from the spoke, and the key gives each figure. Written for up to three.
label
string
Names the chart for assistive tech, such as How three typefaces compare. Each axis name is a button that reads its values against the rim.
max
number
The value at the rim, shared by every axis. Defaults to the next round number above the largest. With one series, the measured figure reads against it in pencil, 8/10.
format
(value: number) => string
Formats the figures. Defaults to en-GB grouping.
now
number
0
Index of the axis the keyboard starts on.
cell
number
27
The side of one square of the dotted sheet behind the chart, in pixels (the grid item's cell).
Craft
Where its move comes from
Where its move comes from
Component
Reference
Move
Radar chart
Paul Rand's dotted construction grid and dimension lines
A hairline shape on a dotted sheet, the measured axis read as a ticked dimension line
How it moves
How it moves
Component
Articulation
What moves
Radar chart
Measure
The dimension line is drawn out from the centre to the point (moderato, exhale), its figure set on it; the bead lands in the accent with spiccato