TokenConfidence

TokenConfidence underlines each token by how confident the model was. The text itself is the chart, and confidence resolves to three discrete tiers rather than a continuous ramp. Confident tokens get no mark at all, so reading stays primary and only the uncertain words draw the eye. The two flagged tiers differ in stroke as well as color: unsure is a solid underline, guessing a dotted one.

Install

import { TokenConfidence } from "@microcharts/react/token-confidence";// tokens — real values under “Sample data” below<TokenConfidence data={tokens} title="Model answer" />

const tokens = [  { token: "The", confidence: 0.98 },  { token: " Treaty", confidence: 0.93 },  { token: " of", confidence: 0.99 },  { token: " Westphalia", confidence: 0.71 },  { token: " was", confidence: 0.96 },  { token: " signed", confidence: 0.9 },  { token: " in", confidence: 0.97 },  { token: " 1648", confidence: 0.44 },];

Try it

When to use it

Use it for LLM answers in chat or transcripts, and for flagging text a reader should review. To audit exact probabilities use CalibrationStrip; for a single score use Delta.

Sizing

The text is the chart, so it inherits the surrounding font size — there is no width/height. Set style={{ fontSize }} or let it flow inline with your prose.

Variants

Edge cases

Every token clears the hi threshold, so nothing is flagged and the sentence renders as plain, unmarked text. No marks means no word here needs a second look.

An empty data array renders nothing and reports "No tokens." to assistive tech.

Four homes

Accessibility

The accessible name is the tier tally: "4 tokens: 1 confident, 1 unsure, 2 guessing." The interactive entry gives each flagged token a roving tab stop; ←/→ move between them (skipping confident tokens), announcing each one's tier and confidence. Hovering or focusing a flagged token also floats that reading over it as a chip (guessing 0.22): the underline says the token is flagged, the chip gives its tier and number. readout={false} drops the chip.

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.