Askr
UI & Components

Radial Marks

Use radial marks with the current published Askr packages.

  • @askrjs/askr0.0.59

How to use radial marks

Create a typed plot factory once, give the root stable row data, and compose only the scales, marks, and interactions the chart needs.

  1. Import the published @askrjs/askr entrypoint.
  2. Keep radial marks configuration next to the component, route, or server composition root that owns it.
  3. 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>

Arcs

`Arc` takes a numeric `value` channel and an optional `category` color channel, plus `innerRadius`, `outerRadius`, `startAngle`, `endAngle`, `padAngle`, and `cornerRadius` for shaping the wedge. A pie chart is `innerRadius={0}`; a donut is a positive `innerRadius`; a bounded gauge is an `Arc` constrained by `min`/`max` alongside a `meter` on `Root`.

Polar values

`Arc.value` reads the same field/accessor/expression channel forms as any other mark, so aggregating with `sum(input)` or `count()` before feeding it into `value` works the same way it does for `Bar`. `min` and `max` bound the value for gauge-style compositions, where the arc's sweep represents progress toward a fixed range rather than a share of a total.

Labels

Arcs don't carry their own label prop; annotate them by composing a `Text` mark alongside the `Arc`, positioned by its own `x`/`y` channels, or rely on `title` (present on every mark) to supply per-slice text that surfaces through the tooltip. `Legend` is usually the more direct way to identify categories on a pie or donut without cluttering the wedges themselves.

Interaction

`Tooltip channels` and `format` control what a hovered or focused arc reports, and an interactive `Legend` can filter the underlying color scale without the caller rewriting any data. `onActivate(row, key)` fires on click or keyboard activation of a wedge, which is the natural hook for drilling from a summary donut into a detail view.