Long notes, narrow charts, and languages without spaces need careful wrapping. Opt in toPretext to measure annotation text in its actual font and share those lines with Semiotic’s automatic note placement.
Try different text and fonts
Both charts show the same note. The first uses Semiotic’s character-based wrapping; the second uses font measurements. Try Chinese, Thai, or an unbroken identifier, then adjust the wrap width.
Enable it on a chart
Install the optional peer alongside Semiotic. Import the hook fromsemiotic/text and pass its returned array to annotations. The hook supports label, callout, callout-circle,callout-rect, and bracket notes.
BASH
npm install semiotic @chenglou/pretext@0.0.9
JSX
import { LineChart } from "semiotic/xy" import { usePretextAnnotations } from "semiotic/text" function RevenueChart({ data }) { const annotations = usePretextAnnotations([ { type: "callout", month: 2, revenue: 27, title: "Spring launch", label: "季度营收增长显著，华东地区表现最佳。", wrap: 160 } ], { fontFamily: "Arial, sans-serif", fontSize: 14, lineHeight: 20 }) return ( <LineChart data={data} xAccessor="month" yAccessor="revenue" title="Revenue after launch" annotations={annotations} autoPlaceAnnotations /> ) }
Use autoPlaceAnnotations to let Semiotic choose label and callout offsets using the measured dimensions. Brackets retain their authored placement. Explicit dx/dy still work; toggle automatic placement in the comparison to try both. The original annotations are not mutated. Other annotation types pass through unchanged.
When to use it
- Multilingual notes, especially text with few or no spaces.
- Long descriptions or identifiers that need to fit a narrow note.
- Custom typography where character-count estimates waste space or overflow.
- Automatic placement where note dimensions should follow the painted lines.
This option changes SVG annotation notes. Axes, legends, plain textannotations, and HTML tooltips retain their existing behavior. Short, single-line labels usually do not need a text layout engine.
Fonts, rendering, and exports
Choose a named font, such as Arial or Georgia. The hook applies the same family, size, and weight to measurement and rendering, measures bold titles separately, waits for fonts, and refreshes when fonts finish loading. Set fontWeight andtitleFontWeight when needed. Generic system fonts can resolve differently between canvas and SVG on macOS. Keep CSS font overrides consistent with the hook’s typography options so the painted text matches its measurements.
Server rendering and the first hydration render use ordinary wrapping. Measurement starts after mounting; browsers without Intl.Segmenter or canvas measurement keep ordinary wrapping. Allow room for the note to settle after fonts load. Setenabled: false to turn the option off.
This is a React hook, not a JSON chart configuration field. Serialized/MCP configs and standalone Node/edge rendering use the default wrapping. Exporting an already rendered browser SVG retains its measured text lines. Pretext loads only through the optional entry; charts that do not import it do not need the peer or pay its bundle cost.