# Orient: align a radial view

> WestCoast Charts 1.1.5, release, public Core release, on npm. HTML: https://westcoast-charts.com/docs/features/orient/ · Index for agents: https://westcoast-charts.com/llms.txt · Source: library guide, commit 95f093ba

Turn a radial chart so the part that matters sits where the reader looks first: the evening
incident of a 24 h ops clock on top, the second half of a month at 12 o'clock, a goal's end at
3 o'clock. Not the same as perspectives (saved and shared view states): orient is one of the
things a perspective captures.

```js
import 'west-coast-charts/features/orient'   // or <script src="dist/features/orient.min.js"> after the runtime

const chart = new WestCoastCharts(el, {
  chart: { type: 'radialColumn', orient: { enabled: true, angle: 90 } }, // 18:00 on top of a 24 h clock
  // ...
})
await chart.orient.rotateBy(-45)             // degrees, snapped to whole segments
await chart.orient.rotateBy({ steps: 1 })    // one time window clockwise (3 h on a 24 h clock)
await chart.orient.rotateTo('18:40', 'top')  // the 18:40 window starts at 12 o'clock
await chart.orient.rotateTo('Design', 'right')      // a layer segment; goal arcs bring their end
await chart.orient.rotateTo(15, 'top', { align: 'start' })
chart.orient.get()   // { angle, kind, steps, step, top, start, startAt, default }
chart.orient.segmentAt('top'); chart.orient.describe(); await chart.orient.reset()
```

- Charts: `radialColumn` with every layer and module (sunburst, donut, goals, heatmap rings,
  quint incident wedge, chord inside, matrix core, wave ring, gauge arcs), premium `chord`, and the
  core `pie`, `donut`, `polarArea` and `radialBar` (as an offset on their own start / end angles;
  the user's angles stay theirs). Other types ignore the API (`get().kind === null`).
- Text never turns: category labels, value scales, ring names, legends and keys are placed upright
  at the new angles by the renderers. Quint ring names stay at the configured top.
- The start stays labelled: while the ring is turned its first category label is bold and a dashed
  seam marks where the ring starts; a thinned-out start label is drawn anyway.
- Snapping: `rotateBy(degrees)` moves by whole segments (at least one; `{ snap: false }` for exact
  degrees). One step (buttons, keys, `{ steps }`) is a time window: the whole number of segments
  that divides the ring and comes closest to 45° (144 x 10 min -> 3 h, 7 days -> 1 day, 30 days ->
  3 days); `chart.orient.step` sets degrees instead. `rotateTo` aligns a time's window start, a goal
  arc's end, anything else its middle (`align` overrides).
- UI (`chart.orient.enabled` or `chart.orient: true`): rotate-left / rotate-right / reset buttons at
  the start of the toolbar, or in a small bar of their own when the chart has no toolbar; arrow keys
  and Home on a focused button. On the focused chart `[` / `]` turn by a step and Home resets a turned
  chart (in the default orientation Home stays the "first item" key). Double-click a segment, or
  Shift+Enter on a keyboard-focused item, turns it to `target` (default `'top'`).
- Motion: radialColumn turns in place (the bars and layer arcs slide round the short way, labels
  fade in after them); the other types re-render. Reduced motion (the OS setting, the motion
  policy, `animations.enabled: false`) or `{ animate: false }` jumps.
- State: the turn lives on the chart, so `updateOptions` / `updateSeries` / resizes keep it; an
  explicit `chart.orient.angle` in `updateOptions` sets it. ViewState slice `orient` (degrees in
  (-180, 180]): perspectives, history entries and `#wcc=` share links carry it.
- Accessibility: every turn is announced ("Turned 90° clockwise from the default. 18:00 is at the
  top. The start (00:00) is at the right."); the same sentence joins the chart's `<desc>` and
  `chart.describe()` while the chart is turned. Strings: `locale.wcc.orient.*` (de included).
- Event `wccOrientChange { angle, previous, picked, top, start, startAt, kind, steps, step, default }`.
- Bundle: a feature module of its own (`dist/features/orient.min.js`, budget in
  `build/features.js`); the core and premium only read the offset (`ctx._wccRot`).

Not done: 3D tilt (on purpose), free-angle dragging of the ring, orient for non-radial types.