Radial Marks

Radial Marks: 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="Requests by service">
  <Plot.Arc value="requests" category="service" innerRadius={48} />
  <Plot.Legend label="Service" position="bottom" />
  <Plot.Tooltip channels={['service', 'requests']} />
</Plot.Root>

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