# Formatting & scale (/docs/formatting)
Two orthogonal decisions live here: **how numbers are written** (`format` + `locale`) and **what range they're drawn
against** (`domain`). Both are part of the one grammar — the same prop name means the same thing on every chart — and
both are documented per chart, but this page is the whole story in one place, since it's easy to assume a default you
didn't actually get.
## One formatter, three places
A chart shows numbers in three spots: the **direct labels** it draws, the **accessible summary** a screen reader
announces, and — on an interactive entry — the **readout** that follows the pointer. `format` feeds _all three_ from a
single definition — so a currency chart's spoken summary says "$1,240", not "1240". You never format the same number
twice.
`format` takes either **`Intl.NumberFormatOptions`** or a **plain function** `(n) => string`. Formatters are cached
(`Intl.NumberFormat` construction is expensive), keyed by locale plus options, so hundreds of instances sharing one
format shape build one formatter between them — never build your own `new Intl.NumberFormat` in a component. The cache
is deliberately small: it holds 64 formatters and empties completely when it fills, on the reasoning that one app uses a
handful of locale × option shapes, and a bounded cache that occasionally rebuilds beats one that grows forever. Need the
same formatting _outside_ a chart (a matching KPI label, a table cell)? Import the exported `makeFormatter` helper so
your prose numbers line up with the chart's exactly, from the same cache:
```tsx
import { makeFormatter } from "@microcharts/react";
const fmt = makeFormatter({ style: "currency", currency: "USD" }, "en-US");
fmt(42); // "$42.00"
```
The arguments are positional — `makeFormatter(format, locale, defaults?)`. The third argument is the fallback used when
`format` is omitted; it's how a chart supplies its own default (see `Delta` below).
```tsx
```
## Percent, compact, decimals
Anything `Intl.NumberFormat` supports works — percent, compact notation, fixed decimals, sign display. `Delta` even
defaults to a locale-aware percent, so a raw ratio reads as a change with no config:
```tsx
// → +12.8%
// → +4.2K
```
## A custom function
When `Intl` can't express the unit — milliseconds, "×" multipliers, a domain-specific symbol — pass a function. It
receives the number and returns the exact string to render. The value is snapped to 12 significant digits before it
reaches your function, so a number a chart derived internally (`value - target`) arrives as `-3.6`, not
`-3.5999999999999943` — you write for clean data, not for IEEE arithmetic.
```tsx
`${Math.round(n)} ms\
```
## The interactive readout
Import a chart from its `/interactive` subpath and it gains a readout: a small chip that follows the pointer, or the
focused datum when you rove with the keyboard. It uses the same `format` and `locale` as everything else, so a currency
chart's hover value matches its label and its summary exactly.
**It is deliberately terse.** The chip names the datum and its value — a Funnel stage reads `Checkout 62% (1,240)`, a
Slope line reads `Brazil: 44 → 28` — and nothing else. It does not repeat the axis names, the row label already printed
beside it, or the grid position the cell already occupies. These are word-sized charts; a chip wider than the chart it
annotates is worse than no chip.
The fuller sentence still exists. Everything the chip leaves out — the comparison, the quadrant name, the running total,
the per-cycle breakdown — is announced in the chart's live region, which is what a screen reader reads. So nothing is
lost by the chip being short; it is a different audience, not less information.
```tsx
import { Sparkline } from "@microcharts/react/sparkline/interactive";
// the readout, the endpoint label, and the spoken summary all read "$1,600"
;
```
The chip is capped at `max(100%, 14em)` wide and ellipsizes past that, so a long formatted value cannot paint across the
page. If you see an ellipsis, the value is too long for the chart — shorten it with `format` (`notation: "compact"` is
usually the answer) rather than widening the chart.
Its prose comes from `strings`, like every other word the library renders, so a localized bundle localizes the readout
too. Its colors come from `--mc-surface`, `--mc-surface-ink` and `--mc-surface-edge`; see
[Theming](/docs/theming#the-readout-surface).
**Put the value somewhere else.** That same terse string is handed to you: every `onActive` / `onSelect` callback
receives it as `datum.formatted`, formatted with the chart's own `format` and `locale`. So you can suppress the chip and
render the value in your own layout — the pattern behind a KPI card whose big number tracks a sparkline you hover:
```tsx
const [reading, setReading] = useState("$1,600");
// readout={false} keeps the crosshair, drops the chip; the value lands in your