StarSpoke
StarSpoke draws a few metrics as spokes radiating from a center, with no connecting polygon.
- encodes
- spoke length from center = value
- precision
- medium
- nodes
- ≤ 4
The chart below prints five spokes from one center, each spoke's length one metric: Speed at 0.9, Cost at 0.3. That is
an entity's profile, and a row of them shows which entity in a set is the odd one out. There is no connecting polygon,
ever: the enclosed area of a radar chart misstates magnitude and changes with axis order, and the research favors
contour-free marks for spotting outliers. One domain governs every spoke in a glyph, so normalizing mixed-unit metrics
is the caller's job and a set of small multiples stays comparable.
Install
import { StarSpoke } from "@microcharts/react/star-spoke";// metrics — real values under “Sample data” below<StarSpoke data={metrics} title="Product profile" />Sample data
const metrics = [ { label: "Speed", value: 0.9 }, { label: "Power", value: 0.6 }, { label: "Range", value: 0.5 }, { label: "Cost", value: 0.3 }, { label: "Ease", value: 0.7 },];Try it
When to use it
Use it for entity profiles in small multiples and for skill or capability comparison. Fewer than 3 metrics read better as PairedBars, and precise values belong in MiniBar.
Sizing
Variants
locale changes no in-chart mark, since tip labels are metric names rather than formatted numbers. It does localize the
extremes named in the accessible summary:
Edge cases
Every spoke sits at a fixed clock position, the first at 12 o'clock and the rest clockwise, so the axis order never shifts between instances. That fixed order plus the default-on guide spokes keep a profile readable where a metric's label doesn't seat. Tip labels seat at the rim rather than at the value tip, so a low-value spoke never drags its label into the hub. A label is dropped only when its estimated width exceeds the whole glyph; anything narrower is clamped into the reserved label ring, which keeps rim labels at distinct angles.
Four homes
Accessibility
The accessible name names the extremes: "5 metrics; highest Speed (0.9), lowest Cost (0.3)." The interactive entry rotates focus through the spokes with ←/→, announcing each metric and value.
The interactive entry follows the shared interaction contract:
arrow keys rove between units on both axes, Home and End jump to the ends, and a click, tap, Enter or
Space selects a unit — pinning its readout so it survives blur, until you select it again or press Escape.
On touch, a tap pins and a drag scrubs.
Props
| Prop | Type | Notes |
|---|---|---|
| data* | { label, value }[] | 3–8 metrics on a shared domain. |
| dots | "tips" | "none" | `"tips"` draws endpoint dots to sharpen the outlier read. |
| guides | boolean | Full-length guide spokes (read-back scaffold). |
| compare | number[] | Muted ghost baseline spokes. |
| labels | boolean | Spoke labels at the tips (default true; drop out below size 44). |
| size | number | Star box edge in viewBox units (default 80). |
| animate | boolean | interactiveOpt-in entrance motion when the chart mounts client-side — add import "@microcharts/react/motion" once. Inert on the server, on hydrated server HTML, and under prefers-reduced-motion. |
Plus the shared grammar — data, domain, color, title, summary, format — and the layout props (width, height, className, style) that every chart accepts. Interactive entries also share animate and live, and — wherever a chart has more than one navigable unit — onActive, onSelect, selectedIndex and defaultSelectedIndex; and — wherever the chart shows a hover value — readout. See the shared grammar.