# Grid and Annotation Marks

> Grid and Annotation Marks: anatomy, keyboard behavior, state, and theming in Askr.

Source: [https://askrjs.com/docs/charts/grid-and-annotation-marks](https://askrjs.com/docs/charts/grid-and-annotation-marks)

Status: stable. Packages: @askrjs/askr.

**Published packages are authoritative.** Examples may lag behind a published contract. When guidance differs, verify the exports and TypeScript declarations in your installed package, then file an issue.

## Example

```tsx
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.

## Documentation navigation

[Previous](https://askrjs.com/docs/charts/radial-marks/index.md) | [Next](https://askrjs.com/docs/charts/interactions/index.md)