Swatch renders a fixed 12×12 color mark inside a root svg (viewBox="0 0 12 12", layout box from --space-12). Use it as the visual key beside legend text, layer lists, and tooltips. Paint flows through design tokens, ChartColor, or DataColor; there is no className, style, or as. Chart internals reuse the same geometry through ChartSwatch, a thin wrapper that paints with currentColor instead of vector-paint props.
There is no size prop in v1: every instance is 12×12 user units on screen.
Horizontal segment (strokeWidth 2) across the box.
Line series in a legend.
Pattern
One of SwatchPattern (see below). Requires pattern.
Comparison series, hatch fills, or GIS polygon symbology without a custom path.
pattern is a type error unless shape is Pattern.
SwatchPattern
Only valid with shape={SwatchShape.Pattern}.
Pattern
What is drawn
When to choose
Dashed
Ring with stroke-dasharray="3 2" (same geometry chart uses for dashed comparison series).
Secondary or comparison line that must differ from a solid dot without changing hue.
Dotted
Ring of round dots: sliver dashes with round caps, spaced two stroke widths apart so a gap shows between neighbors.
Lighter or tertiary series distinction.
Hatched
Rect filled with a diagonal hatch pattern in defs.
Area fills that need texture, not only hue.
Vertices
Outlined square (polyline) plus square corner markers (path).
GIS layer styles that show an outlined polygon with vertex handles.
Paint (fill and stroke)
fill and stroke accept VectorPaint: Foreground tokens (except Inherit), ChartColor, or DataColor. See Data color for the prefer palette rule: tokens and ChartColor for anything Axon 911 owns; DataColor only when third-party data cannot be mapped (for example ESRI layer colors).
Shape family
Channel behavior
Circle, Square
fill paints the solid; optional stroke outlines the shape with a 1-unit ring drawn inside the 12×12 box, so the mark keeps its size.
Line, Pattern
Geometry uses stroke, falling back to fill when stroke is omitted (stroke ?? fill). fill on the props is not painted as a separate fill channel for these shapes, except Vertices, whose corner squares are filled with the same paint.
Omitted paint on a channel resolves to none at render time. Invalid DataColor re-validates at paint time and falls back to none.
Legend row composition
Pair a decorative swatch with visible series copy. The text carries the name; the swatch carries color and shape.
Use decorative: true for this pattern. Reserve label for swatches that must stand alone without adjacent text (see Accessibility).
Meaningful vs decorative
Same union as Shape and Image inline SVG:
Meaningful:label (LocalizedMessage) → role="img" and aria-label on the root svg.
Decorative:decorative: true → aria-hidden="true" and focusable="false".