Interactions
Use interactions with the current published Askr packages.
@askrjs/askr0.0.59
How to use interactions
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 interactions 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>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 the same control through plus/minus to zoom, arrow keys to pan, and Home to reset the view.
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.