Grid and Annotation Marks
Grid and Annotation Marks: anatomy, keyboard behavior, state, and theming in Askr.
Example
import { createPlot } from '@askrjs/charts';
const Plot = createPlot<ProjectRow>();
<Plot.Root data={rows} rowKey="id" label="Deploy duration">
<Plot.Grid axis="y" tickCount={5} />
<Plot.Rule y={300} stroke="status" dash={[4, 4]} />
<Plot.Text x="timestamp" y="durationMs" text="label" />
</Plot.Root>Cells and rects
Cell plots x/y categorical or scale positions with an optional numeric value driving color, and inset for spacing — this is the primitive behind heatmaps. Rect draws arbitrary rectangles from x/x2/y/y2 with an optional radius, and is what a flame graph is built from once partition({ id, parentId?, children?, value, padding? }) has turned hierarchical rows into a rectangle layout.
Rules
Rule draws a straight reference line or interval from optional x, x2, y, and y2, with strokeWidth and a dash pattern for distinguishing it from data marks. It's the usual building block for threshold lines, target markers, and — paired with Point and Text — timeline spans.
Text
Text places label or annotation strings at x/y with a required text channel, plus align and baseline (standard Canvas text alignment values) and an optional font override. Because text accepts the same channel forms as any other mark, labels can be pulled straight from row fields or computed with an accessor.
Legends and tooltips
Legend references a named scale, an optional label, a position (top, right, bottom, left), and interactive to let viewers filter series by clicking swatches — filtering only affects the color scale, not the caller's underlying data. Tooltip takes an optional channels list to restrict which fields show up and a format function that receives the resolved channel record for full control over the displayed text.