ConfusionGrid

ConfusionGrid answers "where do the errors go?" — the one thing accuracy-as-a-number hides. Rows are the actual class, columns the predicted class, and each cell's ink is the row-normalized share: of the actual X, where did the predictions go? The diagonal (agreement) is accented by shape, never by colour, so good and bad are positions on the grid, not hues. The one-line key — rows actual, columns predicted — belongs next to every example.

Install

import { ConfusionGrid } from "@microcharts/react/confusion-grid";// counts — real values under “Sample data” below<ConfusionGrid data={counts} title="Classifier" />

const counts = {  labels: ["cat", "dog"],  counts: [    [88, 12],    [10, 59],  ],};

Try it

When to use it

• Good for — classifier evaluation, and any paired-classification agreement (triage vs outcome, plan vs actual, rater A vs rater B).
• Avoid for — a single accuracy number (Delta) or more than four classes (use a full-size heatmap).

Sizing

Variants

Edge cases

A fifth class doesn't grow the grid — legibility caps at 4×4, so a k of 5 or more clamps to the first four labels and rows/columns, with a dev warning steering to a full-size heatmap. The grid never silently drops classes in production (the warning is dev-only), but the render itself does truncate; pass pre-filtered labels/counts if you need a specific four.

Four homes

Why this default

The row view answers the question practitioners actually ask — "of the real cats, how many did we call dogs?" — so row-normalization is stated in the summary phrasing ("% of cats") and the denominator travels with every number. Accuracy is off by default and never rendered without the grid: the number may not leave its context. The diagonal accent is a shape (an inset stroke), and the ink ramp is identical for agreement and error cells — good and bad are positions, not colours, which is what keeps it readable under forced colours.

Accessibility

The accessible name states accuracy and the worst confusion, with the row-normalized denominator carried in the phrasing — the grid at the top of this page reads "Accuracy 73%. Most confused: B predicted as C (43% of Bs)." A perfect classifier reads "Accuracy 100%. No confusion.", and a class with no samples is named rather than hidden — the cat/dog example above reads "Accuracy 80%. Most confused: cat predicted as dog (20% of cats). No dog samples." The interactive entry roves the cells with the arrow keys (Home and End jump to the two ends of the diagonal), announcing each cell's actual and predicted class as a share of the actual class.

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

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.