MicroScatter
MicroScatter plots two variables against each other and reports Pearson r beside any relationship word.
- encodes
- 2-D position on common scales
- precision
- high
- nodes
- 1 per point (≤ 60)
- collection
- Core
MicroScatter plots one dot per x/y pair to show whether two metrics move together. Dots render at 75% opacity, so
overplot reads as density instead of hiding points behind each other. Duplicates are never jittered, because position is
the encoding. Axes go unlabeled at this scale, so title has to name both variables, the way the demo below does. The
summary's relationship words come from a documented heuristic on |r| (≥ 0.7 strong, ≥ 0.4 moderate, ≥ 0.2 weak), and
wherever a relationship word appears, r appears beside it.
Install
import { MicroScatter } from "@microcharts/react/micro-scatter";// pairs — real values under “Sample data” below<MicroScatter data={pairs} title="Latency vs error rate" />Sample data
const pairs = [ { x: 0, y: 0 }, { x: 1, y: 15 }, { x: 2, y: 30 }, { x: 3, y: 15 }, { x: 4, y: 30 }, { x: 5, y: 15 }, { x: 6, y: 30 }, { x: 7, y: 45 }, { x: 8, y: 30 }, { x: 9, y: 45 }, { x: 10, y: 30 }, { x: 11, y: 45 }, { x: 12, y: 60 }, { x: 13, y: 45 }, { x: 14, y: 60 }, { x: 15, y: 45 }, { x: 16, y: 60 }, { x: 17, y: 75 }, { x: 18, y: 60 }, { x: 19, y: 75 }, { x: 20, y: 60 }, { x: 21, y: 75 }, { x: 22, y: 90 }, { x: 23, y: 75 },];Try it
- hover · rove · click…
Hover the nearest point or step by x with ←/→ — each announces its pair.
import { MicroScatter } from "@microcharts/react/micro-scatter/interactive";// pairs — real values under “Sample data” below<MicroScatter data={pairs}/>Sample data
const pairs = [ { x: 0, y: 0 }, { x: 1, y: 15 }, { x: 2, y: 30 }, { x: 3, y: 15 }, { x: 4, y: 30 }, { x: 5, y: 15 }, { x: 6, y: 30 }, { x: 7, y: 45 }, { x: 8, y: 30 }, { x: 9, y: 45 }, { x: 10, y: 30 }, { x: 11, y: 45 }, { x: 12, y: 60 }, { x: 13, y: 45 }, { x: 14, y: 60 }, { x: 15, y: 45 }, { x: 16, y: 60 }, { x: 17, y: 75 }, { x: 18, y: 60 }, { x: 19, y: 75 }, { x: 20, y: 60 }, { x: 21, y: 75 }, { x: 22, y: 90 }, { x: 23, y: 75 },];When to use it
Use it for correlation in a sentence and two-metric relationships in KPI cards. Past 60 points, bin the data instead; for ordered time series use Sparkline.
Sizing
Variants
Edge cases
Empty data draws just the frame, with "No data." as the summary. Under 3 points, or with a zero-variance cloud, the summary states the count and stops: no correlation claim without enough evidence behind it. Coincident points are never jittered apart. They overlap exactly, and at 75% dot opacity the overlap reads as extra density rather than hiding a point.
Four homes
Bundle size and paint time across last week's builds — heavier bundles paint slower, r 0.93.
| Checkout | r 0.93 | |
| Search | r 0.93 |
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 is the count plus the evidence-backed relationship: "24 points. Strong positive relationship (r 0.93)." With fewer than 3 points, or a zero-variance cloud, it makes no claim at all and reads just "2 points." The interactive entry steps points ordered by x and announces each formatted pair.
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* | { x; y }[] | Unordered pairs. |
| trend | boolean | Least-squares line — linear only, never smoothed. |
| focal | number | Accent one point — "this one, among all of them". |
| xDomain | [number, number] | X scale (domain keeps its grammar meaning: y). |
| domain | [number, number] | Y scale — the shared grammar name, paired with xDomain. |
| r | number | Dot radius, clamped [1, 3]. |
| 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.