@adia-ai/web-components 0.8.42 → 0.8.44

package/components/chart/chart.class.js

@@ -22,14 +22,21 @@
  *   x            — key for X-axis data
  *   y            — key(s) for Y-axis, comma-separated for multi-series
  *   no-average   — suppress the overlaid average line on bar/line (default: false — line shown).
- *                  `hide-average` is a deprecated dual-read alias (ADR-0063, gh#1563).
  *   color        — accent/success/warning/danger/info
- *   no-grid      — hide gridlines. `hide-grid` is a deprecated dual-read alias (ADR-0063, gh#1563).
- *   no-values    — hide value labels. `hide-values` is a deprecated dual-read alias (ADR-0063, gh#1563).
+ *   no-grid      — hide gridlines.
+ *   no-values    — hide value labels.
  *   corner-radius — bar corner radius in px (default: null, falls back to --a-radius)
  *   dots         — line/multi-line marker visibility: all|none|hover|last (default: all)
  *   series-emphasis — multi-line: series key that keeps full area+line treatment; others render line-only, dimmed
+ *   ratio        — ADR-0074 aspect-ratio bucket: 3:2|1:1|2:3 (default: '' — auto-snap via
+ *                  the chart's own live aspect; explicit value pins it regardless of the
+ *                  box's actual shape). Reflects the resolved bucket as data-ratio-resolved.
+ *   y-min/y-max  — pins the value-axis domain for cartesian types (bar, line, area,
+ *                  scatter, multi-line, stacked-bar, grouped-bar, composed). Unset
+ *                  (default) keeps auto-scale (floor 0, ceiling data max). N/A for
+ *                  radial/part-to-whole types (gh#1690).
  *
+
  * JS API:
  *   .data = [{...}, ...]  — array of data objects
  */
@@ -65,6 +72,15 @@ function esc(s) {
   return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
 }
 
+/* REQ-R-003 (bar, 1:1) — "category labels rotate 0°→abbreviated": a square
+   container has less width per category than 3:2, so labels truncate to a
+   fixed character budget with an ellipsis rather than rotating (rotation
+   would collide with the SPEC's own 2:3 orientation-swap cell). */
+function truncateLabel(label, maxChars) {
+  const s = String(label);
+  return s.length > maxChars ? s.slice(0, Math.max(1, maxChars - 1)) + '…' : s;
+}
+
 /* Emit tooltip data-attributes for a datum shape. Consumed by the pointer
    delegate below. All fields optional — unused ones are skipped. */
 function tip({ label, value, pct, series }) {
@@ -202,6 +218,59 @@ function topRoundedBarPath(x, y, w, h, r = 0) {
   return `M${x},${y + h} V${y + rr} Q${x},${y} ${x + rr},${y} H${x + w - rr} Q${x + w},${y} ${x + w},${y + rr} V${y + h} Z`;
 }
 
+/** Mirror of topRoundedBarPath for HORIZONTAL bars (REQ-R-003 bar, 2:3 —
+ *  "Bars run horizontal, category on Y"): rounds the RIGHT (value) end,
+ *  leaves the LEFT (category-axis) end square, so the bar still visually
+ *  "sits flush" on its axis the same way the vertical bar does on its
+ *  baseline. r is clamped to (h/2, w) to handle short bars safely. */
+function rightRoundedBarPath(x, y, w, h, r = 0) {
+  if (h <= 0 || w <= 0) return '';
+  const rr = Math.max(0, Math.min(r, h / 2, w));
+  if (rr === 0) {
+    return `M${x},${y} H${x + w} V${y + h} H${x} Z`;
+  }
+  return `M${x},${y} H${x + w - rr} Q${x + w},${y} ${x + w},${y + rr} V${y + h - rr} Q${x + w},${y + h} ${x + w - rr},${y + h} H${x} Z`;
+}
+
+/* REQ-R-003 (bar 1:1 carry-forward from Wave A review; segments 1:1) —
+   "fewer visible [bars|segments] before scroll/aggregate": the matrix cell
+   itself names two possible affordances (scroll OR aggregate). Scroll would
+   add a new interactive overflow surface to a primitive that otherwise
+   renders one flat, non-scrolling SVG per instance; aggregate reuses
+   exactly the same synthetic "+N more" bucket shape either caller already
+   needs, so that's the reading this ships (named explicitly — a documented
+   choice, not a silent substitution). Caps the rendered category count at
+   `cap`, rolling every category past `cap - 1` into one synthetic tail
+   bucket. `sortByValue` selects which categories survive the cut:
+   segments is a proportional composition strip, so keeping the largest
+   contributors visible keeps the strip representative of the whole;
+   bar's category axis is normally ordered (e.g. months), so it keeps the
+   first `cap - 1` categories in their original authored order instead and
+   aggregates the trailing tail — reordering an ordered axis by value would
+   itself be a bigger, unasked-for behavior change. */
+function aggregateTail(labels, vals, cap, sortByValue) {
+  if (vals.length <= cap) return { labels, vals };
+  const keepCount = Math.max(1, cap - 1);
+  const order = vals.map((_, i) => i);
+  const keepIdx = sortByValue
+    ? order.slice().sort((a, b) => vals[b] - vals[a]).slice(0, keepCount).sort((a, b) => a - b)
+    : order.slice(0, keepCount);
+  const keepSet = new Set(keepIdx);
+  const restIdx = order.filter(i => !keepSet.has(i));
+  const restSum = restIdx.reduce((s, i) => s + vals[i], 0);
+  return {
+    labels: keepIdx.map(i => labels[i]).concat([`+${restIdx.length} more`]),
+    vals: keepIdx.map(i => vals[i]).concat([restSum]),
+  };
+}
+
+// REQ-R-003 (bar, 1:1) / (segments, 1:1) — visible-category caps the
+// aggregate-tail helper above enforces. Segments' strip reads cluttered
+// past ~5 proportional slices; bar's individual columns tolerate one more
+// before the same "too many to read" point (fewer per-bar chrome).
+const BAR_1_1_VISIBLE_CAP = 6;
+const SEGMENTS_1_1_VISIBLE_CAP = 5;
+
 /* ── Aspect ratios ─────────────────────────────────────────────── */
 
 // Implicit aspect ratio — a chart derives its height from width ÷ this ratio when
@@ -209,6 +278,15 @@ function topRoundedBarPath(x, y, w, h, r = 0) {
 // was retired (OD-CHART-02); parents size charts directly now.
 const ASPECTS = { std: { ratio: 4 / 3 } };
 
+// ADR-0074 (Chart 2.0 ratio grammar, gh#1624 plan step 1) — the three
+// ratified `ratio` buckets as width/height numbers, and the two midpoint
+// boundaries the auto-snap classification (below) compares a live aspect
+// against. Deliberately three discrete buckets, never interpolated — a
+// live aspect strictly between two boundaries snaps to the single nearest
+// named bucket (1:1 is the default bucket: neither boundary matched).
+const CHART_RATIOS = { '3:2': 3 / 2, '1:1': 1, '2:3': 2 / 3 };
+const RATIO_SNAP = { wide: 5 / 4, tall: 4 / 5 };
+
 /* ── Component ──────────────────────────────────────────────────── */
 
 export class UIChart extends UIElement {
@@ -216,22 +294,19 @@ export class UIChart extends UIElement {
     type:        { type: String,  default: 'bar',    reflect: true },
     x:           { type: String,  default: '',       reflect: true },
     y:           { type: String,  default: '',       reflect: true },
-    // ADR-0063 (gh#1563) — `no-*` is the ratified negation prefix; `hide-*`
-    // retires. `hideAverage`/`hideGrid`/`hideValues` stay declared (dual-
-    // read compat, 0.8.42) so old markup keeps reflecting; `#resolveNoAttr()`
-    // (called from connected()) mirrors an old-only value onto the new prop
-    // + warns once per attribute. Every internal render usage reads the
-    // canonical `noAverage`/`noGrid`/`noValues` below.
-    hideAverage: { type: Boolean, default: false,    reflect: true, attribute: 'hide-average' },
+    // ADR-0063 (gh#1563) — `no-*` is the ratified negation prefix; the
+    // deprecated `hide-*` dual-read shim was cut in 0.8.43 (gh#1617).
     noAverage:   { type: Boolean, default: false,    reflect: true, attribute: 'no-average' },
     color:       { type: String,  default: '',       reflect: true },
-    hideGrid:    { type: Boolean, default: false,    reflect: true, attribute: 'hide-grid' },
     noGrid:      { type: Boolean, default: false,    reflect: true, attribute: 'no-grid' },
-    hideValues:  { type: Boolean, default: false,    reflect: true, attribute: 'hide-values' },
     noValues:    { type: Boolean, default: false,    reflect: true, attribute: 'no-values' },
     cornerRadius: { type: Number, default: null,     reflect: true, attribute: 'corner-radius' },
     smooth:      { type: Number,  default: 0.4,      reflect: true },
     size:        { type: String,  default: '',       reflect: true },
+    // ADR-0074 (gh#1624 plan step 1) — grammar + snap plumbing only; no
+    // per-type rendering keys off this yet (later waves). See CHART_RATIOS
+    // / RATIO_SNAP + #dims() below for the auto-snap/pin mechanism.
+    ratio:       { type: String,  default: '',       reflect: true },
     format:      { type: String,  default: 'abbr',   reflect: true },
     loading:     { type: Boolean, default: false,    reflect: true },
     /* gh#561 — dot/marker visibility for line + multi-line. `all` is the
@@ -247,36 +322,18 @@ export class UIChart extends UIElement {
        (default) applies full treatment to every series — unchanged from
        pre-561 behavior. */
     seriesEmphasis: { type: String, default: '', reflect: true, attribute: 'series-emphasis' },
+    /* gh#1690 — pins the value axis domain for cartesian types (bar, line,
+       area, scatter, multi-line, stacked-bar, grouped-bar, composed).
+       Unset (default, null) keeps today's auto-scale (floor 0, ceiling the
+       data max). N/A for radial/part-to-whole types (pie, donut, radar,
+       radial-bar, gauge, funnel, treemap, sankey, segments) — those never
+       read a shared linear value axis. */
+    yMin: { type: Number, default: null, reflect: true, attribute: 'y-min' },
+    yMax: { type: Number, default: null, reflect: true, attribute: 'y-max' },
   };
 
   static template = () => null;
 
-  // ADR-0063 (gh#1563) compat-shim warn-once flags — one per renamed
-  // attribute (not collapsed into one flag; each fires independently the
-  // first time its own old attribute resolves). Per-class, matching
-  // toggle-group.class.js's #deprecationWarned idiom.
-  static #warned = { hideAverage: false, hideGrid: false, hideValues: false };
-
-  /** Dual-read resolution for one `hide-*` → `no-*` rename (ADR-0063).
-   *  New-name precedence: if `newAttr` is present, the old attribute is
-   *  ignored outright (no mirror, no warn) — the new prop already reflects
-   *  its own attribute normally. Otherwise, when only the old attribute is
-   *  present, mirror its (always-true, boolean-presence) value onto the
-   *  new prop and warn once per class. */
-  #resolveNoAttr(oldAttr, newAttr, newProp, warnKey) {
-    if (this.hasAttribute(newAttr)) return;
-    if (!this.hasAttribute(oldAttr)) return;
-    this[newProp] = true;
-    if (!UIChart.#warned[warnKey]) {
-      UIChart.#warned[warnKey] = true;
-      // eslint-disable-next-line no-console
-      console.warn(
-        `[AdiaUI] <chart-ui [${oldAttr}]> is deprecated — use [${newAttr}] ` +
-        `instead (ADR-0063, gh#1563). Kept working as-is; no behavior change.`,
-      );
-    }
-  }
-
   #data = [];
   #shapeWarned = false;  // FEEDBACK-24: one-shot wrong-.data-shape warning
   #resizeObs = null;
@@ -301,6 +358,40 @@ export class UIChart extends UIElement {
     return Number.isFinite(parsed) && parsed > 0 ? parsed : 6;
   }
 
+  /** Resolves the value-axis domain [lo, hi] for a cartesian render path,
+   *  honoring explicit `yMin`/`yMax` pins over the default auto-scale
+   *  (floor 0, ceiling the data max) — gh#1690. `vals` is the full set of
+   *  values the unpinned bound would otherwise be derived from (a single
+   *  series' values, or every series' values flattened for multi-series
+   *  types). Feeds directly into `niceScale(...this.#yBounds(vals), N)`. */
+  #yBounds(vals) {
+    const lo = this.yMin != null && Number.isFinite(this.yMin) ? this.yMin : 0;
+    const hi = this.yMax != null && Number.isFinite(this.yMax) ? this.yMax : Math.max(...vals);
+    return [lo, hi];
+  }
+
+  /** gh#1693 review — a datum outside a PINNED [yMin, yMax] domain must
+   *  not escape the plot box: chart-ui's SVG has `overflow: visible`, so
+   *  an unclamped bar/point renders off-canvas and bursts into
+   *  surrounding page content (e.g. y-max="1", value 1.5 resolves to a
+   *  negative y-coordinate above the chart). Clamps a computed pixel
+   *  SPAN (bar/segment height or width) to `[0, max]` — used for bar,
+   *  stacked-bar, grouped-bar, and composed's bar series. The displayed
+   *  value LABEL and tooltip always show the real (unclamped) value —
+   *  only the render geometry is clamped. */
+  #clampSpan(span, max) {
+    return Math.min(Math.max(span, 0), max);
+  }
+
+  /** Companion to #clampSpan for point-plotted series (line, area,
+   *  scatter, multi-line, composed's line series) — clamps a computed
+   *  pixel COORDINATE to the plot's own [lo, hi] pixel range so an
+   *  out-of-domain point renders pinned to the nearest plot edge instead
+   *  of escaping the viewBox. */
+  #clampCoord(coord, lo, hi) {
+    return Math.min(Math.max(coord, lo), hi);
+  }
+
   set data(arr) {
     // FEEDBACK-24: a non-array — typically the Chart.js `{labels, datasets}`
     // envelope — is silently coerced to [] below, producing a blank chart
@@ -353,12 +444,6 @@ export class UIChart extends UIElement {
   }
 
   connected() {
-    // ADR-0063 (gh#1563) compat shims — resolve BEFORE the first render so
-    // there's no wrong-then-right flash; see #resolveNoAttr() above.
-    this.#resolveNoAttr('hide-average', 'no-average', 'noAverage', 'hideAverage');
-    this.#resolveNoAttr('hide-grid',    'no-grid',    'noGrid',    'hideGrid');
-    this.#resolveNoAttr('hide-values',  'no-values',  'noValues',  'hideValues');
-
     if (!this.hasAttribute('role'))       this.setAttribute('role', 'img');
     if (!this.hasAttribute('aria-label')) this.setAttribute('aria-label', `${this.type} chart`);
 
@@ -458,9 +543,16 @@ export class UIChart extends UIElement {
     // use it. Otherwise derive from aspect ratio. Safe because resize sets
     // overflow:auto which prevents content from pushing height.
     const hasExplicitHeight = this.hasAttribute('resize') || this.style.height;
-    let height = hasExplicitHeight && containerH > 40
-      ? containerH
-      : Math.round(width / aspect.ratio);
+    // ADR-0074 — an explicit `ratio` PINS the box's own aspect, overriding
+    // whatever height the container/explicit-height path would otherwise
+    // give (REQ-R-002: "regardless of the container's actual aspect
+    // ratio"). Unset falls through to the pre-existing behavior unchanged.
+    const pinnedRatio = CHART_RATIOS[this.ratio];
+    let height = pinnedRatio
+      ? Math.round(width / pinnedRatio)
+      : hasExplicitHeight && containerH > 40
+        ? containerH
+        : Math.round(width / aspect.ratio);
 
     // Cap against --chart-max-height (CSS-resolved to px by getComputedStyle).
     // Keeps wide-viewport renders from producing absurdly tall charts while
@@ -469,6 +561,25 @@ export class UIChart extends UIElement {
     const maxH = parseFloat(getComputedStyle(this).maxHeight);
     if (isFinite(maxH) && maxH > 0 && height > maxH) height = Math.round(maxH);
 
+    // ADR-0074 auto-snap classification (gh#1624 plan step 1 — grammar +
+    // snap plumbing only, no per-type rendering keyed off this bucket yet).
+    // A pinned `ratio` reports its own bucket regardless of what the box's
+    // ACTUAL post-cap aspect ended up being (the pin is a label, per
+    // REQ-R-002, not merely a suggestion the cap can override); otherwise
+    // classify the chart's own live rendered aspect against the two
+    // midpoint boundaries — nearest bucket wins, never interpolated.
+    const liveAspect = width / Math.max(height, 1);
+    const resolvedRatio = pinnedRatio
+      ? this.ratio
+      : liveAspect >= RATIO_SNAP.wide
+        ? '3:2'
+        : liveAspect <= RATIO_SNAP.tall
+          ? '2:3'
+          : '1:1';
+    if (this.getAttribute('data-ratio-resolved') !== resolvedRatio) {
+      this.setAttribute('data-ratio-resolved', resolvedRatio);
+    }
+
     // Scale-aware font sizes: consistent regardless of chart dimensions
     // Use sm/md/lg or auto-detect from smallest dimension
     const minDim = Math.min(width, height);
@@ -482,12 +593,18 @@ export class UIChart extends UIElement {
     // out the Y-axis label gutter entirely — otherwise the plot area
     // collapses at small sizes.
     const noGrid = this.noGrid;
-    const yLabelW = noGrid ? 0 : fontSize * 3.2;
+    // REQ-R-004 (Chart 2.0 ratio-and-surface SPEC) — at 1:1 and 2:3 the
+    // internal chart margins shrink further because those buckets have the
+    // least WIDTH budget to spare; 3:2 keeps the full gutter since width is
+    // abundant there. A flat 0.8 trim on the y-label gutter is enough to
+    // free real plot width without crowding the tick text against the axis.
+    const marginTrim = resolvedRatio === '3:2' ? 1 : 0.8;
+    const yLabelW = noGrid ? 0 : fontSize * 3.2 * marginTrim;
     const hasXLabels = !!this.x;
     const pad = {
       top:    noGrid ? 2 : fontSize * 1.6,
       right:  noGrid ? 2 : fontSize * 1.2,
-      bottom: !hasXLabels || noGrid ? 2 : fontSize * 2.2,
+      bottom: !hasXLabels || noGrid ? 2 : fontSize * 2.2 * marginTrim,
       left:   yLabelW,
     };
 
@@ -495,7 +612,7 @@ export class UIChart extends UIElement {
     const plotW = width - pad.left - pad.right;
     const barMinW = Math.max(4, plotW / n * 0.6);
 
-    return { width, height, pad, fontSize, labelSize, valueSize, barMinW, plotW, n, sizeClass };
+    return { width, height, pad, fontSize, labelSize, valueSize, barMinW, plotW, n, sizeClass, ratioResolved: resolvedRatio };
   }
 
   /* ── Main render ──────────────────────────────────────────────── */
@@ -1065,15 +1182,49 @@ export class UIChart extends UIElement {
 
   /* ── Grid + axes helper ───────────────────────────────────────── */
 
-  #gridAndAxes(width, height, ticks, labels, pad, dims) {
+  /**
+   * opts (REQ-R-003 ratio-matrix hooks, all optional — every existing
+   * caller that passes no opts renders byte-identically to pre-Wave-A):
+   *   thinGrid        — reduce Y-gridline/tick count the same way the sm
+   *                      sizeClass already does (line/area at 1:1/2:3).
+   *   vertical         — draw gridlines as vertical rules at the X-label
+   *                      stride instead of horizontal rules at each Y tick
+   *                      (area, 2:3 — "gridlines vertical-only").
+   *   xTickMode:'sparse' — force exactly first/mid/last X labels instead of
+   *                      the width-derived stride (line, 2:3 — "sparse
+   *                      (start/end + one mid)").
+   *   xTickMode:'everyNth' — a distinct DENSITY-based fixed index stride
+   *                      (label[0], label[N], label[2N], …, always the last)
+   *                      rather than sparse's fixed 3-label set or 3:2's
+   *                      pixel-width-fitted stride (line, 1:1 — "fewer
+   *                      x-axis ticks (every Nth)", REQ-R-003). N scales
+   *                      with the data length (targets ~4-5 visible labels)
+   *                      so a short and a long series both read as "every
+   *                      Nth", not a fixed magic number.
+   *   abbreviateLabels — truncate X labels to a fixed char budget (bar, 1:1).
+   *   pointAligned     — position gridlines/labels at the exact data-point
+   *                      X coordinate (`plotW / (labels.length - 1) * i`,
+   *                      no half-step offset) instead of the default
+   *                      category-BAND center (`plotW / labels.length * i
+   *                      + step/2`). `#renderLine`'s own points use the
+   *                      point formula (a line/area plot has no "band",
+   *                      just N-1 gaps between N points) — every caller
+   *                      that draws marks at continuous point positions
+   *                      passes this so its gridlines/labels land exactly
+   *                      under those marks; bar/scatter/segments etc. keep
+   *                      the band-centered default, correct for their own
+   *                      categorical geometry.
+   */
+  #gridAndAxes(width, height, ticks, labels, pad, dims, opts = {}) {
     const p = pad;
     const fs = dims?.fontSize || 10;
     const ls = dims?.labelSize || fs;
     let s = '';
 
-    // Reduce tick count at small sizes
+    // Reduce tick count at small sizes, or when a ratio-matrix caller asks
+    // for denser-bucket thinning (REQ-R-003: line/area "gridlines thinned").
     let displayTicks = ticks;
-    if (dims?.sizeClass === 'sm' && ticks.length > 4) {
+    if ((dims?.sizeClass === 'sm' || opts.thinGrid) && ticks.length > 4) {
       displayTicks = ticks.filter((_, i) => i % 2 === 0 || i === ticks.length - 1);
     }
 
@@ -1084,9 +1235,35 @@ export class UIChart extends UIElement {
     if (!this.noGrid) {
       const tickRange = ticks[ticks.length - 1] - ticks[0];
       const safeRange = tickRange || 1; // Prevent division by zero
-      for (const t of displayTicks) {
-        const gy = p.top + (height - p.top - p.bottom) * (1 - (t - ticks[0]) / safeRange);
-        s += `<line data-chart-grid x1="${p.left}" y1="${gy}" x2="${width - p.right}" y2="${gy}"/>`;
+
+      if (opts.vertical) {
+        /* REQ-R-003 (area, 2:3 "tall"): a horizontal rule per Y-tick reads
+           as clutter once the plot is this narrow — a vertical rule per
+           visible X-label instead emphasizes the tall silhouette, still
+           anchored to real category geometry rather than a decorative
+           substitute. */
+        if (labels && labels.length) {
+          const plotW = width - p.left - p.right;
+          const last = labels.length - 1;
+          // Point-aligned: matches #renderLine's own `plotW / (n-1) * i`
+          // exactly, so a vertical rule lands ON the data point it marks
+          // rather than at an unrelated category-band center (CodeRabbit
+          // #1658 finding — verified: the pre-fix band-center formula and
+          // #renderLine's point formula are two different coordinate
+          // systems whenever labels.length > 1).
+          const step = opts.pointAligned ? plotW / Math.max(last, 1) : plotW / labels.length;
+          const stride = Math.max(1, Math.round(labels.length / 3));
+          for (let i = 0; i < labels.length; i++) {
+            if (i % stride !== 0 && i !== last) continue;
+            const gx = opts.pointAligned ? p.left + step * i : p.left + step * i + step / 2;
+            s += `<line data-chart-grid x1="${gx}" y1="${p.top}" x2="${gx}" y2="${height - p.bottom}"/>`;
+          }
+        }
+      } else {
+        for (const t of displayTicks) {
+          const gy = p.top + (height - p.top - p.bottom) * (1 - (t - ticks[0]) / safeRange);
+          s += `<line data-chart-grid x1="${p.left}" y1="${gy}" x2="${width - p.right}" y2="${gy}"/>`;
+        }
       }
 
       /* Y-axis labels */
@@ -1095,19 +1272,46 @@ export class UIChart extends UIElement {
         s += `<text data-y-label x="${p.left - 4}" y="${gy + fs * 0.35}" text-anchor="end" font-size="${fs}">${this.#fmtValue(t)}</text>`;
       }
 
-      /* X-axis labels — stride based on label width so they never overlap */
+      /* X-axis labels — stride based on label width so they never overlap,
+         unless a ratio-matrix mode forces a different selection. */
       if (labels) {
         const plotW = width - p.left - p.right;
         const step = plotW / labels.length;
-        const maxChars = labels.reduce((m, l) => Math.max(m, String(l).length), 1);
-        const labelPx = maxChars * ls * 0.6 + ls * 0.75;
-        const stride = Math.max(1, Math.ceil(labelPx / step));
         const last = labels.length - 1;
-        for (let i = 0; i < labels.length; i++) {
-          if (i % stride !== 0 && i !== last) continue;
-          if (i !== last && last - i < stride) continue;
-          const lx = p.left + step * i + step / 2;
-          s += `<text data-x-label x="${lx}" y="${height - fs * 0.5}" text-anchor="middle" font-size="${ls}">${esc(labels[i])}</text>`;
+        const indices = new Set();
+
+        if (opts.xTickMode === 'sparse' && last > 1) {
+          indices.add(0);
+          indices.add(Math.round(last / 2));
+          indices.add(last);
+        } else if (opts.xTickMode === 'everyNth' && last > 1) {
+          // Every-Nth fixed index stride — mechanically distinct from BOTH
+          // sparse's fixed 3-label set (start/end/mid only) and 3:2's
+          // pixel-width-fitted stride below. N targets ~4-5 visible labels
+          // regardless of series length.
+          const n = Math.max(2, Math.ceil(labels.length / 4));
+          for (let i = 0; i <= last; i += n) indices.add(i);
+          indices.add(last);
+        } else {
+          const maxChars = labels.reduce((m, l) => Math.max(m, String(l).length), 1);
+          const labelPx = maxChars * ls * 0.6 + ls * 0.75;
+          const stride = Math.max(1, Math.ceil(labelPx / step));
+          for (let i = 0; i < labels.length; i++) {
+            if (i % stride !== 0 && i !== last) continue;
+            if (i !== last && last - i < stride) continue;
+            indices.add(i);
+          }
+        }
+
+        // Point-aligned mode (line/area): label X matches the exact data
+        // point coordinate, same fix as the vertical-gridline branch above
+        // — `step` here stays the band-width used for the width-fit stride
+        // heuristic; `pointStep`/`lx` are the actual rendered position.
+        const pointStep = plotW / Math.max(last, 1);
+        for (const i of indices) {
+          const lx = opts.pointAligned ? p.left + pointStep * i : p.left + step * i + step / 2;
+          const text = esc(opts.abbreviateLabels ? truncateLabel(labels[i], 4) : labels[i]);
+          s += `<text data-x-label x="${lx}" y="${height - fs * 0.5}" text-anchor="middle" font-size="${ls}">${text}</text>`;
         }
       }
     }
@@ -1121,27 +1325,57 @@ export class UIChart extends UIElement {
     const dims = this.#dims();
     const data = this.#data;
     const yKey = this.#yKeys()[0] || this.y;
-    const vals = data.map(v => +(v[yKey] ?? 0));
-    const labels = data.map(v => v[this.x] ?? '');
-    const ticks = niceScale(0, Math.max(...vals), 5);
+    let vals = data.map(v => +(v[yKey] ?? 0));
+    let labels = data.map(v => v[this.x] ?? '');
+    // Kept for the average-line calc below — the average is a property of
+    // the underlying data, not the display aggregation, so it stays
+    // unaffected by the "+N more" tail bucket.
+    const origVals = vals;
+
+    // REQ-R-003 (bar, 1:1) — Wave A review carry-forward: "fewer visible
+    // bars before scroll/aggregate" (see the `aggregateTail` helper above
+    // for the scroll-vs-aggregate reading). Runs before `ticks` is derived
+    // so the scale reflects the (possibly aggregated) rendered set, not
+    // the full original one.
+    if (dims.ratioResolved === '1:1' && vals.length > BAR_1_1_VISIBLE_CAP) {
+      ({ labels, vals } = aggregateTail(labels, vals, BAR_1_1_VISIBLE_CAP, false));
+    }
+
+    const ticks = niceScale(...this.#yBounds(vals), 5);
     const maxVal = ticks[ticks.length - 1];
+    const minVal = ticks[0];
+
+    // REQ-R-003 (bar, 2:3 "tall"): "Bars run horizontal (category on Y),
+    // legend below, best for long category lists" — a tall, narrow box has
+    // little width budget for a vertical bar's category labels underneath
+    // it, but a full column of height for one row per category. This is a
+    // genuine orientation swap, not the same layout rescaled.
+    if (dims.ratioResolved === '2:3') {
+      return this.#renderBarHorizontal(dims, labels, vals, ticks, maxVal);
+    }
 
     const { width, height, pad } = dims;
     const plotH = height - pad.top - pad.bottom;
     const plotW = width - pad.left - pad.right;
-    const barW = plotW / data.length;
+    const barW = plotW / labels.length;
     const barInner = barW * 0.6;
     const barGap = (barW - barInner) / 2;
 
-    let svg = this.#gridAndAxes(width, height, ticks, labels, pad, dims);
+    // REQ-R-003 (bar, 1:1 "square"): abbreviate category labels — a square
+    // has less width per category than 3:2. The synthetic "+N more" label
+    // (already short) truncates harmlessly under the same budget.
+    let svg = this.#gridAndAxes(width, height, ticks, labels, pad, dims, {
+      abbreviateLabels: dims.ratioResolved === '1:1',
+    });
 
     // At sm auto-hide value labels (they overlap at narrow widths).
     const showValues = !this.noValues && dims.sizeClass !== 'sm';
-    const showAverage = !this.noAverage && vals.length > 1 && dims.sizeClass !== 'sm' && !this.noGrid;
+    const showAverage = !this.noAverage && origVals.length > 1 && dims.sizeClass !== 'sm' && !this.noGrid;
 
-    for (let i = 0; i < data.length; i++) {
+    for (let i = 0; i < labels.length; i++) {
       const v = vals[i];
-      const barH = maxVal ? (v / maxVal) * plotH : 0;
+      const rawH = (maxVal - minVal) ? ((v - minVal) / (maxVal - minVal)) * plotH : 0;
+      const barH = this.#clampSpan(rawH, plotH);
       const bx = pad.left + barW * i + barGap;
       const by = pad.top + plotH - barH;
 
@@ -1153,8 +1387,9 @@ export class UIChart extends UIElement {
     }
 
     if (showAverage) {
-      const avg = vals.reduce((a, b) => a + b, 0) / vals.length;
-      const ay = pad.top + plotH - (maxVal ? (avg / maxVal) * plotH : 0);
+      const avg = origVals.reduce((a, b) => a + b, 0) / origVals.length;
+      const rawAvgH = (maxVal - minVal) ? ((avg - minVal) / (maxVal - minVal)) * plotH : 0;
+      const ay = pad.top + plotH - this.#clampSpan(rawAvgH, plotH);
       svg += `<line data-avg x1="${pad.left}" y1="${ay}" x2="${width - pad.right}" y2="${ay}"/>`;
       svg += `<text data-avg-label x="${width - pad.right + 2}" y="${ay + 3}" text-anchor="start" font-size="${dims.valueSize}">${this.#fmtValue(avg)}</text>`;
       /* Wider invisible hit target so the thin dashed line is hoverable */
@@ -1164,6 +1399,71 @@ export class UIChart extends UIElement {
     return { svg, viewBox: `0 0 ${width} ${height}` };
   }
 
+  /* REQ-R-003 (bar, 2:3) — horizontal orientation: category axis on the
+     LEFT (Y), value axis along the BOTTOM (X). Deliberately a separate
+     render path rather than a transposed reuse of the vertical one — the
+     gutter sizing (driven by label WIDTH, not a fixed font multiple), the
+     grid direction, and the bar path rounding (right end, not top end) all
+     differ structurally, not just by a coordinate swap. */
+  #renderBarHorizontal(dims, labels, vals, ticks, maxVal) {
+    const { width, height } = dims;
+    const fs = dims.fontSize;
+    const ls = dims.labelSize;
+    const noGrid = this.noGrid;
+
+    const maxChars = labels.reduce((m, l) => Math.max(m, String(l).length), 1);
+    const leftGutter = noGrid ? 2 : Math.min(width * 0.42, Math.max(fs * 3, maxChars * ls * 0.55 + ls));
+    const pad = {
+      top:    fs * 0.8,
+      right:  fs * 1.8,
+      bottom: noGrid ? 2 : fs * 1.8,
+      left:   leftGutter,
+    };
+    const plotW = width - pad.left - pad.right;
+    const plotH = height - pad.top - pad.bottom;
+    const barH = plotH / labels.length;
+    const barInner = barH * 0.6;
+    const barGap = (barH - barInner) / 2;
+
+    let svg = '';
+    if (!noGrid) {
+      const tickRange = (ticks[ticks.length - 1] - ticks[0]) || 1;
+      for (const t of ticks) {
+        const gx = pad.left + plotW * ((t - ticks[0]) / tickRange);
+        svg += `<line data-chart-grid x1="${gx}" y1="${pad.top}" x2="${gx}" y2="${height - pad.bottom}"/>`;
+        svg += `<text data-y-label x="${gx}" y="${height - pad.bottom + fs * 1.3}" text-anchor="middle" font-size="${fs}">${this.#fmtValue(t)}</text>`;
+      }
+    }
+
+    const showValues = !this.noValues;
+    const showAverage = !this.noAverage && vals.length > 1 && !noGrid;
+
+    const minVal = ticks[0];
+    for (let i = 0; i < labels.length; i++) {
+      const v = vals[i];
+      const rawW = (maxVal - minVal) ? ((v - minVal) / (maxVal - minVal)) * plotW : 0;
+      const barW = this.#clampSpan(rawW, plotW);
+      const by = pad.top + barH * i + barGap;
+      const bx = pad.left;
+
+      svg += `<text data-x-label x="${pad.left - 6}" y="${by + barInner / 2 + fs * 0.35}" text-anchor="end" font-size="${ls}">${esc(labels[i])}</text>`;
+      svg += `<path data-bar${tip({ label: labels[i], value: v })} d="${rightRoundedBarPath(bx, by, barW, barInner, this.#resolveRadius())}"/>`;
+      if (showValues) {
+        svg += `<text data-value x="${bx + barW + 4}" y="${by + barInner / 2 + fs * 0.35}" text-anchor="start" font-size="${dims.valueSize}">${this.#fmtValue(v)}</text>`;
+      }
+    }
+
+    if (showAverage) {
+      const avg = vals.reduce((a, b) => a + b, 0) / vals.length;
+      const rawAvgW = (maxVal - minVal) ? ((avg - minVal) / (maxVal - minVal)) * plotW : 0;
+      const ax = pad.left + this.#clampSpan(rawAvgW, plotW);
+      svg += `<line data-avg x1="${ax}" y1="${pad.top}" x2="${ax}" y2="${height - pad.bottom}"/>`;
+      svg += `<line data-hit${tip({ label: 'Average', value: avg })} x1="${ax}" y1="${pad.top}" x2="${ax}" y2="${height - pad.bottom}" stroke="transparent" stroke-width="12"/>`;
+    }
+
+    return { svg, viewBox: `0 0 ${width} ${height}` };
+  }
+
   /* ── Line chart ───────────────────────────────────────────────── */
 
   #renderLine() {
@@ -1172,19 +1472,41 @@ export class UIChart extends UIElement {
     const yKey = this.#yKeys()[0] || this.y;
     const vals = data.map(v => +(v[yKey] ?? 0));
     const labels = data.map(v => v[this.x] ?? '');
-    const ticks = niceScale(0, Math.max(...vals), 5);
+    const ticks = niceScale(...this.#yBounds(vals), 5);
     const maxVal = ticks[ticks.length - 1];
+    const minVal = ticks[0];
 
     const { width, height, pad } = dims;
     const plotH = height - pad.top - pad.bottom;
     const plotW = width - pad.left - pad.right;
     const step = plotW / Math.max(data.length - 1, 1);
 
-    let svg = this.#gridAndAxes(width, height, ticks, labels, pad, dims);
+    // REQ-R-003 (line/area): 3:2 stays dense (full width-derived stride);
+    // 1:1/2:3 thin the Y-gridlines ("gridlines thinned"). AREA specifically
+    // at 2:3 switches to vertical-only gridlines ("tall... gridlines
+    // vertical-only" — LINE's own 2:3 cell keeps thinned horizontal rules,
+    // this is deliberately an area-only delta since #renderArea shares this
+    // method with `this.type` still reading 'area'). X-ticks: 1:1 goes
+    // every-Nth ("fewer x-axis ticks (every Nth)"), 2:3 goes sparse
+    // (start/end + one mid, "emphasis on trend silhouette over tick
+    // density") — two DISTINCT treatments, not one mode reused for both.
+    const isArea = this.type === 'area';
+    const ratio = dims.ratioResolved;
+    let svg = this.#gridAndAxes(width, height, ticks, labels, pad, dims, {
+      thinGrid: ratio !== '3:2',
+      vertical: isArea && ratio === '2:3',
+      xTickMode: ratio === '2:3' ? 'sparse' : ratio === '1:1' ? 'everyNth' : undefined,
+      // CodeRabbit #1658 finding — a line/area plot has no category BAND,
+      // just N-1 gaps between N continuous points (`step` below, matching
+      // this same `plotW / (n-1)` formula); every gridline/label this
+      // method draws must land at that exact X, not a band center.
+      pointAligned: true,
+    });
 
     const points = vals.map((v, i) => {
       const px = pad.left + step * i;
-      const py = pad.top + plotH - (maxVal ? (v / maxVal) * plotH : 0);
+      const rawY = pad.top + plotH - ((maxVal - minVal) ? ((v - minVal) / (maxVal - minVal)) * plotH : 0);
+      const py = this.#clampCoord(rawY, pad.top, pad.top + plotH);
       return { x: px, y: py, v, label: labels[i] };
     });
 
@@ -1212,7 +1534,8 @@ export class UIChart extends UIElement {
 
     if (showAverage) {
       const avg = vals.reduce((a, b) => a + b, 0) / vals.length;
-      const ay = pad.top + plotH - (maxVal ? (avg / maxVal) * plotH : 0);
+      const rawAy = pad.top + plotH - ((maxVal - minVal) ? ((avg - minVal) / (maxVal - minVal)) * plotH : 0);
+      const ay = this.#clampCoord(rawAy, pad.top, pad.top + plotH);
       svg += `<line data-avg x1="${pad.left}" y1="${ay}" x2="${width - pad.right}" y2="${ay}"/>`;
       svg += `<text data-avg-label x="${width - pad.right + 2}" y="${ay + 3}" text-anchor="start" font-size="${dims.valueSize}">${this.#fmtValue(avg)}</text>`;
       /* Wider invisible hit target so the thin dashed line is hoverable */
@@ -1234,10 +1557,64 @@ export class UIChart extends UIElement {
     // Responsive viewBox so pie respects chart-ui's max-height and
     // doesn't push the legend past the container bounds.
     const dims = this.#dims();
-    const { width, height } = dims;
-    const cx = width / 2;
-    const cy = height / 2;
-    const r = Math.max(30, Math.min(width, height) * 0.42);
+    const { width, height, fontSize, valueSize } = dims;
+    const ratio = dims.ratioResolved;
+    // REQ-R-003 (pie, 1:1): "legend as a ring of labels around the pie" —
+    // the ring needs real radial room OUTSIDE the pie's own circumference,
+    // so the pie itself shrinks a bit (mirrors #renderRadar's own
+    // labelPad-then-shrink technique for its external spoke labels) rather
+    // than the ring overflowing the viewBox. 3:2/2:3 keep the original
+    // radius unchanged — no ring at those ratios.
+    //
+    // CodeRabbit #1658 finding (verified real, not a false positive): a
+    // flat 4px margin only reserves room for the label's ANCHOR point, not
+    // its rendered extent — a near-top/bottom label's glyph height clips
+    // the viewBox edge, and a near-left/right label (text-anchor start/
+    // end) has its FULL RENDERED WIDTH growing outward from the anchor,
+    // straight past the box edge, in any normally-sized square container,
+    // not just a pathological zero-margin one. Fixed by reserving a real
+    // width/height gutter.
+    //
+    // Wave A review carry-forward (2026-08-18): this comment used to claim
+    // the gutter was "sized from the actual longest label string in THIS
+    // dataset" — it wasn't. `catBudgetCeiling` below is a pure
+    // WIDTH-derived safety ceiling (solved from `width`/`minR` alone, never
+    // reading `labels`), so every dataset got the same worst-case
+    // gutter/pie-shrink regardless of how short its real labels were —
+    // correct (overflow was still mathematically excluded) but needlessly
+    // conservative. Fixed for real this wave: `catBudget` now also
+    // measures the dataset's OWN longest label and takes whichever is
+    // smaller — a short-label dataset gets a bigger pie (a tighter gutter
+    // than the ceiling alone would allow); a long-label one still clamps
+    // at the same safe ceiling as before.
+    const ringGap = fontSize;
+    const pctSuffixLen = 8; // " (100.0%)" — worst-case suffix, generous
+    const minR = 20;
+    const fitHGutter = (catBudget) => (catBudget + pctSuffixLen) * valueSize * 0.62 + ringGap + 4;
+    const vGutter = valueSize * 1.2 + ringGap + 4;
+    // Safety ceiling: the largest category-label budget that still leaves
+    // >= minR of pie radius on the width axis (the vertical gutter is
+    // independent of label text length, so it never needs solving) — a
+    // WIDTH-derived cap, not yet dataset-aware.
+    const maxHGutterAtMinR = Math.max(0, width / 2 - minR);
+    const catBudgetCeiling = Math.floor(
+      (maxHGutterAtMinR - ringGap - 4) / (valueSize * 0.62)
+    ) - pctSuffixLen;
+    // The dataset's own longest label — the measurement the comment above
+    // used to claim but never actually performed.
+    const longestLabelLen = labels.reduce((m, l) => Math.max(m, String(l).length), 1);
+    const catBudget = Math.max(4, Math.min(14, catBudgetCeiling, longestLabelLen));
+    const hGutter = fitHGutter(catBudget);
+    const r = ratio === '1:1'
+      ? Math.max(minR, Math.min(width / 2 - hGutter, height / 2 - vGutter))
+      : Math.max(30, Math.min(width, height) * 0.42);
+    // REQ-R-003 (pie): 3:2 "slices left" — shift the pie toward the left
+    // third, reserving right-side room; 2:3 "slices top" — shift up,
+    // reserving room below; 1:1 stays centered — its own delta is the ring
+    // of labels, not a center shift.
+    const cx = ratio === '3:2' ? Math.max(r + 8, width * 0.32) : width / 2;
+    const cy = ratio === '2:3' ? Math.min(height / 2, r + fontSize * 1.5) : height / 2;
+    const ringLabels = ratio === '1:1';
 
     let svg = '';
     let angle = -Math.PI / 2;
@@ -1256,6 +1633,24 @@ export class UIChart extends UIElement {
       } else {
         svg += `<path${attrs} d="${arcPath(cx, cy, r, angle, end)}"/>`;
       }
+
+      if (ringLabels) {
+        // REQ-R-003 (pie, 1:1) — one label per slice, positioned OUTSIDE
+        // the ring at its mid-angle, anchored away from the circle so the
+        // text grows outward rather than crowding the arc (same anchor
+        // convention #renderRadar uses for its own external labels).
+        const mid = angle + slice / 2;
+        const lx = polarX(cx, r + ringGap, mid);
+        const ly = polarY(cy, r + ringGap, mid);
+        const cosMid = Math.cos(mid);
+        const anchor = Math.abs(cosMid) < 0.15 ? 'middle' : cosMid > 0 ? 'start' : 'end';
+        // Truncate to the budget the radius fit above was solved against —
+        // keeps the rendered text within the reserved hGutter regardless
+        // of how long the real category name is.
+        const ringText = `${esc(truncateLabel(labels[i], catBudget))} (${pct}%)`;
+        svg += `<text data-ring-label x="${lx}" y="${ly}" text-anchor="${anchor}" dominant-baseline="central" font-size="${valueSize}">${ringText}</text>`;
+      }
+
       angle = end;
     }
 
@@ -1279,11 +1674,16 @@ export class UIChart extends UIElement {
     const labels = data.map(d => d[this.x] ?? '');
 
     const dims = this.#dims();
-    const { width, height } = dims;
-    const cx = width / 2;
-    const cy = height / 2;
-    const outer = Math.max(30, Math.min(width, height) * 0.42);
+    const { width, height, fontSize } = dims;
+    const ratio = dims.ratioResolved;
+    // REQ-R-003 (donut): 1:1 "Donut centered and MAXIMIZED" — a square has
+    // no side legend competing for radius, so the ring grows; 3:2 "left" /
+    // 2:3 "top" mirror pie's own shift for the same reason (room reserved
+    // for the center-stat + legend that follows in DOM order).
+    const outer = Math.max(30, Math.min(width, height) * (ratio === '1:1' ? 0.46 : 0.42));
     const inner = outer * 0.72;
+    const cx = ratio === '3:2' ? Math.max(outer + 8, width * 0.32) : width / 2;
+    const cy = ratio === '2:3' ? Math.min(height / 2, outer + fontSize * 1.5) : height / 2;
 
     let svg = '';
     let angle = -Math.PI / 2;
@@ -1336,12 +1736,33 @@ export class UIChart extends UIElement {
     // font-size and stroke widths at their intended visual scale).
     const dims = this.#dims();
     const { width, height, fontSize } = dims;
+    const ratio = dims.ratioResolved;
+
+    // REQ-R-003 (radar) — three deliberately distinct treatments (no
+    // side/below legend widget is invented here: radar's data model is
+    // ONE polygon over categorical axes, not per-category series, so
+    // there's no discrete legend content to show beyond the axis labels
+    // already naming every spoke — same scope note as Wave A's own
+    // choice not to build literal side/below legend REPOSITIONING for
+    // bar/line/pie/donut despite the matrix naming "legend right/below"
+    // for those rows too; flagged in Findings):
+    //   3:2 — "axis labels external": generous labelPad/labelGap, labels
+    //         float clearly outside the polygon.
+    //   1:1 — "radar fills the square, axis labels on the spokes": a much
+    //         smaller pad/gap so the polygon maximizes into the square and
+    //         labels sit tight against each spoke's own line rather than
+    //         floating away from it.
+    //   2:3 — "radar fills top 60%, axis labels abbreviated": the radar's
+    //         own vertical extent is capped to the top 60% of the box
+    //         (leaving the bottom for whatever a page composes below it —
+    //         e.g. a stat readout), and axis label TEXT truncates.
+    const isSquareFill = ratio === '1:1';
+    const isTopFill = ratio === '2:3';
+    const labelPad = isSquareFill ? fontSize * 1.8 : fontSize * 3.5;
+    const fillH = isTopFill ? height * 0.6 : height;
     const cx = width / 2;
-    const cy = height / 2;
-    // Leave label breathing room proportional to font size so labels
-    // never clip at wide sizes or crowd the polygon at small sizes.
-    const labelPad = fontSize * 3.5;
-    const r = Math.max(40, Math.min(width, height) / 2 - labelPad);
+    const cy = isTopFill ? fillH / 2 : height / 2;
+    const r = Math.max(40, Math.min(width, fillH) / 2 - labelPad);
 
     let svg = '';
     const angleStep = (Math.PI * 2) / n;
@@ -1389,14 +1810,20 @@ export class UIChart extends UIElement {
       svg += `<circle data-hit${tip({ label: labels[i], value: vals[i] })} cx="${px}" cy="${py}" r="${hitR}" fill="transparent"/>`;
     }
 
-    /* Labels */
-    const labelGap = fontSize * 1.3;
+    /* Labels — REQ-R-003 (radar, 1:1): "axis labels on the spokes" reads
+       as tight to the spoke line rather than floating in open space, so
+       1:1's own gap shrinks well below 3:2/2:3's external placement. */
+    const labelGap = isSquareFill ? fontSize * 0.6 : fontSize * 1.3;
     for (let i = 0; i < n; i++) {
       const a = -Math.PI / 2 + angleStep * i;
       const lx = cx + (r + labelGap) * Math.cos(a);
       const ly = cy + (r + labelGap) * Math.sin(a);
       const anchor = Math.abs(Math.cos(a)) < 0.1 ? 'middle' : Math.cos(a) > 0 ? 'start' : 'end';
-      svg += `<text data-x-label x="${lx}" y="${ly}" text-anchor="${anchor}" dominant-baseline="central" font-size="${fontSize}">${esc(labels[i])}</text>`;
+      // REQ-R-003 (radar, 2:3): "axis labels abbreviated" — the top-60%
+      // fill leaves less lateral room per spoke than the full-height 3:2/
+      // 1:1 treatments, so labels truncate the same way bar@1:1 does.
+      const text = esc(isTopFill ? truncateLabel(labels[i], 5) : labels[i]);
+      svg += `<text data-x-label x="${lx}" y="${ly}" text-anchor="${anchor}" dominant-baseline="central" font-size="${fontSize}">${text}</text>`;
     }
 
     return { svg, viewBox: `0 0 ${width} ${height}` };
@@ -1404,6 +1831,16 @@ export class UIChart extends UIElement {
 
   /* ── Sparkline ────────────────────────────────────────────────── */
 
+  /* REQ-R-003 (sparkline) — the ONE documented no-delta exception: "Same
+     stroke; documented exception carries forward" at all three ratios.
+     Deliberate, not an oversight — sparkline is intrinsically ratio-
+     agnostic (no axis, no legend, full-width single stroke); REQ-P-004's
+     "at least one delta" is satisfied by the HOST stat-tile's own layout
+     change around it, not by this renderer. Confirmed by this method never
+     reading `this.ratio` / `dims.ratioResolved` at all — it sizes purely
+     from `clientWidth`/`clientHeight`, so the same data renders the same
+     stroke shape regardless of which ratio bucket the container resolves
+     to (chart.test.js asserts this explicitly). */
   #renderSparkline() {
     const data = this.#data;
     const yKey = this.#yKeys()[0] || this.y;
@@ -1472,22 +1909,38 @@ export class UIChart extends UIElement {
     const yKey = this.#yKeys()[0] || this.y;
     const vals = data.map(v => +(v[yKey] ?? 0));
     const labels = data.map(v => v[this.x] ?? '');
-    const ticks = niceScale(0, Math.max(...vals), 5);
+    const ratio = dims.ratioResolved;
+    // REQ-R-003 (scatter, 2:3): "y-axis emphasized (more y-ticks than x)"
+    // — a deliberately DENSER Y scale than the family default (5 ticks),
+    // distinct from the X-tick stride (which #gridAndAxes' own width-fit
+    // stride already thins as plotW narrows — no extra opt needed there).
+    const tickCount = ratio === '2:3' ? 8 : 5;
+    const ticks = niceScale(...this.#yBounds(vals), tickCount);
     const maxVal = ticks[ticks.length - 1];
+    const minVal = ticks[0];
 
     const { width, height, pad } = dims;
     const plotH = height - pad.top - pad.bottom;
     const plotW = width - pad.left - pad.right;
     const step = plotW / Math.max(data.length - 1, 1);
 
-    let svg = this.#gridAndAxes(width, height, ticks, labels, pad, dims);
+    // REQ-R-003 (scatter, 1:1): "axis labels abbreviated" — same
+    // truncation treatment as bar@1:1's own square-container cell.
+    let svg = this.#gridAndAxes(width, height, ticks, labels, pad, dims, {
+      abbreviateLabels: ratio === '1:1',
+    });
 
-    const dotR = dims.sizeClass === 'sm' ? 2.5 : 4;
+    // REQ-R-003 (scatter, 1:1): "point size scales down slightly for
+    // density" — a square container packs the same category count into
+    // less width than 3:2, so points shrink a touch to stay legible.
+    const baseDotR = dims.sizeClass === 'sm' ? 2.5 : 4;
+    const dotR = ratio === '1:1' ? baseDotR * 0.85 : baseDotR;
     const hitR = Math.max(dotR * 2, 10);
 
     for (let i = 0; i < vals.length; i++) {
       const px = pad.left + step * i;
-      const py = pad.top + plotH - (maxVal ? (vals[i] / maxVal) * plotH : 0);
+      const rawY = pad.top + plotH - ((maxVal - minVal) ? ((vals[i] - minVal) / (maxVal - minVal)) * plotH : 0);
+      const py = this.#clampCoord(rawY, pad.top, pad.top + plotH);
       svg += `<circle data-dot data-scatter cx="${px}" cy="${py}" r="${dotR}"/>`;
       svg += `<circle data-hit${tip({ label: labels[i], value: vals[i] })} cx="${px}" cy="${py}" r="${hitR}" fill="transparent"/>`;
     }
@@ -1510,7 +1963,8 @@ export class UIChart extends UIElement {
     const maxVal = Math.max(...vals) || 1;
 
     const dims = this.#dims();
-    const { width, height } = dims;
+    const { width, height, fontSize, valueSize } = dims;
+    const ratio = dims.ratioResolved;
     const cx = width / 2;
     const cy = height / 2;
     const outerR = Math.max(30, Math.min(width, height) * 0.45);
@@ -1519,13 +1973,32 @@ export class UIChart extends UIElement {
     const bandW = (outerR - innerR) / ringCount;
     const gap = Math.min(2, bandW * 0.15);
 
+    // REQ-R-003 (radial-bar) — each ring's fill starts at a rotated point
+    // (the pre-existing dasharray-rotation mechanism); WHERE that start
+    // point sits per ring is this row's own per-ratio delta:
+    //   3:2 "bars radiate right-biased" — every ring starts its fill at
+    //       3 o'clock (angle 0) and sweeps clockwise, biasing the filled
+    //       arcs toward the right half of the circle.
+    //   2:3 "bars radiate top-biased" — every ring starts at 12 o'clock
+    //       (angle -π/2, the pre-Wave-B default), biasing toward the top.
+    //   1:1 "full radial fan" — rather than one shared start point, EACH
+    //       ring gets its OWN start angle, evenly staggered around the
+    //       full circle (a pinwheel/fan spread) — mechanically distinct
+    //       from the single shared bias the other two ratios use, not
+    //       just a relabeling of the same geometry.
+    const isFan = ratio === '1:1';
+    const uniformBiasAngle = ratio === '3:2' ? 0 : -Math.PI / 2;
+    const ringStartAngle = (i) => isFan
+      ? -Math.PI / 2 + (Math.PI * 2 * i) / ringCount
+      : uniformBiasAngle;
+
     let svg = '';
 
     /* Backing tracks + filled arcs per datum, from inner to outer.
        Uses the stroke-dasharray technique: each ring is a single <circle>,
-       rotated so the dash starts at 12 o'clock, with dasharray sized to
-       (filled, remainder). Avoids the "full circle" vs "arc path" branch
-       that produced rendering artifacts at 100% fills. */
+       rotated so the dash starts at its own `ringStartAngle`, with
+       dasharray sized to (filled, remainder). Avoids the "full circle" vs
+       "arc path" branch that produced rendering artifacts at 100% fills. */
     for (let i = 0; i < vals.length; i++) {
       const r0 = innerR + bandW * i + gap / 2;
       const r1 = innerR + bandW * (i + 1) - gap / 2;
@@ -1533,6 +2006,13 @@ export class UIChart extends UIElement {
       const thickness = r1 - r0;
       const circumference = 2 * Math.PI * mid;
       const filled = Math.max(0, Math.min(1, vals[i] / maxVal)) * circumference;
+      const startAngle = ringStartAngle(i);
+      // A circle's own stroke-dasharray trace starts at local angle 0 (3
+      // o'clock); rotate() by this many degrees moves that start point to
+      // `startAngle` in the same cos/sin convention `polarX`/`polarY` use
+      // elsewhere in this file (rotate(-90) ⇒ start at 12 o'clock, the
+      // pre-Wave-B default — verified against the untouched 2:3 case below).
+      const rotateDeg = (startAngle * 180) / Math.PI;
 
       /* Backing ring — full circle, faint stroke */
       svg += `<circle data-radial-track cx="${cx}" cy="${cy}" r="${mid}" fill="none" stroke-width="${thickness}"/>`;
@@ -1543,17 +2023,35 @@ export class UIChart extends UIElement {
       const tipAttrs = tip({ label: labels[i], value: vals[i], pct });
 
       /* Filled arc — stroke-dasharray splits the circumference into
-         (drawn, gap). Rotated -90° around the center so the dash begins
-         at 12 o'clock and sweeps clockwise. stroke-linecap="butt" for
-         full rings (so the ends don't overlap into a wedge artifact);
-         "round" for partial arcs so ends read as bar caps. */
+         (drawn, gap). Rotated around the center so the dash begins at
+         this ring's own start angle and sweeps clockwise.
+         stroke-linecap="butt" for full rings (so the ends don't overlap
+         into a wedge artifact); "round" for partial arcs so ends read as
+         bar caps. */
       const isFull = Math.abs(filled - circumference) < 0.5;
       const linecap = isFull ? 'butt' : 'round';
       const dashArray = isFull
         ? `${circumference} 0`
         : `${filled} ${circumference - filled}`;
 
-      svg += `<circle data-slice="${i % 10}"${tipAttrs} data-radial-bar cx="${cx}" cy="${cy}" r="${mid}" fill="none" stroke-width="${thickness}" stroke-linecap="${linecap}" stroke-dasharray="${dashArray}" transform="rotate(-90 ${cx} ${cy})"/>`;
+      svg += `<circle data-slice="${i % 10}"${tipAttrs} data-radial-bar cx="${cx}" cy="${cy}" r="${mid}" fill="none" stroke-width="${thickness}" stroke-linecap="${linecap}" stroke-dasharray="${dashArray}" transform="rotate(${rotateDeg} ${cx} ${cy})"/>`;
+    }
+
+    // REQ-R-003 (radial-bar, 1:1) — "legend as ring": one label per ring,
+    // positioned outside outerR at that ring's own start angle — same
+    // ring-of-labels mechanism #renderPie's own 1:1 cell ships, reused
+    // rather than re-invented. The ordinary below-chart legend is
+    // suppressed at 1:1 only (chart.css) since the ring now serves as it.
+    if (isFan) {
+      const ringLabelGap = fontSize;
+      for (let i = 0; i < vals.length; i++) {
+        const a = ringStartAngle(i);
+        const lx = polarX(cx, outerR + ringLabelGap, a);
+        const ly = polarY(cy, outerR + ringLabelGap, a);
+        const cosA = Math.cos(a);
+        const anchor = Math.abs(cosA) < 0.15 ? 'middle' : cosA > 0 ? 'start' : 'end';
+        svg += `<text data-ring-label x="${lx}" y="${ly}" text-anchor="${anchor}" dominant-baseline="central" font-size="${valueSize}">${esc(labels[i])}</text>`;
+      }
     }
 
     this.#legendData = data.map((d, i) => ({
@@ -1588,14 +2086,29 @@ export class UIChart extends UIElement {
     const pct = Math.max(0, Math.min(1, primary / maxVal));
 
     const dims = this.#dims();
-    const { width, height } = dims;
-
-    /* Place the arc's visual center so the half-circle uses the full
-       width below the value label. cy sits lower so the half-arc has
-       room for the big center label above it. */
-    const cx = width / 2;
-    const cy = height * 0.68;
-    const outerR = Math.max(40, Math.min(width * 0.45, height * 0.6));
+    const { width, height, fontSize } = dims;
+    const ratio = dims.ratioResolved;
+    const isWide = ratio === '3:2';
+    const isTall = ratio === '2:3';
+
+    /* REQ-R-003 (gauge) — three deliberately distinct placements (no
+       side/below legend widget invented here either — same single-value
+       rationale as radar/scatter above, since a gauge with one primary
+       reading has no discrete per-category set to legend beyond the
+       readout itself):
+         3:2 "gauge left, readout right" — cx shifts left (mirrors pie/
+             donut's own 3:2 shift), the readout moves OUTSIDE to the
+             right of the arc rather than sitting centered over it.
+         1:1 "gauge centered and maximized, readout inside the arc" — the
+             biggest outerR of the three, readout stays centered in the
+             arc's own hollow (the pre-Wave-B default position).
+         2:3 "gauge top, readout below" — cy shifts up (mirrors pie/
+             donut's own 2:3 shift), the readout moves BELOW the arc's
+             flat baseline instead of overlapping it. */
+    const outerR = Math.max(40, Math.min(
+      width * (ratio === '1:1' ? 0.48 : 0.45),
+      height * (isTall ? 0.46 : 0.6),
+    ));
     const innerR = outerR * 0.72;
     /* End-cap radius — fully-rounded pill ends matching the
        progress-ui convention (--progress-radius: var(--a-radius-full)).
@@ -1604,6 +2117,9 @@ export class UIChart extends UIElement {
        ends of the arc. */
     const capR = (outerR - innerR) / 2;
 
+    const cx = isWide ? Math.max(outerR + 8, width * 0.34) : width / 2;
+    const cy = isTall ? Math.min(height * 0.5, outerR + fontSize * 1.3) : height * 0.68;
+
     let svg = '';
 
     /* Backing arc — full 180° upper semicircle, from 9 o'clock (angle π)
@@ -1620,13 +2136,27 @@ export class UIChart extends UIElement {
       svg += `<path data-slice="0"${tipAttrs} data-gauge-fill d="${donutArcPath(cx, cy, outerR, innerR, Math.PI, fillEnd, capR)}"/>`;
     }
 
-    /* Center value label */
+    /* Readout label — position/anchor keyed off the ratio-specific layout
+       decided above; font sizing stays keyed off outerR unconditionally. */
     const totalFs = Math.max(18, Math.round(outerR * 0.42));
     const labelFs = Math.max(10, Math.round(outerR * 0.2));
-    const labelY = cy - outerR * 0.15;
-    svg += `<text data-gauge-value x="${cx}" y="${labelY}" text-anchor="middle" dominant-baseline="central" font-size="${totalFs}">${this.#fmtValue(primary)}</text>`;
+    let labelX, labelY, anchor;
+    if (isWide) {
+      labelX = cx + outerR + fontSize * 1.2;
+      labelY = cy - outerR * 0.15;
+      anchor = 'start';
+    } else if (isTall) {
+      labelX = cx;
+      labelY = cy + totalFs * 0.7;
+      anchor = 'middle';
+    } else {
+      labelX = cx;
+      labelY = cy - outerR * 0.15;
+      anchor = 'middle';
+    }
+    svg += `<text data-gauge-value x="${labelX}" y="${labelY}" text-anchor="${anchor}" dominant-baseline="central" font-size="${totalFs}">${this.#fmtValue(primary)}</text>`;
     if (maxVal !== primary) {
-      svg += `<text data-gauge-max x="${cx}" y="${labelY + totalFs * 0.8}" text-anchor="middle" dominant-baseline="central" font-size="${labelFs}">of ${this.#fmtValue(maxVal)}</text>`;
+      svg += `<text data-gauge-max x="${labelX}" y="${labelY + totalFs * 0.8}" text-anchor="${anchor}" dominant-baseline="central" font-size="${labelFs}">of ${this.#fmtValue(maxVal)}</text>`;
     }
 
     return { svg, viewBox: `0 0 ${width} ${height}` };
@@ -1655,16 +2185,79 @@ export class UIChart extends UIElement {
     const dims = this.#dims();
     const { width, height } = dims;
     const fs = dims.fontSize;
-    const padX = Math.max(width * 0.18, 80);      /* room for stage labels */
+    const ratio = dims.ratioResolved;
+
+    this.#legendData = data.map((d, i) => ({
+      label: labels[i], value: vals[i], pct: ((vals[i] / maxVal) * 100).toFixed(1), slot: i % 10,
+    }));
+
+    let svg = '';
+
+    /* REQ-R-003 (funnel, 3:2) — "Wide stepped bars left-to-right": the
+       vertical funnel's own trapezoid geometry rotated 90° — stage
+       PROGRESSION reads along X instead of Y, and each value maps to a
+       column's half-HEIGHT instead of a row's half-WIDTH. A wide box has
+       width to spare and little height, so this orientation spends the
+       abundant axis on the stage sequence and the scarce one on the value
+       taper — the opposite trade the tall 2:3 cell below makes. */
+    if (ratio === '3:2') {
+      const padY = Math.max(height * 0.16, fs * 2.2); /* room for label/value/drop rows */
+      const padX = fs * 0.8;
+      const plotW = width - padX * 2;
+      const plotH = height - padY * 2;
+      const stageW = plotW / n;
+      const gap = Math.max(2, stageW * 0.08);
+      const cy = padY + plotH / 2;
+
+      for (let i = 0; i < n; i++) {
+        const vLeft = vals[i];
+        const vRight = (i < n - 1) ? vals[i + 1] : vals[i];
+        const halfLeft = (vLeft / maxVal) * (plotH / 2);
+        const halfRight = (vRight / maxVal) * (plotH / 2);
+        const x0 = padX + stageW * i + gap / 2;
+        const x1 = padX + stageW * (i + 1) - gap / 2;
+        const midX = (x0 + x1) / 2;
+
+        const pct = ((vLeft / maxVal) * 100).toFixed(1);
+        const tipAttrs = tip({ label: labels[i], value: vLeft, pct });
+
+        /* Trapezoid path: top-left, top-right, bottom-right, bottom-left,
+           tapering vertically left-to-right instead of top-to-bottom. */
+        const d = `M ${x0} ${cy - halfLeft} L ${x1} ${cy - halfRight} L ${x1} ${cy + halfRight} L ${x0} ${cy + halfLeft} Z`;
+        svg += `<path data-slice="${i % 10}" data-funnel-stage${tipAttrs} d="${d}"/>`;
+
+        svg += `<text data-funnel-label x="${midX}" y="${padY - fs * 0.6}" text-anchor="middle" dominant-baseline="alphabetic" font-size="${fs}">${esc(labels[i])}</text>`;
+        svg += `<text data-funnel-value x="${midX}" y="${height - padY + fs * 1.3}" text-anchor="middle" dominant-baseline="hanging" font-size="${fs}">${this.#fmtValue(vLeft)}</text>`;
+        if (i > 0) {
+          const dropPct = ((vals[i] / vals[0]) * 100).toFixed(0);
+          svg += `<text data-funnel-drop x="${midX}" y="${height - padY + fs * 2.5}" text-anchor="middle" dominant-baseline="hanging" font-size="${fs * 0.85}">${dropPct}%</text>`;
+        }
+      }
+
+      return { svg, viewBox: `0 0 ${width} ${height}` };
+    }
+
+    /* 1:1 and 2:3 keep the vertical (top-to-bottom) orientation, but move
+       label chrome to free width for the funnel body — the scarce axis at
+       both these buckets, per REQ-R-004:
+         1:1 — "stage labels inline": label sits INSIDE the trapezoid,
+               freeing the whole left gutter (value + pct stay external
+               right, unchanged from the pre-2.0 default).
+         2:3 — "stage labels + % drop external right": both stacked in the
+               RIGHT gutter instead of split left/right, freeing the whole
+               left edge for the widest possible body in a narrow frame —
+               funnel's most natural ratio per the SPEC. */
+    const isInline = ratio === '1:1';
+    const isTallExternalRight = ratio === '2:3';
+    const padXLeft = (isInline || isTallExternalRight) ? fs * 0.8 : Math.max(width * 0.18, 80);
+    const padXRight = isTallExternalRight ? Math.max(width * 0.30, fs * 6) : Math.max(width * 0.18, 80);
     const padY = fs * 0.8;
-    const plotW = width - padX * 2;
+    const plotW = width - padXLeft - padXRight;
     const plotH = height - padY * 2;
     const stageH = plotH / n;
     const gap = Math.max(2, stageH * 0.08);
+    const cx = padXLeft + plotW / 2;
 
-    const cx = width / 2;
-
-    let svg = '';
     for (let i = 0; i < n; i++) {
       const vTop = vals[i];
       const vBot = (i < n - 1) ? vals[i + 1] : vals[i];
@@ -1672,42 +2265,82 @@ export class UIChart extends UIElement {
       const halfBot = (vBot / maxVal) * (plotW / 2);
       const y0 = padY + stageH * i + gap / 2;
       const y1 = padY + stageH * (i + 1) - gap / 2;
+      const midY = y0 + stageH / 2 - gap / 2;
 
       const pct = ((vTop / maxVal) * 100).toFixed(1);
       const tipAttrs = tip({ label: labels[i], value: vTop, pct });
 
-      /* Trapezoid path: top-left, top-right, bottom-right, bottom-left. */
       const d = `M ${cx - halfTop} ${y0} L ${cx + halfTop} ${y0} L ${cx + halfBot} ${y1} L ${cx - halfBot} ${y1} Z`;
       svg += `<path data-slice="${i % 10}" data-funnel-stage${tipAttrs} d="${d}"/>`;
 
-      /* Stage label — left-aligned outside the funnel */
-      svg += `<text data-funnel-label x="${padX - 8}" y="${y0 + stageH / 2}" text-anchor="end" dominant-baseline="central" font-size="${fs}">${esc(labels[i])}</text>`;
+      if (isInline) {
+        // Real-browser-probe finding (this build, not caught by Vitest —
+        // no layout/paint there): an unconditional inline label overflows
+        // a narrow LATER stage's own trapezoid width, spilling the
+        // overflow portion onto the plain page background where the
+        // on-color fill token reads as invisible (near-white-on-white).
+        // Truncate per-stage to that stage's own average width — the same
+        // char-budget-from-available-space technique #renderPie's own
+        // ring-label gutter and #renderTreemap's tile labels already use
+        // — and skip the label entirely once even a 2-char abbreviation
+        // wouldn't fit (an absent label reads better than an illegible,
+        // spilling one).
+        const avgHalfWidth = (halfTop + halfBot) / 2;
+        const stageBudget = Math.floor((avgHalfWidth * 2 - fs) / (fs * 0.6));
+        if (stageBudget >= 2) {
+          svg += `<text data-funnel-label data-funnel-label-inline x="${cx}" y="${midY}" text-anchor="middle" dominant-baseline="central" font-size="${fs}">${esc(truncateLabel(labels[i], stageBudget))}</text>`;
+        }
+      } else {
+        svg += `<text data-funnel-label x="${padXLeft - 8}" y="${midY}" text-anchor="end" dominant-baseline="central" font-size="${fs}">${esc(labels[i])}</text>`;
+      }
 
-      /* Value + pct — right-aligned outside the funnel */
-      svg += `<text data-funnel-value x="${width - padX + 8}" y="${y0 + stageH / 2}" text-anchor="start" dominant-baseline="central" font-size="${fs}">${this.#fmtValue(vTop)}</text>`;
-      if (i > 0) {
-        const dropPct = ((vals[i] / vals[0]) * 100).toFixed(0);
-        svg += `<text data-funnel-drop x="${width - padX + 8}" y="${y0 + stageH / 2 + fs * 1.1}" text-anchor="start" dominant-baseline="central" font-size="${fs * 0.85}">${dropPct}%</text>`;
+      if (isTallExternalRight) {
+        svg += `<text data-funnel-label data-funnel-label-right x="${width - padXRight + 8}" y="${midY - fs * 0.6}" text-anchor="start" dominant-baseline="central" font-size="${fs}">${esc(labels[i])}</text>`;
+        svg += `<text data-funnel-value x="${width - padXRight + 8}" y="${midY + fs * 0.6}" text-anchor="start" dominant-baseline="central" font-size="${fs}">${this.#fmtValue(vTop)}</text>`;
+        if (i > 0) {
+          const dropPct = ((vals[i] / vals[0]) * 100).toFixed(0);
+          svg += `<text data-funnel-drop x="${width - padXRight + 8}" y="${midY + fs * 1.7}" text-anchor="start" dominant-baseline="central" font-size="${fs * 0.85}">${dropPct}%</text>`;
+        }
+      } else {
+        svg += `<text data-funnel-value x="${width - padXRight + 8}" y="${midY}" text-anchor="start" dominant-baseline="central" font-size="${fs}">${this.#fmtValue(vTop)}</text>`;
+        if (i > 0) {
+          const dropPct = ((vals[i] / vals[0]) * 100).toFixed(0);
+          svg += `<text data-funnel-drop x="${width - padXRight + 8}" y="${midY + fs * 1.1}" text-anchor="start" dominant-baseline="central" font-size="${fs * 0.85}">${dropPct}%</text>`;
+        }
       }
     }
 
-    this.#legendData = data.map((d, i) => ({
-      label: labels[i], value: vals[i], pct: ((vals[i] / maxVal) * 100).toFixed(1), slot: i % 10,
-    }));
-
     return { svg, viewBox: `0 0 ${width} ${height}` };
   }
 
   /* ── Treemap (hierarchical rect tiling) ────────────────────────
-     Flat squarified treemap: each datum is a rect whose area is
-     proportional to its value. Not nested — Phase 5 ships flat
-     rectangles; a nested variant (children arrays) is a natural
-     future extension.
-
-     Uses the Bruls/Huijbregts/Van Wijk squarified algorithm adapted
-     for single-level data: sorts values desc, packs rows that hold
-     aspect ratios close to 1, alternating row direction based on
-     remaining container aspect. */
+     Flat grid tiling: each datum is a rect whose area is proportional
+     to its value. Not nested — Phase 5 ships flat rectangles; a nested
+     variant (children arrays) is a natural future extension.
+
+     REQ-R-003 (treemap) — "wide grid, more columns than rows" (3:2) /
+     "balanced grid, near-square cells" (1:1) / "tall grid, more rows
+     than columns" (2:3). This wave REPLACES the prior Bruls/Huijbregts/
+     Van Wijk squarified packer with a deliberate, ratio-keyed row-major
+     grid — a proposed amendment to the pre-Wave-C implementation, stated
+     here and in this build's Findings, not silent. Measured first: the
+     squarified packer's own row-membership decision is driven almost
+     entirely by the DATA's value distribution, not by the container's
+     aspect (a `gridBias`-scaled worst-ratio threshold was tried first and
+     empirically failed on the SPEC's own non-goal case — a container
+     shape alone, or a scaled variant of the same heuristic, does not
+     reliably deliver "more columns than rows" vs. "more rows than
+     columns"; several skewed/even/small-n datasets at the REAL width/
+     height pairs `#dims()` actually produces — constant width, only
+     height varies by ratio pin — inverted the intended topology). A
+     row-major grid keyed directly on COLUMN COUNT is the "hand-authored,
+     not a generic algorithm" reading REQ-P-004/this SPEC's own Non-goals
+     section asks for: `cols` is chosen from `n` and the ratio bucket
+     alone, so the topology is deterministic regardless of the dataset's
+     value spread; each row's HEIGHT is still weighted by its own value
+     sum (bigger-value rows get proportionally more height) and each
+     tile's WIDTH by its value share of its row, so area-proportionality
+     — the one property a treemap must never break — holds exactly. */
   #renderTreemap() {
     const data = this.#data;
     const yKey = this.#yKeys()[0] || this.y;
@@ -1719,71 +2352,35 @@ export class UIChart extends UIElement {
     const dims = this.#dims();
     const { width, height, fontSize } = dims;
     const total = vals.reduce((a, b) => a + b, 0) || 1;
+    const ratio = dims.ratioResolved;
 
-    /* Sort indices by value desc — squarified needs sorted input but
-       we keep original indices for color/label/hit mapping. */
+    /* Sort indices by value desc (largest tiles read first, top-left) —
+       keep original indices for color/label/hit mapping. */
     const order = Array.from({ length: n }, (_, i) => i).sort((a, b) => vals[b] - vals[a]);
 
-    const rects = [];  /* {i, x, y, w, h} in plot coords */
-
-    /* Scale areas so they fill the container. */
-    const area = width * height;
-    const scaled = order.map(i => (vals[i] / total) * area);
-
-    /* Squarified packer — iterative rows. */
-    let x = 0, y = 0, w = width, h = height;
-    let row = [];
-    let rowStart = 0;
-
-    const worst = (row, width) => {
-      if (row.length === 0) return Infinity;
-      const sum = row.reduce((a, b) => a + b, 0);
-      const max = Math.max(...row);
-      const min = Math.min(...row);
-      const wsq = width * width;
-      const ssq = sum * sum;
-      return Math.max((wsq * max) / ssq, ssq / (wsq * min));
-    };
+    const cols = ratio === '3:2'
+      ? Math.max(2, Math.ceil(Math.sqrt(n * 2)))
+      : ratio === '2:3'
+        ? Math.max(1, Math.floor(Math.sqrt(n / 2)))
+        : Math.max(1, Math.round(Math.sqrt(n)));
 
-    const layoutRow = (row, rowStart, x, y, w, h) => {
-      const sum = row.reduce((a, b) => a + b, 0);
-      const horizontal = w >= h;
-      const rowH = horizontal ? sum / w : h;
-      const rowW = horizontal ? w : sum / h;
-
-      let offset = 0;
-      for (let k = 0; k < row.length; k++) {
-        const frac = row[k] / sum;
-        const idx = order[rowStart + k];
-        if (horizontal) {
-          const segW = frac * w;
-          rects.push({ i: idx, x: x + offset, y, w: segW, h: rowH });
-          offset += segW;
-        } else {
-          const segH = frac * h;
-          rects.push({ i: idx, x, y: y + offset, w: rowW, h: segH });
-          offset += segH;
-        }
-      }
-      if (horizontal) return { x, y: y + rowH, w, h: h - rowH };
-      return { x: x + rowW, y, w: w - rowW, h };
-    };
+    const rows = [];
+    for (let i = 0; i < order.length; i += cols) rows.push(order.slice(i, i + cols));
+    const rowSums = rows.map(r => r.reduce((s, i) => s + vals[i], 0));
+    const rowSumTotal = rowSums.reduce((a, b) => a + b, 0) || 1;
 
-    let remaining = scaled.slice();
-    while (remaining.length > 0) {
-      row = [remaining[0]];
-      rowStart = scaled.length - remaining.length;
-      const shortSide = Math.min(w, h);
-      let i = 1;
-      while (i < remaining.length) {
-        const next = row.concat(remaining[i]);
-        if (worst(next, shortSide) > worst(row, shortSide)) break;
-        row = next;
-        i++;
+    const rects = [];  /* {i, x, y, w, h} in plot coords */
+    let y = 0;
+    for (let ri = 0; ri < rows.length; ri++) {
+      const rowH = (rowSums[ri] / rowSumTotal) * height;
+      const rowValTotal = rowSums[ri] || 1;
+      let x = 0;
+      for (const idx of rows[ri]) {
+        const w = (vals[idx] / rowValTotal) * width;
+        rects.push({ i: idx, x, y, w, h: rowH });
+        x += w;
       }
-      const newRect = layoutRow(row, rowStart, x, y, w, h);
-      x = newRect.x; y = newRect.y; w = newRect.w; h = newRect.h;
-      remaining = remaining.slice(row.length);
+      y += rowH;
     }
 
     /* Emit rects + labels. */
@@ -1804,13 +2401,19 @@ export class UIChart extends UIElement {
       const canShowAny = r.w > fontSize * 4;
       const tall  = canShowAny && r.h > fontSize * 2.5;
       const short = canShowAny && !tall && r.h > fontSize * 1.2;
+      // REQ-R-003 (treemap, 2:3) — "label truncation more aggressive": the
+      // `cols` choice above already narrows every tile's own width budget
+      // at this bucket (fewest columns of the three), so the char budget
+      // shrinks to match rather than relying on the generic overflow the
+      // tile-size gate above already guards against.
+      const labelChars = ratio === '2:3' ? 8 : 20;
 
       if (tall) {
-        svg += `<text data-treemap-label x="${labelX}" y="${r.y + fontSize + 4}" font-size="${fontSize}" dominant-baseline="hanging">${esc(labels[r.i])}</text>`;
+        svg += `<text data-treemap-label x="${labelX}" y="${r.y + fontSize + 4}" font-size="${fontSize}" dominant-baseline="hanging">${esc(truncateLabel(labels[r.i], labelChars))}</text>`;
         svg += `<text data-treemap-value x="${labelX}" y="${r.y + fontSize * 2 + 6}" font-size="${fontSize * 0.9}" dominant-baseline="hanging">${this.#fmtValue(vals[r.i])}</text>`;
       } else if (short) {
         const cy = r.y + r.h / 2;
-        svg += `<text data-treemap-label x="${labelX}" y="${cy}" font-size="${fontSize}" dominant-baseline="central">${esc(labels[r.i])}</text>`;
+        svg += `<text data-treemap-label x="${labelX}" y="${cy}" font-size="${fontSize}" dominant-baseline="central">${esc(truncateLabel(labels[r.i], labelChars))}</text>`;
       }
     }
 
@@ -1847,19 +2450,106 @@ export class UIChart extends UIElement {
 
     const dims = this.#dims();
     const { width, height, fontSize } = dims;
-    const nodeW = Math.max(8, width * 0.03);
-    const colPad = nodeW + fontSize * 5;
+    const ratio = dims.ratioResolved;
+    const sources = [...sourceSet.values()];
+    const targets = [...targetSet.values()];
+    const sourceTotal = sources.reduce((a, s) => a + s.flow, 0) || 1;
+    const targetTotal = targets.reduce((a, t) => a + t.flow, 0) || 1;
 
-    const sourceTotal = [...sourceSet.values()].reduce((a, s) => a + s.flow, 0) || 1;
-    const targetTotal = [...targetSet.values()].reduce((a, t) => a + t.flow, 0) || 1;
+    let svg = '';
 
-    const nodeGap = fontSize * 0.6;
+    /* REQ-R-003 (sankey, 2:3) — "Flow forced top-to-bottom, nodes stack
+       vertically" — the SPEC's own "hardest cell" and the only one of the
+       three that isn't a gutter/label tweak: sources become a horizontal
+       row along the TOP, targets a horizontal row along the BOTTOM, and
+       every link becomes a VERTICAL bezier band instead of a horizontal
+       one. Node "flow" now maps to a WIDTH instead of a HEIGHT, and labels
+       sit above the top row / below the bottom row instead of left/right
+       of a column — the same column↔row transpose #renderFunnel's own
+       3:2 cell performs, applied to the opposite type of node layout. */
+    if (ratio === '2:3') {
+      const nodeH = Math.max(8, height * 0.05);
+      const rowPad = nodeH + fontSize * 1.8;
+      // CodeRabbit (PR #1662) — a many-node dataset can make
+      // nodeGap * (count - 1) exceed width, driving sourceTotalW/
+      // targetTotalW negative: every <rect data-sankey-node> gets a
+      // negative width and the vertical link bands invert. Cap the
+      // total gap budget at half the available width (regardless of
+      // node count) so the remaining width for node bodies never
+      // collapses to zero or below.
+      const maxGapBudget = width * 0.5;
+      const nodeGap = Math.min(
+        fontSize * 0.8,
+        maxGapBudget / Math.max(1, Math.max(sources.length, targets.length) - 1),
+      );
+      const sourceTotalW = Math.max(1, width - nodeGap * Math.max(0, sources.length - 1));
+      const targetTotalW = Math.max(1, width - nodeGap * Math.max(0, targets.length - 1));
+
+      let x = 0;
+      for (const s of sources) {
+        const w = (s.flow / sourceTotal) * sourceTotalW;
+        s.x0 = x; s.x1 = x + w; s.cursor = x;
+        x += w + nodeGap;
+      }
+      x = 0;
+      for (const t of targets) {
+        const w = (t.flow / targetTotal) * targetTotalW;
+        t.x0 = x; t.x1 = x + w; t.cursor = x;
+        x += w + nodeGap;
+      }
 
-    /* Assign y0/y1 to each source node, stacked top-to-bottom. */
-    const sources = [...sourceSet.values()];
-    const targets = [...targetSet.values()];
-    const sourceTotalH = height - nodeGap * (sources.length - 1);
-    const targetTotalH = height - nodeGap * (targets.length - 1);
+      const nodeRx = Math.min(this.#resolveRadius(), nodeH / 2);
+
+      sources.forEach((s, i) => {
+        const tipAttrs = tip({ label: s.name, value: s.flow });
+        svg += `<rect data-sankey-node data-slice="${i % 10}"${tipAttrs} x="${s.x0}" y="${rowPad - nodeH}" width="${s.x1 - s.x0}" height="${nodeH}" rx="${nodeRx}"/>`;
+        svg += `<text data-sankey-label x="${(s.x0 + s.x1) / 2}" y="${rowPad - nodeH - 6}" text-anchor="middle" dominant-baseline="alphabetic" font-size="${fontSize}">${esc(truncateLabel(s.name, 10))}</text>`;
+      });
+      targets.forEach((t, i) => {
+        const tipAttrs = tip({ label: t.name, value: t.flow });
+        svg += `<rect data-sankey-node data-slice="${(sources.length + i) % 10}"${tipAttrs} x="${t.x0}" y="${height - rowPad}" width="${t.x1 - t.x0}" height="${nodeH}" rx="${nodeRx}"/>`;
+        svg += `<text data-sankey-label x="${(t.x0 + t.x1) / 2}" y="${height - rowPad + nodeH + fontSize + 2}" text-anchor="middle" dominant-baseline="alphabetic" font-size="${fontSize}">${esc(truncateLabel(t.name, 10))}</text>`;
+      });
+
+      for (const link of data) {
+        const s = sourceSet.get(link.source ?? link.from ?? '');
+        const t = targetSet.get(link.target ?? link.to ?? '');
+        if (!s || !t) continue;
+        const v = +(link.value ?? link.v ?? 0);
+        if (v <= 0) continue;
+
+        const sW = (v / sourceTotal) * sourceTotalW;
+        const tW = (v / targetTotal) * targetTotalW;
+        const sLeft = s.cursor; const sRight = sLeft + sW;
+        const tLeft = t.cursor; const tRight = tLeft + tW;
+        s.cursor += sW;
+        t.cursor += tW;
+
+        const y0 = rowPad;
+        const y1 = height - rowPad;
+        const my = (y0 + y1) / 2;
+        const tipAttrs = tip({ label: `${s.name} → ${t.name}`, value: v });
+
+        const path = `M ${sLeft} ${y0} C ${sLeft} ${my}, ${tLeft} ${my}, ${tLeft} ${y1} L ${tRight} ${y1} C ${tRight} ${my}, ${sRight} ${my}, ${sRight} ${y0} Z`;
+        svg += `<path data-sankey-link${tipAttrs} d="${path}"/>`;
+      }
+
+      return { svg, viewBox: `0 0 ${width} ${height}` };
+    }
+
+    /* 3:2 (baseline — "wide flow left-to-right, node labels external",
+       unchanged from the pre-2.0 default) and 1:1 ("flow compressed, node
+       labels abbreviated/on-hover") share the horizontal column layout;
+       1:1 shrinks the label gutter and truncates node names (full name
+       stays available via the node's own hover tooltip either way). */
+    const isCompressed = ratio === '1:1';
+    const nodeW = Math.max(8, width * 0.03);
+    const colPad = nodeW + fontSize * (isCompressed ? 2.2 : 5);
+    const labelChars = isCompressed ? 6 : 24;
+
+    const nodeGap = fontSize * 0.6;
+    const sourceTotalH = height - nodeGap * Math.max(0, sources.length - 1);
+    const targetTotalH = height - nodeGap * Math.max(0, targets.length - 1);
 
     let y = 0;
     for (const s of sources) {
@@ -1878,20 +2568,20 @@ export class UIChart extends UIElement {
       y += h + nodeGap;
     }
 
-    let svg = '';
-
     const nodeRx = Math.min(this.#resolveRadius(), nodeW / 2);
 
     /* Source nodes — left column */
     sources.forEach((s, i) => {
-      svg += `<rect data-sankey-node data-slice="${i % 10}" x="${colPad - nodeW}" y="${s.y0}" width="${nodeW}" height="${s.y1 - s.y0}" rx="${nodeRx}"/>`;
-      svg += `<text data-sankey-label x="${colPad - nodeW - 6}" y="${(s.y0 + s.y1) / 2}" text-anchor="end" dominant-baseline="central" font-size="${fontSize}">${esc(s.name)}</text>`;
+      const tipAttrs = tip({ label: s.name, value: s.flow });
+      svg += `<rect data-sankey-node data-slice="${i % 10}"${tipAttrs} x="${colPad - nodeW}" y="${s.y0}" width="${nodeW}" height="${s.y1 - s.y0}" rx="${nodeRx}"/>`;
+      svg += `<text data-sankey-label x="${colPad - nodeW - 6}" y="${(s.y0 + s.y1) / 2}" text-anchor="end" dominant-baseline="central" font-size="${fontSize}">${esc(truncateLabel(s.name, labelChars))}</text>`;
     });
 
     /* Target nodes — right column */
     targets.forEach((t, i) => {
-      svg += `<rect data-sankey-node data-slice="${(sources.length + i) % 10}" x="${width - colPad}" y="${t.y0}" width="${nodeW}" height="${t.y1 - t.y0}" rx="${nodeRx}"/>`;
-      svg += `<text data-sankey-label x="${width - colPad + nodeW + 6}" y="${(t.y0 + t.y1) / 2}" text-anchor="start" dominant-baseline="central" font-size="${fontSize}">${esc(t.name)}</text>`;
+      const tipAttrs = tip({ label: t.name, value: t.flow });
+      svg += `<rect data-sankey-node data-slice="${(sources.length + i) % 10}"${tipAttrs} x="${width - colPad}" y="${t.y0}" width="${nodeW}" height="${t.y1 - t.y0}" rx="${nodeRx}"/>`;
+      svg += `<text data-sankey-label x="${width - colPad + nodeW + 6}" y="${(t.y0 + t.y1) / 2}" text-anchor="start" dominant-baseline="central" font-size="${fontSize}">${esc(truncateLabel(t.name, labelChars))}</text>`;
     });
 
     /* Links — bezier bands */
@@ -1933,6 +2623,7 @@ export class UIChart extends UIElement {
   #renderComposed() {
     const dims = this.#dims();
     const data = this.#data;
+    const ratio = dims.ratioResolved;
     const keys = this.#yKeys();
     const barKey = keys[0] || 'bar';
     const lineKey = keys[1] || 'line';
@@ -1940,8 +2631,9 @@ export class UIChart extends UIElement {
     const barVals = data.map(d => +(d[barKey] ?? 0));
     const lineVals = data.map(d => +(d[lineKey] ?? 0));
     const allVals = [...barVals, ...lineVals];
-    const ticks = niceScale(0, Math.max(...allVals), 5);
+    const ticks = niceScale(...this.#yBounds(allVals), 5);
     const maxVal = ticks[ticks.length - 1];
+    const minVal = ticks[0];
 
     const { width, height, pad } = dims;
     const plotH = height - pad.top - pad.bottom;
@@ -1949,39 +2641,95 @@ export class UIChart extends UIElement {
     const barW = plotW / data.length;
     const barInner = barW * 0.6;
     const barGap = (barW - barInner) / 2;
-    const step = plotW / Math.max(data.length - 1, 1);
 
     let svg = this.#gridAndAxes(width, height, ticks, labels, pad, dims);
 
-    /* Bar series (slot 0) */
+    /* Bar series (slot 0) — "primary series only fully rendered" (2:3) is
+       this same unconditional render at every ratio; the primary axis
+       treatment never changes, only the SECONDARY series below does. */
     if (!this.#isSeriesHidden(barKey)) {
       for (let i = 0; i < data.length; i++) {
         const v = barVals[i];
-        const barH = maxVal ? (v / maxVal) * plotH : 0;
+        const rawH = (maxVal - minVal) ? ((v - minVal) / (maxVal - minVal)) * plotH : 0;
+        const barH = this.#clampSpan(rawH, plotH);
         const bx = pad.left + barW * i + barGap;
         const by = pad.top + plotH - barH;
         svg += `<path${this.#seriesFill(0, barKey)}${tip({ label: labels[i], value: v, series: barKey })} d="${topRoundedBarPath(bx, by, barInner, barH, this.#resolveRadius())}"/>`;
       }
     }
 
-    /* Line series (slot 1) — anchored at bar center X positions */
     if (!this.#isSeriesHidden(lineKey)) {
-      const points = lineVals.map((v, i) => ({
-        x: pad.left + barW * i + barW / 2,
-        y: pad.top + plotH - (maxVal ? (v / maxVal) * plotH : 0),
-        v, label: labels[i],
-      }));
-      const t = Math.max(0, Math.min(1, this.smooth));
-      svg += `<path data-line${this.#seriesStroke(1, lineKey)} d="${smoothPath(points, t)}"/>`;
-      for (const p of points) {
-        svg += `<circle data-dot${this.#seriesFill(1, lineKey)} cx="${p.x}" cy="${p.y}" r="3"/>`;
-        svg += `<circle data-hit${tip({ label: p.label, value: p.v, series: lineKey })} cx="${p.x}" cy="${p.y}" r="10" fill="transparent"/>`;
+      if (ratio === '2:3') {
+        /* REQ-R-003 (composed, 2:3) — "secondary as sparkline inset": a
+           tall frame has too little WIDTH to overlay a full-scale line
+           across the same cramped bar plot without the two competing for
+           the same axis, so the line renders as a small self-scaled
+           sparkline (own min/max, no shared axis) tucked into the plot's
+           top-right corner instead — the same "inset trend" reading a
+           stat-tile's own corner sparkline uses elsewhere in this file. */
+        const insetW = plotW * 0.34;
+        const insetH = Math.min(plotH * 0.26, insetW * 0.6);
+        const insetX = pad.left + plotW - insetW - 2;
+        const insetY = pad.top + 2;
+        const lo = Math.min(...lineVals);
+        const hi = Math.max(...lineVals);
+        const span = hi - lo || 1;
+        const insetPoints = lineVals.map((v, i) => ({
+          x: insetX + (lineVals.length > 1 ? (i / (lineVals.length - 1)) * insetW : insetW / 2),
+          y: insetY + insetH - ((v - lo) / span) * insetH,
+          v, label: labels[i],
+        }));
+        const t = Math.max(0, Math.min(1, this.smooth));
+        svg += `<rect data-composed-inset-bg x="${insetX - 4}" y="${insetY - 4}" width="${insetW + 8}" height="${insetH + 8}" rx="${this.#resolveRadius()}"/>`;
+        svg += `<path data-composed-inset-line${this.#seriesStroke(1, lineKey)} d="${smoothPath(insetPoints, t)}"/>`;
+        for (const p of insetPoints) {
+          svg += `<circle data-hit${tip({ label: p.label, value: p.v, series: lineKey })} cx="${p.x}" cy="${p.y}" r="6" fill="transparent"/>`;
+        }
+        svg += `<text data-composed-inset-label x="${insetX}" y="${insetY - 6}" text-anchor="start" font-size="${dims.valueSize}">${esc(lineKey)}</text>`;
+      } else {
+        /* 3:2 baseline (unchanged) and 1:1 share the full-axis overlay;
+           1:1 additionally de-emphasizes the secondary series. */
+        const points = lineVals.map((v, i) => {
+          const rawY = pad.top + plotH - ((maxVal - minVal) ? ((v - minVal) / (maxVal - minVal)) * plotH : 0);
+          return {
+            x: pad.left + barW * i + barW / 2,
+            y: this.#clampCoord(rawY, pad.top, pad.top + plotH),
+            v, label: labels[i],
+          };
+        });
+        const t = Math.max(0, Math.min(1, this.smooth));
+        /* REQ-R-003/REQ-R-007 (composed, 1:1) — "secondary series
+           de-emphasized via -container-low tint": a square view crams
+           both series onto the same cramped axis with nothing to visually
+           subordinate the secondary reading, so its stroke/dots switch
+           from the ordinary categorical palette to the muted neutral role
+           token ADR-0073 already uses for de-emphasis elsewhere — a COLOR
+           swap, never an opacity hack (REQ-R-007 explicitly rules that
+           out as a "chart-invented" substitute for the ratified tokens). */
+        const deemphasized = ratio === '1:1';
+        const lineAttrs = deemphasized
+          ? ` data-slice="1" data-deemphasized-tint style="stroke: var(--md-sys-color-neutral-on-surface-variant)"`
+          : this.#seriesStroke(1, lineKey);
+        const dotAttrs = deemphasized
+          ? ` data-slice="1" data-deemphasized-tint style="fill: var(--md-sys-color-neutral-on-surface-variant)"`
+          : this.#seriesFill(1, lineKey);
+        svg += `<path data-line${lineAttrs} d="${smoothPath(points, t)}"/>`;
+        for (const p of points) {
+          svg += `<circle data-dot${dotAttrs} cx="${p.x}" cy="${p.y}" r="3"/>`;
+          svg += `<circle data-hit${tip({ label: p.label, value: p.v, series: lineKey })} cx="${p.x}" cy="${p.y}" r="10" fill="transparent"/>`;
+        }
       }
     }
 
     this.#legendData = [
       { label: barKey,  key: barKey,  slot: 0 },
-      { label: lineKey, key: lineKey, slot: 1 },
+      // CodeRabbit (PR #1662) — the 1:1 de-emphasis above swaps the
+      // drawn series to a muted neutral token, but the legend payload
+      // still reported plain slot-1 palette data, so #buildLegend (and
+      // any external chart-legend-ui[for] mirroring it) painted a
+      // legend dot that didn't match what was actually drawn. Signal
+      // the state so consumers can mirror it.
+      { label: lineKey, key: lineKey, slot: 1, deemphasized: ratio === '1:1' },
     ];
 
     return { svg, viewBox: `0 0 ${width} ${height}` };
@@ -1994,9 +2742,43 @@ export class UIChart extends UIElement {
   #renderSegments() {
     const data = this.#data;
     const yKey = this.#yKeys()[0] || this.y;
-    const vals = data.map(d => +(d[yKey] ?? 0));
+    let vals = data.map(d => +(d[yKey] ?? 0));
+    let labels = data.map(d => d[this.x] ?? '');
     const total = vals.reduce((a, b) => a + b, 0) || 1;
-    const labels = data.map(d => d[this.x] ?? '');
+
+    // #dims() also classifies + reflects `data-ratio-resolved` (its own
+    // side effect) — needed here since this renderer otherwise sizes
+    // itself from clientWidth/a fixed strip height, not #dims()'s own
+    // width/height/pad numbers.
+    const dims = this.#dims();
+    const ratio = dims.ratioResolved;
+
+    // REQ-R-003 (segments, 1:1) — "fewer segments visible before '+N
+    // more'": the same aggregate-tail mechanism as bar@1:1's own Wave A
+    // carry-forward cell, sorted by VALUE (a proportional strip reads
+    // best keeping its biggest contributors visible, unlike bar's ordered
+    // category axis — see `aggregateTail`'s own doc comment above).
+    if (ratio === '1:1' && vals.length > SEGMENTS_1_1_VISIBLE_CAP) {
+      ({ labels, vals } = aggregateTail(labels, vals, SEGMENTS_1_1_VISIBLE_CAP, true));
+    }
+
+    // Legend data (same shape pie/donut use) — built from the (possibly
+    // aggregated) visible set so "legend below"/"legend stacked" always
+    // mirrors exactly what's drawn, never a longer list than the strip
+    // itself shows.
+    this.#legendData = labels.map((label, i) => ({
+      label,
+      value: vals[i],
+      pct: ((vals[i] / total) * 100).toFixed(1),
+      slot: i % 10,
+    }));
+
+    // REQ-R-003 (segments, 2:3) — "tall vertical stacked bars": the same
+    // orientation-swap rationale as bar's own 2:3 cell, applied to this
+    // type's single composite strip instead of N independent bars.
+    if (ratio === '2:3') {
+      return this.#renderSegmentsVertical(dims, labels, vals, total);
+    }
 
     // ViewBox matches actual render width so there's no horizontal
     // stretching — keeps rounded corners from flattening into ellipses
@@ -2050,17 +2832,63 @@ export class UIChart extends UIElement {
       }
     }
 
-    // Legend data (same shape pie/donut use).
-    this.#legendData = data.map((d, i) => ({
-      label: labels[i],
-      value: vals[i],
-      pct: ((vals[i] / total) * 100).toFixed(1),
-      slot: i % 10,
-    }));
-
     return { svg, viewBox: `0 0 ${w} ${h}` };
   }
 
+  /* REQ-R-003 (segments, 2:3) — vertical mirror of the horizontal strip
+     above: a fixed-thickness column (same magic-number role `h = 24` plays
+     for the horizontal variant, just on the width axis instead) stacked
+     top-to-bottom, sized from #dims()'s own ratio-aware height so the
+     column genuinely grows tall rather than staying the horizontal
+     variant's flat strip. */
+  #renderSegmentsVertical(dims, labels, vals, total) {
+    const w = 24;
+    const height = Math.max(60, dims.height);
+    const r = Math.min(this.#resolveRadius(), w / 2);
+    const cs = getComputedStyle(this);
+    const gap = Math.max(0, parseFloat(cs.getPropertyValue('--chart-segments-gap')) || 2);
+
+    const heights = [];
+    for (let i = 0; i < vals.length; i++) {
+      const endY = (i === vals.length - 1) ? height : ((vals.slice(0, i + 1).reduce((s, v) => s + v, 0)) / total) * height;
+      const startY = (i === 0) ? 0 : ((vals.slice(0, i).reduce((s, v) => s + v, 0)) / total) * height;
+      heights.push({ y: startY, h: Math.max(0, endY - startY) });
+    }
+
+    let svg = '';
+    for (let i = 0; i < heights.length; i++) {
+      const { y, h: segH } = heights[i];
+      if (segH <= 0) continue;
+
+      const isFirst = i === 0;
+      const isLast  = i === heights.length - 1;
+      const drawH = Math.max(0, segH - (isLast ? 0 : gap));
+
+      const pct = ((vals[i] / total) * 100).toFixed(1);
+      const tipAttrs = tip({ label: labels[i], value: vals[i], pct });
+      const a11yTitle = `<title>${esc(labels[i])}: ${vals[i]} (${pct}%)</title>`;
+
+      if ((isFirst && isLast) || (!isFirst && !isLast) || r === 0) {
+        svg += `<rect data-slice="${i % 10}"${tipAttrs} x="0" y="${y}" width="${w}" height="${drawH}"${(isFirst || isLast) && r ? ` rx="${r}"` : ''}>${a11yTitle}</rect>`;
+      } else {
+        // Asymmetric rounded corners: TOP two corners for the first
+        // segment, BOTTOM two for the last — the vertical mirror of the
+        // horizontal variant's left/right corner rounding above.
+        const rr = r;
+        const y2 = y + drawH;
+        let d;
+        if (isFirst) {
+          d = `M 0 ${y + rr} A ${rr} ${rr} 0 0 1 ${rr} ${y} H ${w - rr} A ${rr} ${rr} 0 0 1 ${w} ${y + rr} V ${y2} H 0 Z`;
+        } else { // isLast
+          d = `M 0 ${y} H ${w} V ${y2 - rr} A ${rr} ${rr} 0 0 1 ${w - rr} ${y2} H ${rr} A ${rr} ${rr} 0 0 1 0 ${y2 - rr} Z`;
+        }
+        svg += `<path data-slice="${i % 10}"${tipAttrs} d="${d}">${a11yTitle}</path>`;
+      }
+    }
+
+    return { svg, viewBox: `0 0 ${w} ${height}` };
+  }
+
   /* ── Stacked bar ──────────────────────────────────────────────── */
 
   #renderStackedBar() {
@@ -2070,10 +2898,23 @@ export class UIChart extends UIElement {
 
     /* Get stacked totals for max */
     const totals = data.map(d => keys.reduce((sum, k) => sum + (+(d[k] ?? 0)), 0));
-    const ticks = niceScale(0, Math.max(...totals), 5);
+    const ticks = niceScale(...this.#yBounds(totals), 5);
     const maxVal = ticks[ticks.length - 1];
+    const minVal = ticks[0];
 
     const dims = this.#dims();
+    const ratio = dims.ratioResolved;
+
+    this.#legendData = keys.map((k, i) => ({ label: k, key: k, slot: i % 10 }));
+
+    // REQ-R-003 (stacked-bar, 2:3) — "bars rotate to horizontal": same
+    // orientation-swap rationale as bar's own 2:3 cell — a tall, narrow
+    // box has width for a value axis but not for N vertical category
+    // columns each carrying a multi-segment stack.
+    if (ratio === '2:3') {
+      return this.#renderStackedBarHorizontal(dims, labels, keys, data, maxVal, ticks);
+    }
+
     const { width, height, pad } = dims;
     const plotH = height - pad.top - pad.bottom;
     const plotW = width - pad.left - pad.right;
@@ -2081,20 +2922,36 @@ export class UIChart extends UIElement {
     const barInner = barW * 0.6;
     const barGap = (barW - barInner) / 2;
 
-    let svg = this.#gridAndAxes(width, height, ticks, labels, pad, dims);
+    // REQ-R-003 (stacked-bar, 1:1 "square"): abbreviate category labels —
+    // same truncation treatment as bar@1:1's own square-container cell.
+    let svg = this.#gridAndAxes(width, height, ticks, labels, pad, dims, {
+      abbreviateLabels: ratio === '1:1',
+    });
+
+    // Baseline (value-0 line) shifts up when a pinned yMin lands below zero
+    // — segments still stack additively by raw value, only the pixel scale
+    // and the zero-line's position account for the pinned domain.
+    const stackScale = (maxVal - minVal) ? plotH / (maxVal - minVal) : 0;
+    // gh#1693 review — a pinned yMax lower than the actual stacked total
+    // must not let the cumulative stack burst above the plot's top edge
+    // (svg overflow:visible bleeds an unclamped span into page content).
+    // The baseline itself is clamped defensively too (an extreme yMin
+    // could otherwise place it above pad.top).
+    const stackBaselineY = this.#clampCoord(pad.top + plotH + minVal * stackScale, pad.top, pad.top + plotH);
 
     for (let i = 0; i < data.length; i++) {
-      let stackY = pad.top + plotH;
+      let stackY = stackBaselineY;
       const segCount = keys.length;
       for (let k = 0; k < segCount; k++) {
         if (this.#isSeriesHidden(keys[k])) continue;
         const v = +(data[i][keys[k]] ?? 0);
-        const segH = maxVal ? (v / maxVal) * plotH : 0;
-        if (segH <= 0) { stackY -= segH; continue; }
-        stackY -= segH;
+        const rawSegH = v * stackScale;
+        if (rawSegH <= 0) { stackY = this.#clampCoord(stackY - rawSegH, pad.top, pad.top + plotH); continue; }
+        const clampedTop = Math.max(stackY - rawSegH, pad.top);
+        const bh = stackY - clampedTop;
         const bx = pad.left + barW * i + barGap;
-        const by = stackY;
-        const bh = segH;
+        const by = clampedTop;
+        stackY = clampedTop;
         const isTop = k === segCount - 1;
         const r = this.#resolveRadius();
 
@@ -2113,7 +2970,77 @@ export class UIChart extends UIElement {
       }
     }
 
-    this.#legendData = keys.map((k, i) => ({ label: k, key: k, slot: i % 10 }));
+    return { svg, viewBox: `0 0 ${width} ${height}` };
+  }
+
+  /* REQ-R-003 (stacked-bar, 2:3) — horizontal mirror of the vertical
+     renderer above: categories run top-to-bottom on the Y axis, each
+     category's segments stack LEFT-TO-RIGHT (still additively, same
+     stacking semantics — only the axis swaps, per bar's own #renderBar
+     ↔ #renderBarHorizontal precedent). */
+  #renderStackedBarHorizontal(dims, labels, keys, data, maxVal, ticks) {
+    const { width, height } = dims;
+    const fs = dims.fontSize;
+    const ls = dims.labelSize;
+    const noGrid = this.noGrid;
+
+    const maxChars = labels.reduce((m, l) => Math.max(m, String(l).length), 1);
+    const leftGutter = noGrid ? 2 : Math.min(width * 0.42, Math.max(fs * 3, maxChars * ls * 0.55 + ls));
+    const pad = {
+      top:    fs * 0.8,
+      right:  fs * 1.8,
+      bottom: noGrid ? 2 : fs * 1.8,
+      left:   leftGutter,
+    };
+    const plotW = width - pad.left - pad.right;
+    const plotH = height - pad.top - pad.bottom;
+    const barH = plotH / labels.length;
+    const barInner = barH * 0.6;
+    const barGap = (barH - barInner) / 2;
+    const minVal = ticks[0];
+    const stackScale = (maxVal - minVal) ? plotW / (maxVal - minVal) : 0;
+    // gh#1693 review — mirrors the vertical stacked-bar clamp: a pinned
+    // yMax lower than the actual stacked total must not let the
+    // cumulative stack burst past the plot's right edge.
+    const stackBaselineX = this.#clampCoord(pad.left - minVal * stackScale, pad.left, pad.left + plotW);
+
+    let svg = '';
+    if (!noGrid) {
+      const tickRange = (ticks[ticks.length - 1] - ticks[0]) || 1;
+      for (const t of ticks) {
+        const gx = pad.left + plotW * ((t - ticks[0]) / tickRange);
+        svg += `<line data-chart-grid x1="${gx}" y1="${pad.top}" x2="${gx}" y2="${height - pad.bottom}"/>`;
+        svg += `<text data-y-label x="${gx}" y="${height - pad.bottom + fs * 1.3}" text-anchor="middle" font-size="${fs}">${this.#fmtValue(t)}</text>`;
+      }
+    }
+
+    for (let i = 0; i < labels.length; i++) {
+      const by = pad.top + barH * i + barGap;
+      svg += `<text data-x-label x="${pad.left - 6}" y="${by + barInner / 2 + fs * 0.35}" text-anchor="end" font-size="${ls}">${esc(labels[i])}</text>`;
+
+      let stackX = stackBaselineX;
+      const segCount = keys.length;
+      for (let k = 0; k < segCount; k++) {
+        if (this.#isSeriesHidden(keys[k])) continue;
+        const v = +(data[i][keys[k]] ?? 0);
+        const rawSegW = v * stackScale;
+        if (rawSegW <= 0) continue;
+        const bx = stackX;
+        const clampedEnd = Math.min(stackX + rawSegW, pad.left + plotW);
+        const segW = clampedEnd - bx;
+        stackX = clampedEnd;
+        const isEnd = k === segCount - 1;
+        const attrs = `${this.#seriesFill(k % 10, keys[k])}${tip({ label: labels[i], value: v, series: keys[k] })}`;
+
+        if (isEnd) {
+          // End segment (or single segment) — round the value-end corners
+          // only, mirroring #renderStackedBar's own top-corner rounding.
+          svg += `<path${attrs} d="${rightRoundedBarPath(bx, by, segW, barInner, this.#resolveRadius())}"/>`;
+        } else {
+          svg += `<rect${attrs} x="${bx}" y="${by}" width="${segW}" height="${barInner}"/>`;
+        }
+      }
+    }
 
     return { svg, viewBox: `0 0 ${width} ${height}` };
   }
@@ -2126,10 +3053,25 @@ export class UIChart extends UIElement {
     const labels = data.map(d => d[this.x] ?? '');
 
     const allVals = data.flatMap(d => keys.map(k => +(d[k] ?? 0)));
-    const ticks = niceScale(0, Math.max(...allVals), 5);
+    const ticks = niceScale(...this.#yBounds(allVals), 5);
     const maxVal = ticks[ticks.length - 1];
+    const minVal = ticks[0];
 
     const dims = this.#dims();
+    const ratio = dims.ratioResolved;
+
+    this.#legendData = keys.map((k, i) => ({ label: k, key: k, slot: i % 10 }));
+
+    // REQ-R-003 (grouped-bar, 2:3) — "groups rotate to horizontal bars
+    // stacked by category": the group transposes the same way bar/
+    // stacked-bar do at 2:3 — each category becomes a ROW, and within
+    // that row every series still gets its own sub-bar (grouped, not
+    // additive) — just arranged top-to-bottom in the row instead of
+    // side-by-side in a column.
+    if (ratio === '2:3') {
+      return this.#renderGroupedBarHorizontal(dims, labels, keys, data, maxVal, ticks);
+    }
+
     const { width, height, pad } = dims;
     const plotH = height - pad.top - pad.bottom;
     const plotW = width - pad.left - pad.right;
@@ -2139,13 +3081,20 @@ export class UIChart extends UIElement {
     const subBarW = (totalBarSpace - barGap * (keys.length - 1)) / keys.length;
     const groupPad = (groupW - totalBarSpace) / 2;
 
-    let svg = this.#gridAndAxes(width, height, ticks, labels, pad, dims);
+    // REQ-R-003 (grouped-bar, 1:1) — "groups compress (bar width narrows
+    // before category count drops)": category labels abbreviate first
+    // (same treatment as bar/stacked-bar's own 1:1 cells), freeing width
+    // for the bars themselves rather than ever dropping a category.
+    let svg = this.#gridAndAxes(width, height, ticks, labels, pad, dims, {
+      abbreviateLabels: ratio === '1:1',
+    });
 
     for (let i = 0; i < data.length; i++) {
       for (let k = 0; k < keys.length; k++) {
         if (this.#isSeriesHidden(keys[k])) continue;
         const v = +(data[i][keys[k]] ?? 0);
-        const barH = maxVal ? (v / maxVal) * plotH : 0;
+        const rawH = (maxVal - minVal) ? ((v - minVal) / (maxVal - minVal)) * plotH : 0;
+        const barH = this.#clampSpan(rawH, plotH);
         const bx = pad.left + groupW * i + groupPad + (subBarW + barGap) * k;
         const by = pad.top + plotH - barH;
         svg += `<path${this.#seriesFill(k % 10, keys[k])}${tip({ label: labels[i], value: v, series: keys[k] })} d="${topRoundedBarPath(bx, by, subBarW, barH, this.#resolveRadius())}"/>`;
@@ -2156,7 +3105,65 @@ export class UIChart extends UIElement {
       }
     }
 
-    this.#legendData = keys.map((k, i) => ({ label: k, key: k, slot: i % 10 }));
+    return { svg, viewBox: `0 0 ${width} ${height}` };
+  }
+
+  /* REQ-R-003 (grouped-bar, 2:3) — horizontal mirror of the vertical
+     renderer above: categories run top-to-bottom on the Y axis, and each
+     category's own K series get their own sub-bar ROW within that
+     category's band (never summed — grouped semantics preserved, only
+     the axis transposes, same as #renderStackedBar's additive stack
+     staying additive across its own horizontal mirror). */
+  #renderGroupedBarHorizontal(dims, labels, keys, data, maxVal, ticks) {
+    const { width, height } = dims;
+    const fs = dims.fontSize;
+    const ls = dims.labelSize;
+    const noGrid = this.noGrid;
+
+    const maxChars = labels.reduce((m, l) => Math.max(m, String(l).length), 1);
+    const leftGutter = noGrid ? 2 : Math.min(width * 0.42, Math.max(fs * 3, maxChars * ls * 0.55 + ls));
+    const pad = {
+      top:    fs * 0.8,
+      right:  fs * 1.8,
+      bottom: noGrid ? 2 : fs * 1.8,
+      left:   leftGutter,
+    };
+    const plotW = width - pad.left - pad.right;
+    const plotH = height - pad.top - pad.bottom;
+    const groupH = plotH / labels.length;
+    const barGap = 3;
+    const totalBarSpace = groupH * 0.7;
+    const subBarH = (totalBarSpace - barGap * (keys.length - 1)) / keys.length;
+    const groupPad = (groupH - totalBarSpace) / 2;
+    const minVal = ticks[0];
+
+    let svg = '';
+    if (!noGrid) {
+      const tickRange = (ticks[ticks.length - 1] - ticks[0]) || 1;
+      for (const t of ticks) {
+        const gx = pad.left + plotW * ((t - ticks[0]) / tickRange);
+        svg += `<line data-chart-grid x1="${gx}" y1="${pad.top}" x2="${gx}" y2="${height - pad.bottom}"/>`;
+        svg += `<text data-y-label x="${gx}" y="${height - pad.bottom + fs * 1.3}" text-anchor="middle" font-size="${fs}">${this.#fmtValue(t)}</text>`;
+      }
+    }
+
+    for (let i = 0; i < labels.length; i++) {
+      const groupY = pad.top + groupH * i;
+      svg += `<text data-x-label x="${pad.left - 6}" y="${groupY + groupH / 2 + fs * 0.35}" text-anchor="end" font-size="${ls}">${esc(labels[i])}</text>`;
+
+      for (let k = 0; k < keys.length; k++) {
+        if (this.#isSeriesHidden(keys[k])) continue;
+        const v = +(data[i][keys[k]] ?? 0);
+        const rawW = (maxVal - minVal) ? ((v - minVal) / (maxVal - minVal)) * plotW : 0;
+        const barW = this.#clampSpan(rawW, plotW);
+        const by = groupY + groupPad + (subBarH + barGap) * k;
+        svg += `<path${this.#seriesFill(k % 10, keys[k])}${tip({ label: labels[i], value: v, series: keys[k] })} d="${rightRoundedBarPath(pad.left, by, barW, subBarH, this.#resolveRadius())}"/>`;
+
+        if (!this.noValues) {
+          svg += `<text data-value x="${pad.left + barW + 4}" y="${by + subBarH / 2 + fs * 0.35}" text-anchor="start" font-size="${dims.valueSize}">${this.#fmtValue(v)}</text>`;
+        }
+      }
+    }
 
     return { svg, viewBox: `0 0 ${width} ${height}` };
   }
@@ -2169,23 +3176,42 @@ export class UIChart extends UIElement {
     const labels = data.map(d => d[this.x] ?? '');
 
     const allVals = data.flatMap(d => keys.map(k => +(d[k] ?? 0)));
-    const ticks = niceScale(0, Math.max(...allVals), 5);
+    const ticks = niceScale(...this.#yBounds(allVals), 5);
     const maxVal = ticks[ticks.length - 1];
+    const minVal = ticks[0];
 
     const dims = this.#dims();
+    const ratio = dims.ratioResolved;
     const { width, height, pad } = dims;
     const plotH = height - pad.top - pad.bottom;
     const plotW = width - pad.left - pad.right;
     const step = plotW / Math.max(data.length - 1, 1);
 
-    let svg = this.#gridAndAxes(width, height, ticks, labels, pad, dims);
+    let svg = this.#gridAndAxes(width, height, ticks, labels, pad, dims, { pointAligned: true });
+
+    // REQ-R-003 (multi-line) — a progressive de-emphasis across the three
+    // ratios rather than one fixed identification mechanism:
+    //   3:2 "all series labeled inline at line end (no legend needed)" —
+    //       each series' terminal point gets its own key label; the
+    //       ordinary below-chart legend is suppressed (chart.css) since
+    //       these end-labels already serve that job.
+    //   1:1 "inline end-labels replaced by a compact legend below" — end
+    //       labels drop, the ordinary legend (unsuppressed at this ratio)
+    //       takes over.
+    //   2:3 "end-labels dropped entirely, legend is the only series key" —
+    //       same as 1:1's own legend-only fallback; named as its own cell
+    //       in the spec because the OTHER identification path (inline
+    //       labels) narrows away first at 1:1 and there's nothing left to
+    //       drop further at 2:3 — the legend was already the sole path.
+    const inlineEndLabels = ratio === '3:2';
 
     for (let k = 0; k < keys.length; k++) {
       if (this.#isSeriesHidden(keys[k])) continue;
       const vals = data.map(d => +(d[keys[k]] ?? 0));
       const points = vals.map((v, i) => {
         const px = pad.left + step * i;
-        const py = pad.top + plotH - (maxVal ? (v / maxVal) * plotH : 0);
+        const rawY = pad.top + plotH - ((maxVal - minVal) ? ((v - minVal) / (maxVal - minVal)) * plotH : 0);
+        const py = this.#clampCoord(rawY, pad.top, pad.top + plotH);
         return { x: px, y: py, v, label: labels[i] };
       });
 
@@ -2218,6 +3244,11 @@ export class UIChart extends UIElement {
         }
         svg += `<circle data-hit${tip({ label: p.label, value: p.v, series: keys[k] })} cx="${p.x}" cy="${p.y}" r="10" fill="transparent"/>`;
       });
+
+      if (inlineEndLabels && points.length) {
+        const last = points[points.length - 1];
+        svg += `<text data-series-end-label${this.#seriesFill(k % 10, keys[k])} x="${last.x + 6}" y="${last.y}" text-anchor="start" dominant-baseline="central" font-size="${dims.labelSize}">${esc(keys[k])}</text>`;
+      }
     }
 
     this.#legendData = keys.map((k, i) => ({ label: k, key: k, slot: i % 10 }));
@@ -2251,7 +3282,18 @@ export class UIChart extends UIElement {
       const dot = document.createElement('span');
       dot.setAttribute('data-legend-dot', '');
       dot.setAttribute('data-slice', String(item.slot));
-      if (item.key) dot.style.background = `var(--color-${item.key}, var(--chart-${item.slot}))`;
+      // CodeRabbit (PR #1662) — a de-emphasized series (composed@1:1's
+      // secondary line, REQ-R-007) draws in the muted neutral token, not
+      // its categorical palette slot; the legend dot must match what was
+      // actually drawn, and skip the --color-{key} override hook here
+      // too (a consumer's override is for the CATEGORICAL reading, which
+      // this ratio deliberately isn't showing).
+      if (item.deemphasized) {
+        dot.setAttribute('data-deemphasized-tint', '');
+        dot.style.background = 'var(--md-sys-color-neutral-on-surface-variant)';
+      } else if (item.key) {
+        dot.style.background = `var(--color-${item.key}, var(--chart-${item.slot}))`;
+      }
       el.appendChild(dot);
 
       const text = document.createElement('span');