RubricStrip
RubricStrip scores each criterion as a bar whose length is the score and whose thickness is its share of the weight.
- encodes
- bar length = score, bar thickness = weight
- precision
- high / medium
- nodes
- ≤ 2 per row, cap 8
- collection
- Frontier
RubricStrip encodes each criterion twice: bar length is the score, bar thickness is that criterion's share of the total
weight. A heavy criterion scoring poorly therefore carries more ink than a light one scoring well, which a table of the
same numbers hides. There is no total bar and none can be added; the summary names the highest and lowest criterion
instead of a weighted average, because one number throws away the structure. A target draws a single pass line across
every row.
Install
import { RubricStrip } from "@microcharts/react/rubric-strip";<RubricStrip data={[ { label: "Correctness", score: 0.92, weight: 3 }, { label: "Coverage", score: 0.78, weight: 2 }, { label: "Clarity", score: 0.65, weight: 1 }, { label: "Style", score: 0.41, weight: 1 }, ]} title="Model eval"/>Try it
- hover · rove · click…
Hover or use ↑/↓ across the criteria — each announces its score and weight share.
import { RubricStrip } from "@microcharts/react/rubric-strip/interactive";<RubricStrip data={criteria} target={0.70}/>When to use it
Use it for model and code-review scorecards and for weighted vendor comparison. For a single criterion use Bullet; for parts of a whole use SegmentedBar.
Sizing
Variants
Edge cases
A score outside the domain clamps to a full-length bar rather than overflowing the track, and the component logs a dev
warning. Omit weight and every criterion carries the same thickness, which is what the unweighted variant above shows.
Four homes
Model eval scorecard — 78% weighted, accuracy weakest.
| GPT-4 | 78% | |
| Claude | 82% | |
| Gemini | 74% |
Preview uses the public chart API only. When an interactive twin exists, it swaps in with the same props and no entrance motion - code samples stay on the static import. Placement recipes: Composition, Sizing.
Accessibility
The accessible name reports the count and the extremes: "4 criteria; highest Lint (1), lowest Docs (0.5)." The interactive entry roves the criteria, announcing each one's score and its weight share of the total ("Coverage: 0.78, weight 29% of total.").
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, press Escape, or
press outside the chart. On touch, a tap pins and a drag scrubs.
Props
| Prop | Type | Notes |
|---|---|---|
| data* | { label, score, weight? }[] | Criteria; weights default equal. |
| target | number | Pass target — one tick across all rows. |
| labels | boolean | Criterion names in the left gutter. |
| 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.