Interactions

Interactions: 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="Interactive latency">
  <Plot.Line x="timestamp" y="latencyMs" />
  <Plot.Tooltip mode="x" channels={['timestamp', 'latencyMs']} />
  <Plot.Crosshair axes="xy" />
  <Plot.Select mode="toggle" />
  <Plot.Zoom axes="x" wheel pinch pan />
</Plot.Root>

`Brush` takes an `axis` (`x`, `y`, or `xy`) and a `modifier`, which defaults to `shift` — Shift-drag brushing is the product-safe default because a plain drag is already reserved for panning and ordinary page scrolling. Set `modifier="none"` only when the plot isn't sharing gesture space with anything else that needs a plain drag.

Zoom

`Zoom` enables `wheel`, `pinch`, and `pan` independently across the chosen `axes` (`x`, `y`, or `xy`), with `min`/`max` bounding how far the viewer can zoom. Wheel and pinch scale the enabled axes directly; a plain drag pans when `pan` is on. Keyboard users get `+`/`-` to zoom and `Home` to reset the view — but plain arrow keys move mark focus (the same navigation Crosshair tracks), not the pan; panning needs `Shift`+arrow specifically, so a plain arrow press won't move the view even with `pan` enabled.

Crosshair

`Crosshair` draws an inspection guide along `x`, `y`, or `xy` that tracks pointer or keyboard focus without changing the underlying view or selection state. It shares the same hit-testing records as tooltip and keyboard navigation, so whatever a viewer inspects with the mouse is exactly what arrow-key navigation lands on.

Selections

`PlotSelection` is just `{ keys: readonly (string | number)[] }`, tracked against each row's stable `rowKey` rather than its position — so a selection survives sorting, filtering, or new rows arriving. Use `defaultSelection` for local, uncontrolled state, or `selection` plus `onSelectionChange` when a route or sibling component needs to drive it. With brushing enabled, Shift+Space toggles the currently focused row into the selection from the keyboard.