Usage
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.
DataColor on fill or stroke.| Need | Use instead |
|---|---|
| Custom silhouette or arbitrary path in user space | Shape |
| Online, degraded, or severity presence beside a label (not a data series) | Status dot |
| Product-owned emphasis without a legend key | Foreground on Text or Icon |
| Raster, URL, or inline SVGR artwork | Image |
| Arbitrary styling escape hatches | Not supported on Swatch |
| Shape | What is drawn | When to choose |
|---|---|---|
Circle | Solid circle (r="6" centered in the 12×12 box). | Default legend dot; filled area series. |
Square | Solid 12×12 rectangle filling the view box. | Area or category marks that read as a tile. |
Line | 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.
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 with stroke-dasharray="1 2" and round caps. | 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. |
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. |
none at render time. Invalid DataColor re-validates at paint time and falls back to none.
Pair a decorative swatch with visible series copy. The text carries the name; the swatch carries color and shape.
decorative: true for this pattern. Reserve label for swatches that must stand alone without adjacent text (see Accessibility).
Same union as Shape and Image inline SVG:
label (LocalizedMessage) → role="img" and aria-label on the root svg.decorative: true → aria-hidden="true" and focusable="false".