Grid and Annotation Marks
Use grid and annotation marks with the current published Askr packages.
@askrjs/askr0.0.59
How to use grid and annotation marks
Create a typed plot factory once, give the root stable row data, and compose only the scales, marks, and interactions the chart needs.
- Import the published @askrjs/askr entrypoint.
- Keep grid and annotation marks configuration next to the component, route, or server composition root that owns it.
- Handle pending, unavailable, cancellation, and failure states, then verify the production path.
import { createPlot } from '@askrjs/charts';
const Plot = createPlot<ProjectRow>();
<Plot.Root data={rows} rowKey={(row) => row.id} label="Revenue by day">
<Plot.Axis axis="x" />
<Plot.Axis axis="y" />
<Plot.Line x="createdAt" y="revenue" />
</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.