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