Englische Referenzdokumentation. Der technische Originaltext und die Codebeispiele bleiben unverändert auf Englisch; die Website-Navigation ist deutsch.

Orient: align a radial view

Optional MIT feature for radial views: align a segment or time window, keep text upright, restore the view and respect reduced motion. Supported types, API, controls, events and persistence; the plain Core entry stays lean.

View .md Agent setup

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.

WestCoast Charts 1.1.5 · generated from the library guide at commit 95f093ba. Code examples in the guide are executed by the library's docs check.