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