# Radial Marks

> Radial Marks: anatomy, keyboard behavior, state, and theming in Askr.

Source: [https://askrjs.com/docs/charts/radial-marks](https://askrjs.com/docs/charts/radial-marks)

Status: stable. Packages: @askrjs/askr.

**Published packages are authoritative.** Examples may lag behind a published contract. When guidance differs, verify the exports and TypeScript declarations in your installed package, then file an issue.

## Example

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

## Documentation navigation

[Previous](https://askrjs.com/docs/charts/cartesian-marks/index.md) | [Next](https://askrjs.com/docs/charts/grid-and-annotation-marks/index.md)