React rubric strip chart — weighted criteria against a shared pass target. Tiny accessible SVG microchart; RSC-safe static or /interactive.

RubricStrip answers "how did this thing score per criterion — with each criterion's importance visible — without a fake composite number?". Each bar's length is its score and its thickness is its weight share, so the things that matter most are literally the biggest marks. There is no total bar, and none may be added — the type exists to resist collapsing quality into one number.

RubricStrip

interactive · 4.86 kB · static · 2.41 kB

Install

Import & usereact/rubric-strip

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"/>

Needs package + stylesheetSet up with AI

Try it

When to use it

Good for — model / code-review scorecards, weighted vendor comparison.
Avoid for — a single criterion (Bullet) or parts of a whole (SegmentedBar).

Sizing

Variants

unweighted

Edge cases

score outside the domain clamps

one criterion

Four homes

Why this default

Weight-as-thickness keeps "importance" visible where a table hides it — a light criterion that scores well can't visually outweigh a heavy one that scores poorly. The summary names the extremes, never a weighted average, because the whole point is that a single number throws away the structure. A target draws one honest pass line across every row instead.

Accessibility

The accessible name names 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 or press Escape. 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.