Live Data and View State
Use live data and view state with the current published Askr packages.
@askrjs/askr0.0.59
How to use live data and view state
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 live data and view state 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>Append and upsert
`appendPlotRows(rows, additions)` adds one or many rows to the end of an array without mutating the original. `upsertPlotRows(rows, updates, rowKey)` replaces any row whose key matches an update and appends the rest, and rejects duplicate keys within the update batch itself — both return a frozen result, or the original array when nothing actually changed.
Trim rows
`trimPlotRows(rows, options)` keeps a live array from growing without bound. Pass a plain number (or `{ rows: N }`) to retain the latest N rows by position, or `{ durationMs, field, now? }` to retain only rows whose `Date` field falls within a trailing time window — the natural pairing for a plot that's also using `followLatest`.
Follow latest
`Root`'s `followLatest` prop accepts a bare number as row-count shorthand, `{ rows: N }`, or `{ durationMs, field }` for a time-based window, and keeps the visible view pinned to the newest data as it arrives. Any user pan or zoom pauses following immediately, and it stays paused — even as more rows come in — until the app calls `PlotApi.resumeLive()`, so an operator inspecting an anomaly is never yanked back to "now" mid-investigation.
Controlled view
`PlotView` holds optional `x` and `y` domain tuples plus a `scales` map for named coordinate scales; `x`/`y` are shorthand aliases for the primary scales, and an entry in `scales` takes precedence for that specific scale. Use `defaultView` when the view can live entirely inside the plot, or `view` together with `onViewChange` when a URL, route, or sibling control needs to own and synchronize the visible domain.