diff --git a/.changeset/issue-9-chart-authoring.md b/.changeset/issue-9-chart-authoring.md
new file mode 100644
index 0000000..6aa1eae
--- /dev/null
+++ b/.changeset/issue-9-chart-authoring.md
@@ -0,0 +1,7 @@
+---
+'@tanstack/charts': minor
+---
+
+Replace the flat axis guide options with composable axis, grid, tick, and
+responsive label configuration. Add shared focus-layer marks, coordinate-based
+tooltip anchoring, and inferred stacked or grouped mark authoring.
diff --git a/API-FRICTION.md b/API-FRICTION.md
index 1fe0fe6..23b4d10 100644
--- a/API-FRICTION.md
+++ b/API-FRICTION.md
@@ -5,7 +5,7 @@ observed difficulty from examples, production migrations, tests, and agent
 evaluations so later API, documentation, and TanStack Intent skill work is
 based on evidence.
 
-Last updated: 2026-07-30
+Last updated: 2026-07-31
 
 ## Triage rule
 
@@ -189,6 +189,10 @@ Each entry records:
 | F-151 | Artifact actions targeted deprecated Node 20             | Tooling         | resolved   |
 | F-152 | Version bumps invalidated workspace bundle evidence      | Tooling/Release | resolved   |
 | F-153 | Changesets left release-facing version claims behind     | Tooling/Release | resolved   |
+| F-154 | Focus presentation was fixed to one renderer marker      | API             | resolved   |
+| F-155 | Axis scale and presentation controls were interleaved    | API             | resolved   |
+| F-156 | Responsive tick labels had no collision policy           | API             | resolved   |
+| F-157 | Tooltip anchors could not fix coordinates independently  | API             | resolved   |
 
 ## Findings
 
@@ -375,11 +379,11 @@ Each entry records:
   scale with an authored string range/interpolator; bare D3 defaults are
   numeric or empty and fail instead of becoming invalid CSS paint.
 - Group inference: when `z` is omitted, connected line and area marks use
-  `color` to partition paths because one row-level color channel necessarily
-  identifies those paths. A grouped bar does the same only when `groupScale`
-  requests subgroup geometry. Explicit `z` remains authoritative and can
-  differ from `color`; point marks never change geometry merely because they
-  have a color channel.
+  discrete `color` to partition paths because one row-level color channel
+  necessarily identifies those paths. Bars use it as series identity after
+  stacked or explicit grouped geometry is known. Continuous color cannot infer
+  a series. Explicit `z` remains authoritative and can differ from `color`;
+  color never selects stacked versus grouped geometry.
 - Legend behavior: `colorLegend` uses swatches for categorical scales, a
   gradient for continuous and sequential scales, and exact stepped bins and
   boundaries for quantize, quantile, and threshold scales.
@@ -454,14 +458,15 @@ Each entry records:
   thick and shifted each away from its categorical tick.
 - Expected: the supplied D3 band scale completely owns bar position and
   thickness. Series or color identity must not silently change geometry.
-- Decision: bars fill the primary scale bandwidth by default, with no implicit
-  inset. `z` remains series identity and a color fallback. True side-by-side
-  bars inject a secondary D3 band scale through `groupScale`; TanStack copies
-  it and supplies the primary bandwidth as its responsive range.
-- Verification: focused tests cover exact band starts, widths, centers,
-  source-scale immutability, non-positional `z`, and injected grouped scales.
-  Stats grouped and stacked snapshots now match Plot rectangle geometry in
-  both orientations.
+- Decision: a single quantitative bar channel is a length and stacks
+  implicitly at repeated positions. Explicit endpoints opt out. Side-by-side
+  geometry requires `layout: group()`, optionally with a copied D3 band scale.
+  `z` supplies series identity; discrete `color` may infer identity only after
+  geometry is selected. `stackY` exposes order, reversal, diverging,
+  normalization, centering, and wiggle offsets for bars and vertical areas.
+- Verification: focused tests cover implicit diverging bars, normalized and
+  ordered stacks, area stacks, explicit endpoints, explicit grouping,
+  source-scale immutability, and continuous-color rejection.
 
 ### F-014 — Responsive nicing duplicates layout calculations
 
@@ -662,10 +667,11 @@ Each entry records:
   entire 320px surface.
 - Decision: make omitted margin sides automatic. Solve the minimum guide bounds
   from formatted text, anchors, and rotations; treat numeric sides as hard
-  overrides; expose resolved bounds for aligned application UI. Keep label
-  containment separate from tick collision. Content-dependent examples omit
-  margin locks, and axis titles use the same compact 10px typography as ticks
-  below 360px.
+  overrides; expose resolved bounds for aligned application UI. Candidate
+  generation now precedes rotated-label collision thinning, while containment
+  remains a separate constraint. The final thinned bounds feed the iterative
+  margin solver. Content-dependent examples omit margin locks, and axis titles
+  use the same compact 10px typography as ticks below 360px.
 - Verification: six guide-bound tests cover deterministic measurement, anchors,
   baselines, rotation, translated groups, and all four sides. Five scene-layout
   tests cover long labels and titles, rotated endpoints, narrow-to-wide
@@ -1849,10 +1855,9 @@ Each entry records:
   four bars without temporal context.
 - Expected: compact and nested charts can independently show or hide each axis
   guide without custom rendering.
-- Decision: add per-axis guide visibility at the narrow axis configuration
-  layer while retaining `guides: false` as the positionless-chart shorthand.
-  The option must not add a universal dependency or affect charts that keep
-  both guides.
+- Decision: use `axis: false` at the narrow scale configuration layer while
+  retaining `guides: false` as the positionless-chart shorthand. Grid
+  visibility is independent from axis visibility.
 - Verification: scene-layout tests cover x-only, y-only, both, and neither,
   including automatic margins and grid suppression. The nested-tooltip case
   retains period labels while hiding its y guide. The full 79-case matrix
@@ -3654,3 +3659,76 @@ Each entry records:
 - Verification: focused tests cover version-heading discovery, complete
   replacement, idempotency, and missing-version rejection. Generated package
   docs remain outputs of `pnpm docs:sync`, never hand-edited sources.
+
+### F-154 — Focus presentation was fixed to one renderer marker
+
+- Status: resolved
+- Severity: high
+- Owner: API
+- Observed in: implementing the background-highlight feedback in issue #9
+- Friction: the host could paint only one hardcoded point marker. A focused
+  category band, rule, active bar, or custom effect required renderer-specific
+  DOM mutation or a second interaction loop.
+- Decision: `whenFocused` filters an ordinary mark from the centralized
+  `ChartFocusState`. Matching supports primary, group, key, x, y, and series.
+  Mark order owns under/over placement; filtered marks infer scales but do not
+  add hit targets. Custom surfaces receive primary, group, source, and pinned
+  state.
+- Verification: SVG tests filter band geometry by semantic x, Canvas tests
+  preserve the cached base layer while painting underlays and overlays, and
+  renderer tests verify pointer/keyboard source and pinned state.
+
+### F-155 — Axis scale and presentation controls were interleaved
+
+- Status: resolved
+- Severity: high
+- Owner: API
+- Observed in: grid-without-tick-stubs feedback in issue #9
+- Friction: flat scale, axis, tick, title, and grid options coupled visibility.
+  Hiding the guide also removed grid lines; hiding stubs retained their
+  geometry in layout.
+- Decision: keep `scale`, `nice`, `reverse`, and `grid` at the scale layer and
+  nest baseline, ticks, tick labels, and title under `axis`. `axis: false`
+  retains the scale, and `axis.ticks.size: 0` omits stub nodes and their space.
+- Verification: scene-layout tests cover independent grid and axis visibility,
+  zero-size stub omission, formatter placement, title offsets, and mutually
+  exclusive candidate policies. The combined issue #9 foundation adds 1,340
+  gzip bytes to the locked line scene and 2,883 gzip bytes to the
+  representative-mark entry; the reviewed universal baseline and isolated
+  ceilings record that cost.
+
+### F-156 — Responsive tick labels had no collision policy
+
+- Status: resolved
+- Severity: high
+- Owner: API
+- Observed in: responsive-axis-label feedback in issue #9
+- Friction: authors could choose a tick count or rotation, but neither
+  guaranteed readable labels as length changed. There was no way to hard-keep
+  important interior labels.
+- Decision: generate semantic candidates from exactly one of count, pixel
+  spacing, or explicit values; then rotate and collision-thin labels. Thinning
+  defaults on, categorical x softly prioritizes ends, and `keep` hard-retains
+  exact labels without adding grid lines or stubs.
+- Verification: tests cover width-dependent candidate counts, rotated thinning,
+  the `thin: false` matrix, soft ends, hard interior retention, and kept
+  label-only values through iterative automatic margins. Shared facet axes
+  remeasure after their final cell width changes the thinning result; the
+  320-pixel Anscombe case keeps its right edge label contained. That convergence
+  adds 0.25 kB gzip to the isolated facet bundle (18.65 kB total), covered by
+  its reviewed 18.8 kB ceiling without changing any exact universal baseline.
+
+### F-157 — Tooltip anchors could not fix coordinates independently
+
+- Status: resolved
+- Severity: medium
+- Owner: API
+- Observed in: fixed-tooltip-placement feedback in issue #9
+- Friction: point, pointer, and group-center presets moved both coordinates.
+  Fixing a grouped tooltip to the plot top while following a value on x
+  required duplicated plot-bound calculations in a callback.
+- Decision: accept `{ x, y }` anchors with point, pointer, value, group-center,
+  and plot-edge choices per coordinate. Callback context exposes complete
+  focus, pointer, plot, surface, and resolved-scale state.
+- Verification: renderer tests cover mixed plot-center/plot-top anchoring,
+  keyboard pointer fallback, and the complete typed callback context.
diff --git a/ISSUE-9-DESIGN-NOTES.md b/ISSUE-9-DESIGN-NOTES.md
new file mode 100644
index 0000000..5ed9ae7
--- /dev/null
+++ b/ISSUE-9-DESIGN-NOTES.md
@@ -0,0 +1,448 @@
+# Issue #9 design decisions
+
+Source: https://github.com/TanStack/charts/issues/9
+
+This is the working decision log for reviewing the issue sequentially. Update
+it after each feedback item is settled. It records API direction, not an
+implementation plan or compatibility promise.
+
+## Review status
+
+1. Background highlight and focused-mark presentation — implemented
+2. Gridlines without tick stubs — implemented
+3. Responsive axis labels — implemented
+4. Fixed tooltip placement — implemented
+5. Stacked and grouped bar authoring — implemented
+
+## 1. Focus presentation
+
+### Decision
+
+Model interaction presentation as ordinary marks filtered by one centralized
+chart focus state. Do not create a separate renderer primitive for every
+effect such as a point, band, rule, or active bar.
+
+Observable Plot's pointer render transform is the useful precedent: an
+interactive transform filters an ordinary mark to the active datum. TanStack
+should retain its stronger centralized focus resolution rather than letting
+each interactive mark resolve the pointer independently.
+
+A representative API is:
+
+```ts
+defineChart({
+  focus: 'group-x',
+  marks: [
+    whenFocused(
+      bandX(rows, {
+        x: 'date',
+        fill: '#94a3b8',
+        fillOpacity: 0.16,
+        inset: -6,
+      }),
+      {
+        match: 'x',
+      },
+    ),
+    barY(rows, {
+      x: 'date',
+      y: 'value',
+      color: 'category',
+    }),
+  ],
+})
+```
+
+The implementation follows this contract:
+
+- one `ChartFocusState` drives tooltips and every focus-filtered mark;
+- the state distinguishes the primary point, focused group, input source, and
+  pinned state;
+- filters can match the primary point, focused group, stable point key, shared
+  x value, shared y value, or group;
+- ordinary mark order controls whether an effect is before or after other
+  marks while axes retain their intended foreground placement;
+- full mark data is available for channel and scale inference while the focus
+  filter controls the rows rendered in the transient state;
+- the hardcoded focus circle becomes an implicit focus-filtered mark;
+- custom renderers receive complete interaction state rather than
+  `paintFocus(point, points)`;
+- SVG and Canvas must share the behavior without DOM mutation as the public
+  extension mechanism;
+- pointer updates must not rebuild the complete chart scene or repaint
+  unrelated base geometry.
+
+### Related work to preserve in the design
+
+- Controlled or programmatic focus for linked charts, legends, and tables.
+- Honest separation between semantic points, hit geometry, and presentation
+  geometry.
+- Keyboard, pointer, pinned, restored, and programmatic focus parity.
+- Deterministic composition, non-interactive effect nodes, and transient export
+  behavior.
+- Facets and non-Cartesian coordinate systems must be supported by the general
+  transform contract; Cartesian helpers can remain conveniences.
+
+Specialized helpers such as `focusBandX` can be built later as compositions of
+an ordinary mark and the focus filter. They should not define the core model.
+
+## 2. Axis and grid configuration
+
+### Decision
+
+Use the freedom to make breaking changes. Replace the current flat mixture of
+scale behavior and guide presentation with a nested axis model. Keep grid
+presentation independent from the axis.
+
+```ts
+y: {
+  scale: scaleLinear,
+  nice: true,
+  grid: true,
+  axis: {
+    line: true,
+    ticks: { count: 5, size: 0, padding: 4, format: formatCurrency },
+    tickLabels: { rotate: 0 },
+    label: {
+      text: 'Revenue',
+      offset: 'auto',
+    },
+  },
+}
+```
+
+The automatic-to-explicit range is:
+
+```ts
+// Inferred axis.
+y: { scale: scaleLinear }
+
+// Inferred axis plus grid.
+y: { scale: scaleLinear, grid: true }
+
+// Labels and grid without tick stubs.
+y: {
+  scale: scaleLinear,
+  grid: true,
+  axis: { ticks: { size: 0 } },
+}
+
+// Labels and grid without an axis baseline or tick stubs.
+y: {
+  scale: scaleLinear,
+  grid: true,
+  axis: {
+    line: false,
+    ticks: { size: 0 },
+  },
+}
+
+// Materialized scale without a visible axis.
+y: {
+  scale: scaleLinear,
+  axis: false,
+}
+```
+
+This replaces:
+
+- `guide` with `axis`;
+- `ticks` with `axis.ticks.count`;
+- `format` with `axis.ticks.format`;
+- `tickRotate` with `axis.tickLabels.rotate`;
+- `label` and `labelOffset` with `axis.label`;
+- the current coupling between `guide: false` and `grid`.
+
+`axis.ticks.size: 0` should omit tick-stub nodes. Tick padding and automatic
+guide margins must use the resolved tick size rather than preserving hidden
+four-pixel geometry.
+
+Do not add explicit `axisX()` or `gridY()` guide marks based only on this
+feedback. They introduce additional layout, duplication, positioning, and
+facet semantics without current task evidence.
+
+## 3. Responsive tick labels
+
+### Decision
+
+Separate semantic tick generation from label layout. Length-aware scales and
+axes choose candidate values first. Rotation and thinning then operate as
+orthogonal label policies, with thinning enabled by default as the final
+readability guarantee.
+
+```ts
+x: {
+  scale: scaleBand,
+  axis: {
+    ticks: {
+      spacing: 80,
+      size: 0,
+    },
+    tickLabels: {
+      rotate: -35,
+      thin: {
+        minGap: 8,
+        priority: 'ends',
+        keep: [launchDate],
+      },
+    },
+  },
+}
+```
+
+The resolution pipeline is:
+
+```text
+available axis length
+→ requested tick count
+→ scale-generated candidate values
+→ formatted and rotated label bounds
+→ collision thinning
+→ automatic guide margins
+```
+
+Candidate tick policies are mutually exclusive:
+
+```ts
+ticks: {
+  spacing: 80
+} // length-aware count
+ticks: {
+  count: 5
+} // explicit count hint
+ticks: {
+  values: importantDates
+} // exact candidates
+```
+
+The scale owns semantic candidates. A D3 scale may return a different number
+than requested to preserve meaningful numeric or calendar intervals. Band
+scales normally use their complete domain as the candidate set.
+
+Label policies are independent:
+
+```ts
+tickLabels: {} // horizontal and automatically thinned
+tickLabels: { rotate: -35 } // rotated and automatically thinned
+tickLabels: { thin: false } // every horizontal label
+tickLabels: { rotate: -35, thin: false } // every rotated label
+tickLabels: false // no labels
+```
+
+Automatic rotation is not a default. Rotation changes reading direction and
+chart height; authors opt into it. Thinning only prevents unreadable overlap
+and remains enabled unless explicitly disabled.
+
+Thinning supports both soft priority and hard retention:
+
+```ts
+tickLabels: {
+  thin: {
+    priority: 'ends',
+    keep: [launchDate, migrationDate],
+  },
+}
+```
+
+- `priority` influences the best collision-free subset.
+- `keep` guarantees that exact labels render.
+- Hard-kept labels are placed first and ordinary colliding labels are removed.
+- If hard-kept labels collide with each other, both remain because the author
+  explicitly required them.
+- Exact kept values are label-only by default; they do not implicitly add a
+  tick stub or gridline.
+
+For categorical x axes, first and last candidates receive soft priority by
+default. They are not hard-kept when the available length cannot fit both.
+
+Gridlines and tick stubs use the scale-generated candidates before label
+thinning. Hiding a label does not remove its stub or gridline. A shorter axis
+may still produce fewer gridlines when its length-aware scale generates fewer
+candidate ticks.
+
+Responsive scene layout iterates candidate resolution, label measurement,
+thinning, and margins until stable. It uses a conservative result if a
+threshold oscillates. Font loading and resize relayout may revise the visible
+subset without restarting mark animation.
+
+## 4. Tooltip anchoring along an axis
+
+### Decision
+
+Allow each tooltip anchor coordinate to select its source independently.
+Avoid combinatorial presets such as `group-top`, `pointer-top`, and
+`value-bottom`.
+
+```ts
+tooltip: {
+  anchor: {
+    x: 'value',
+    y: 'plot-top',
+  },
+  placement: 'bottom',
+  offset: 12,
+}
+```
+
+`x: 'value'` maps the primary focus point's semantic `xValue` through the
+resolved x scale. For dodged bars, this locates the outer category center
+rather than a subgroup center or an average that changes when a series is
+missing.
+
+Coordinate sources are axis-specific:
+
+```ts
+anchor: {
+  x:
+    | 'point'
+    | 'pointer'
+    | 'value'
+    | 'group-center'
+    | 'plot-left'
+    | 'plot-center'
+    | 'plot-right',
+  y:
+    | 'point'
+    | 'pointer'
+    | 'value'
+    | 'group-center'
+    | 'plot-top'
+    | 'plot-center'
+    | 'plot-bottom',
+}
+```
+
+Existing whole-anchor shorthands such as `point`, `pointer`, and
+`group-center` can expand to the corresponding x/y pair.
+
+The full callback remains available and receives complete interaction and
+geometry context:
+
+```ts
+anchor: (_points, { focus, pointer, plot, surface, scales }) => ({
+  x: scales.x.map(focus.primary.xValue),
+  y: plot.y,
+})
+```
+
+Use `plot` for inner plotting bounds rather than the current misleading
+`chart` context property. `surface` describes the complete rendered size.
+
+Fallbacks resolve per coordinate:
+
+- an unavailable pointer coordinate falls back to the primary point;
+- a non-finite semantic value mapping falls back to the primary point;
+- an empty group falls back to the primary point;
+- an invalid custom coordinate falls back to the primary point.
+
+## 5. Stacked and grouped mark authoring
+
+### Decision
+
+Treat stacking and grouping as different geometric capabilities. Series
+identity may be inferred from appearance after the geometry is known, but an
+appearance channel must not select the geometry.
+
+For stackable interval marks, a single value channel represents a length and
+is converted to endpoints by an implicit stack transform:
+
+```ts
+barY(rows, {
+  x: 'date',
+  y: 'value',
+  color: 'category',
+})
+```
+
+Explicit endpoints opt out:
+
+```ts
+barY(rows, {
+  x: 'date',
+  y1: 'start',
+  y2: 'end',
+  color: 'category',
+})
+```
+
+Stack behavior can be configured through a reusable transform:
+
+```ts
+barY(
+  rows,
+  stackY(
+    {
+      order: 'input',
+      offset: 'normalize',
+    },
+    {
+      x: 'date',
+      y: 'value',
+      color: 'category',
+    },
+  ),
+)
+```
+
+The semantics follow Observable Plot's coherent distinction: `y` is a length,
+while `y1` and `y2` are already resolved extents. `stackY` is shared by
+vertical bars and areas.
+
+Grouping remains an explicit geometric choice:
+
+```ts
+barY(rows, {
+  x: 'date',
+  y: 'value',
+  color: 'category',
+  layout: group(),
+})
+```
+
+The fully explicit form supplies series identity independently:
+
+```ts
+barY(rows, {
+  x: 'date',
+  y: 'value',
+  z: 'category',
+  color: 'category',
+  layout: group(),
+})
+```
+
+Series resolution obeys these rules:
+
+- explicit `z` wins;
+- otherwise, a discrete color channel may infer series identity once the
+  geometry is known;
+- a continuous color channel cannot infer series identity;
+- color alone never switches a mark between stacked and grouped geometry;
+- grouping without explicit or inferable series identity is a configuration
+  error.
+
+Therefore, supplying only `color` to a stackable interval mark produces
+colored stacked intervals. Authors expecting side-by-side intervals must
+request grouping explicitly.
+
+Do not expose one generic `layout` option on every mark. Capabilities follow
+mark semantics:
+
+- bars support implicit length-to-extent stacking and explicit grouping;
+- areas share the reusable stack transform;
+- lines use positional values and do not stack by default, although a
+  discrete stroke or color may infer the separate paths required to render
+  series;
+- dots, text, and rules overlap at repeated positions unless an explicit
+  displacement transform such as dodge or jitter is used;
+- cells and heatmaps use aggregation or binning rather than stacking;
+- arcs use a dedicated angular or pie transform.
+
+Computed geometry is part of the transform contract:
+
+- scale domains use computed extents;
+- labels and custom renderers can access endpoints and midpoints;
+- tooltips receive the original value and computed endpoints;
+- focus, legends, and interaction use the resolved series identity;
+- transformed points preserve their original datum;
+- types expose only the capabilities supported by each mark.
diff --git a/README.md b/README.md
index cffe0a2..6da1345 100644
--- a/README.md
+++ b/README.md
@@ -91,8 +91,8 @@ const revenueChart = defineChart({
   y: {
     scale: scaleLinear,
     nice: true,
-    label: 'Revenue',
     grid: true,
+    axis: { label: 'Revenue' },
   },
   tooltip: true,
 })
diff --git a/benchmarks/bundle-size/universal-baseline.json b/benchmarks/bundle-size/universal-baseline.json
index d45f226..c29314a 100644
--- a/benchmarks/bundle-size/universal-baseline.json
+++ b/benchmarks/bundle-size/universal-baseline.json
@@ -3,36 +3,36 @@
   "policy": "Exact minified and gzip output for entries that optional features must not affect. Review every change before updating.",
   "bundles": {
     "D3-scale line scene": {
-      "bytes": 36320,
-      "gzip": 14119
+      "bytes": 40051,
+      "gzip": 15459
     },
     "D3-scale line + static SVG": {
-      "bytes": 39372,
-      "gzip": 15238
+      "bytes": 42992,
+      "gzip": 16531
     },
     "Representative marks": {
-      "bytes": 49134,
-      "gzip": 17884
+      "bytes": 57148,
+      "gzip": 20767
     },
     "TanStack DOM host": {
-      "bytes": 42903,
-      "gzip": 15701
+      "bytes": 48497,
+      "gzip": 17658
     },
     "React adapter": {
-      "bytes": 46343,
-      "gzip": 16906
+      "bytes": 51940,
+      "gzip": 18833
     },
     "React line consumer": {
-      "bytes": 68664,
-      "gzip": 25712
+      "bytes": 74296,
+      "gzip": 27655
     },
     "Custom-scale line scene": {
-      "bytes": 17096,
-      "gzip": 6432
+      "bytes": 20832,
+      "gzip": 7767
     },
     "D3 linear-scale line scene": {
-      "bytes": 36252,
-      "gzip": 14084
+      "bytes": 39983,
+      "gzip": 15424
     }
   }
 }
diff --git a/benchmarks/comparison/bundle-baseline.json b/benchmarks/comparison/bundle-baseline.json
index d5ba33b..78a40d3 100644
--- a/benchmarks/comparison/bundle-baseline.json
+++ b/benchmarks/comparison/bundle-baseline.json
@@ -1,8 +1,8 @@
 {
   "schemaVersion": 3,
-  "generatedAt": "2026-07-31T05:39:15.459Z",
+  "generatedAt": "2026-07-31T07:24:01.788Z",
   "packageVersions": {
-    "tanstack": "0.0.1",
+    "tanstack": "0.0.2",
     "chartjs": "4.5.1",
     "echarts": "6.1.0",
     "recharts": "3.10.1",
@@ -11,7 +11,7 @@
   "sources": {
     "tanstack": {
       "kind": "workspace",
-      "revision": "5c36a3866d71ad94cbcc934272e2cd7a868065f3"
+      "revision": "093f81c8ad32ce7cc269ebe65f13028707621a4a"
     },
     "chartjs": {
       "kind": "package",
@@ -44,88 +44,88 @@
   },
   "bundles": {
     "tanstack-line-basic": {
-      "minifiedBytes": 65886,
-      "gzipBytes": 24861,
-      "brotliBytes": 22188,
-      "incrementalGzipBytes": 24861,
-      "incrementalBrotliBytes": 22188
+      "minifiedBytes": 71553,
+      "gzipBytes": 26826,
+      "brotliBytes": 23930,
+      "incrementalGzipBytes": 26826,
+      "incrementalBrotliBytes": 23930
     },
     "tanstack-line-interactive": {
-      "minifiedBytes": 69927,
-      "gzipBytes": 26070,
-      "brotliBytes": 23217,
-      "incrementalGzipBytes": 26070,
-      "incrementalBrotliBytes": 23217
+      "minifiedBytes": 75590,
+      "gzipBytes": 28043,
+      "brotliBytes": 24866,
+      "incrementalGzipBytes": 28043,
+      "incrementalBrotliBytes": 24866
     },
     "tanstack-line-advanced": {
-      "minifiedBytes": 77107,
-      "gzipBytes": 28419,
-      "brotliBytes": 25167,
-      "incrementalGzipBytes": 28419,
-      "incrementalBrotliBytes": 25167
+      "minifiedBytes": 82771,
+      "gzipBytes": 30321,
+      "brotliBytes": 26977,
+      "incrementalGzipBytes": 30321,
+      "incrementalBrotliBytes": 26977
     },
     "tanstack-bar-basic": {
-      "minifiedBytes": 67480,
-      "gzipBytes": 25415,
-      "brotliBytes": 22635,
-      "incrementalGzipBytes": 25415,
-      "incrementalBrotliBytes": 22635
+      "minifiedBytes": 76963,
+      "gzipBytes": 28916,
+      "brotliBytes": 25738,
+      "incrementalGzipBytes": 28916,
+      "incrementalBrotliBytes": 25738
     },
     "tanstack-bar-interactive": {
-      "minifiedBytes": 71517,
-      "gzipBytes": 26628,
-      "brotliBytes": 23703,
-      "incrementalGzipBytes": 26628,
-      "incrementalBrotliBytes": 23703
+      "minifiedBytes": 81001,
+      "gzipBytes": 30134,
+      "brotliBytes": 26746,
+      "incrementalGzipBytes": 30134,
+      "incrementalBrotliBytes": 26746
     },
     "tanstack-bar-advanced": {
-      "minifiedBytes": 72907,
-      "gzipBytes": 27190,
-      "brotliBytes": 24112,
-      "incrementalGzipBytes": 27190,
-      "incrementalBrotliBytes": 24112
+      "minifiedBytes": 81340,
+      "gzipBytes": 30284,
+      "brotliBytes": 26868,
+      "incrementalGzipBytes": 30284,
+      "incrementalBrotliBytes": 26868
     },
     "tanstack-area-basic": {
-      "minifiedBytes": 65765,
-      "gzipBytes": 24849,
-      "brotliBytes": 22138,
-      "incrementalGzipBytes": 24849,
-      "incrementalBrotliBytes": 22138
+      "minifiedBytes": 75033,
+      "gzipBytes": 28178,
+      "brotliBytes": 25197,
+      "incrementalGzipBytes": 28178,
+      "incrementalBrotliBytes": 25197
     },
     "tanstack-area-interactive": {
-      "minifiedBytes": 69806,
-      "gzipBytes": 26069,
-      "brotliBytes": 23238,
-      "incrementalGzipBytes": 26069,
-      "incrementalBrotliBytes": 23238
+      "minifiedBytes": 79074,
+      "gzipBytes": 29407,
+      "brotliBytes": 26187,
+      "incrementalGzipBytes": 29407,
+      "incrementalBrotliBytes": 26187
     },
     "tanstack-area-advanced": {
-      "minifiedBytes": 78219,
-      "gzipBytes": 28894,
-      "brotliBytes": 25616,
-      "incrementalGzipBytes": 28894,
-      "incrementalBrotliBytes": 25616
+      "minifiedBytes": 86437,
+      "gzipBytes": 31782,
+      "brotliBytes": 28205,
+      "incrementalGzipBytes": 31782,
+      "incrementalBrotliBytes": 28205
     },
     "tanstack-scatter-basic": {
-      "minifiedBytes": 65638,
-      "gzipBytes": 24781,
-      "brotliBytes": 22078,
-      "incrementalGzipBytes": 24781,
-      "incrementalBrotliBytes": 22078
+      "minifiedBytes": 71258,
+      "gzipBytes": 26744,
+      "brotliBytes": 23802,
+      "incrementalGzipBytes": 26744,
+      "incrementalBrotliBytes": 23802
     },
     "tanstack-scatter-interactive": {
-      "minifiedBytes": 69679,
-      "gzipBytes": 26007,
-      "brotliBytes": 23120,
-      "incrementalGzipBytes": 26007,
-      "incrementalBrotliBytes": 23120
+      "minifiedBytes": 75295,
+      "gzipBytes": 27964,
+      "brotliBytes": 24824,
+      "incrementalGzipBytes": 27964,
+      "incrementalBrotliBytes": 24824
     },
     "tanstack-scatter-advanced": {
-      "minifiedBytes": 69695,
-      "gzipBytes": 26012,
-      "brotliBytes": 23107,
-      "incrementalGzipBytes": 26012,
-      "incrementalBrotliBytes": 23107
+      "minifiedBytes": 75311,
+      "gzipBytes": 27969,
+      "brotliBytes": 24881,
+      "incrementalGzipBytes": 27969,
+      "incrementalBrotliBytes": 24881
     },
     "chartjs-line-basic": {
       "minifiedBytes": 137909,
diff --git a/benchmarks/comparison/libraries/tanstack/area.ts b/benchmarks/comparison/libraries/tanstack/area.ts
index e95ef14..5c324a6 100644
--- a/benchmarks/comparison/libraries/tanstack/area.ts
+++ b/benchmarks/comparison/libraries/tanstack/area.ts
@@ -43,13 +43,13 @@ const definition = (input: BenchmarkInput) =>
             ? [xMinimum(input), xMaximum(input)]
             : [0, Math.max(1, input.rows.length - 1)],
         ),
-        ticks: 6,
         grid: true,
+        axis: { ticks: { count: 6 } },
       },
       y: {
         scale: scaleLinear().domain([0, BENCHMARK_ADVANCED ? 200 : 100]),
-        ticks: 5,
         grid: true,
+        axis: { ticks: { count: 5 } },
       },
       color: BENCHMARK_INTERACTIVE
         ? {
diff --git a/benchmarks/comparison/libraries/tanstack/bar.ts b/benchmarks/comparison/libraries/tanstack/bar.ts
index 770fb23..7e0d3a5 100644
--- a/benchmarks/comparison/libraries/tanstack/bar.ts
+++ b/benchmarks/comparison/libraries/tanstack/bar.ts
@@ -38,8 +38,8 @@ const definition = (input: BenchmarkInput) =>
       },
       y: {
         scale: scaleLinear().domain([0, BENCHMARK_ADVANCED ? 200 : 100]),
-        ticks: 5,
         grid: true,
+        axis: { ticks: { count: 5 } },
       },
       color: BENCHMARK_INTERACTIVE
         ? {
diff --git a/benchmarks/comparison/libraries/tanstack/base.ts b/benchmarks/comparison/libraries/tanstack/base.ts
index ced40db..1528937 100644
--- a/benchmarks/comparison/libraries/tanstack/base.ts
+++ b/benchmarks/comparison/libraries/tanstack/base.ts
@@ -163,9 +163,11 @@ export function mountDefinition<TDatum>(
                     typeof point.xValue === 'number' ? point.xValue : undefined,
                 }
               }
-              const points = container.querySelectorAll<SVGGraphicsElement>(
-                'svg circle[data-ts-key]:not([data-ts-chart-focus])',
-              )
+              const points = [
+                ...container.querySelectorAll<SVGGraphicsElement>(
+                  'svg circle[data-ts-key]',
+                ),
+              ].filter((element) => !element.closest('[data-ts-focus-layer]'))
               const point =
                 points[
                   Math.round(
diff --git a/benchmarks/comparison/libraries/tanstack/line.ts b/benchmarks/comparison/libraries/tanstack/line.ts
index 1893722..b36459c 100644
--- a/benchmarks/comparison/libraries/tanstack/line.ts
+++ b/benchmarks/comparison/libraries/tanstack/line.ts
@@ -38,13 +38,13 @@ const definition = (input: BenchmarkInput) =>
             ? [xMinimum(input), xMaximum(input)]
             : [0, Math.max(1, input.rows.length - 1)],
         ),
-        ticks: 6,
         grid: true,
+        axis: { ticks: { count: 6 } },
       },
       y: {
         scale: scaleLinear().domain([0, 100]),
-        ticks: 5,
         grid: true,
+        axis: { ticks: { count: 5 } },
       },
       color: BENCHMARK_INTERACTIVE
         ? {
diff --git a/benchmarks/comparison/libraries/tanstack/scatter.ts b/benchmarks/comparison/libraries/tanstack/scatter.ts
index 6a281fb..8296114 100644
--- a/benchmarks/comparison/libraries/tanstack/scatter.ts
+++ b/benchmarks/comparison/libraries/tanstack/scatter.ts
@@ -30,13 +30,13 @@ const definition = (input: BenchmarkInput) =>
           ? [xMinimum(input), xMaximum(input)]
           : [0, Math.max(1, input.rows.length - 1)],
       ),
-      ticks: 6,
       grid: true,
+      axis: { ticks: { count: 6 } },
     },
     y: {
       scale: scaleLinear().domain([0, 100]),
-      ticks: 5,
       grid: true,
+      axis: { ticks: { count: 5 } },
     },
     color: BENCHMARK_INTERACTIVE
       ? {
diff --git a/benchmarks/conformance/cases/01-line-gaps/tanstack.ts b/benchmarks/conformance/cases/01-line-gaps/tanstack.ts
index aa7b5df..1580a8a 100644
--- a/benchmarks/conformance/cases/01-line-gaps/tanstack.ts
+++ b/benchmarks/conformance/cases/01-line-gaps/tanstack.ts
@@ -16,15 +16,8 @@ const definition = (input: ConformanceInput) => {
         strokeWidth: 2.25,
       }),
     ],
-    x: {
-      scale: scaleUtc,
-      label: 'Week',
-    },
-    y: {
-      scale: scaleLinear,
-      label: 'Close (USD)',
-      grid: true,
-    },
+    x: { scale: scaleUtc, axis: { label: 'Week' } },
+    y: { scale: scaleLinear, grid: true, axis: { label: 'Close (USD)' } },
   })
 }
 
diff --git a/benchmarks/conformance/cases/02-multi-line-end-labels/tanstack.ts b/benchmarks/conformance/cases/02-multi-line-end-labels/tanstack.ts
index b4ce39b..c66ce8d 100644
--- a/benchmarks/conformance/cases/02-multi-line-end-labels/tanstack.ts
+++ b/benchmarks/conformance/cases/02-multi-line-end-labels/tanstack.ts
@@ -31,14 +31,11 @@ const definition = (input: ConformanceInput) => {
         fontWeight: 600,
       }),
     ],
-    x: {
-      scale: scaleUtc,
-      label: 'Week',
-    },
+    x: { scale: scaleUtc, axis: { label: 'Week' } },
     y: {
       scale: scaleLinear,
-      label: 'Unemployed (thousands)',
       grid: true,
+      axis: { label: 'Unemployed (thousands)' },
     },
     color: {
       range: colors,
diff --git a/benchmarks/conformance/cases/03-temperature-range-band/tanstack.ts b/benchmarks/conformance/cases/03-temperature-range-band/tanstack.ts
index b77bf27..00ff616 100644
--- a/benchmarks/conformance/cases/03-temperature-range-band/tanstack.ts
+++ b/benchmarks/conformance/cases/03-temperature-range-band/tanstack.ts
@@ -27,15 +27,8 @@ const definition = (input: ConformanceInput) => {
         strokeWidth: 1.75,
       }),
     ],
-    x: {
-      scale: scaleUtc,
-      label: 'Week',
-    },
-    y: {
-      scale: scaleLinear,
-      label: 'Temperature (°F)',
-      grid: true,
-    },
+    x: { scale: scaleUtc, axis: { label: 'Week' } },
+    y: { scale: scaleLinear, grid: true, axis: { label: 'Temperature (°F)' } },
   })
 }
 
diff --git a/benchmarks/conformance/cases/04-stacked-time-area/tanstack.ts b/benchmarks/conformance/cases/04-stacked-time-area/tanstack.ts
index 528f409..ce3d160 100644
--- a/benchmarks/conformance/cases/04-stacked-time-area/tanstack.ts
+++ b/benchmarks/conformance/cases/04-stacked-time-area/tanstack.ts
@@ -44,14 +44,11 @@ const definition = (_input: ConformanceInput) => {
       }),
       ruleY([0]),
     ],
-    x: {
-      scale: scaleUtc,
-      label: 'Month',
-    },
+    x: { scale: scaleUtc, axis: { label: 'Month' } },
     y: {
       scale: scaleLinear,
-      label: 'Unemployed (thousands)',
       grid: true,
+      axis: { label: 'Unemployed (thousands)' },
     },
     color: {
       range: colors,
diff --git a/benchmarks/conformance/cases/13-interval-timeline/tanstack.ts b/benchmarks/conformance/cases/13-interval-timeline/tanstack.ts
index 765ee6f..28d425b 100644
--- a/benchmarks/conformance/cases/13-interval-timeline/tanstack.ts
+++ b/benchmarks/conformance/cases/13-interval-timeline/tanstack.ts
@@ -25,14 +25,10 @@ const definition = (input: ConformanceInput) => {
         radius: 3,
       }),
     ],
-    x: {
-      scale: scaleLinear,
-      grid: true,
-      label: 'Share price ($)',
-    },
+    x: { scale: scaleLinear, grid: true, axis: { label: 'Share price ($)' } },
     y: {
       scale: () => scaleBand<Date>().paddingInner(0.16),
-      format: (value) => date.format(value),
+      axis: { ticks: { format: (value) => date.format(value) } },
     },
     color: {
       range: colors,
diff --git a/benchmarks/conformance/cases/14-error-bars/tanstack.ts b/benchmarks/conformance/cases/14-error-bars/tanstack.ts
index a3347ac..1aac84c 100644
--- a/benchmarks/conformance/cases/14-error-bars/tanstack.ts
+++ b/benchmarks/conformance/cases/14-error-bars/tanstack.ts
@@ -43,11 +43,7 @@ const definition = (input: ConformanceInput) => {
     x: {
       scale: () => scaleBand<string>().padding(0.22),
     },
-    y: {
-      scale: scaleLinear,
-      grid: true,
-      label: 'Body mass (g)',
-    },
+    y: { scale: scaleLinear, grid: true, axis: { label: 'Body mass (g)' } },
   })
 }
 
diff --git a/benchmarks/conformance/cases/15-boxplot/tanstack.ts b/benchmarks/conformance/cases/15-boxplot/tanstack.ts
index 5b171f5..d41ebe8 100644
--- a/benchmarks/conformance/cases/15-boxplot/tanstack.ts
+++ b/benchmarks/conformance/cases/15-boxplot/tanstack.ts
@@ -54,7 +54,7 @@ const definition = () =>
     y: {
       scale: scaleLinear,
       grid: true,
-      label: 'Speed of light (km/s minus 299,000)',
+      axis: { label: 'Speed of light (km/s minus 299,000)' },
     },
   })
 
diff --git a/benchmarks/conformance/cases/16-lollipop/tanstack.ts b/benchmarks/conformance/cases/16-lollipop/tanstack.ts
index 6fa8a00..e3ca1db 100644
--- a/benchmarks/conformance/cases/16-lollipop/tanstack.ts
+++ b/benchmarks/conformance/cases/16-lollipop/tanstack.ts
@@ -33,8 +33,10 @@ const definition = (_input: ConformanceInput) => {
     y: {
       scale: scaleLinear,
       grid: true,
-      label: 'Frequency',
-      format: (value) => percent.format(value),
+      axis: {
+        ticks: { format: (value) => percent.format(value) },
+        label: 'Frequency',
+      },
     },
   })
 }
diff --git a/benchmarks/conformance/cases/17-dumbbell/tanstack.ts b/benchmarks/conformance/cases/17-dumbbell/tanstack.ts
index 04f7f88..41575d4 100644
--- a/benchmarks/conformance/cases/17-dumbbell/tanstack.ts
+++ b/benchmarks/conformance/cases/17-dumbbell/tanstack.ts
@@ -32,7 +32,7 @@ const definition = (input: ConformanceInput) => {
     x: {
       scale: scaleLinear,
       grid: true,
-      label: '90th/10th percentile wage ratio',
+      axis: { label: '90th/10th percentile wage ratio' },
     },
     y: {
       scale: () => scaleBand<string>().padding(0.22),
diff --git a/benchmarks/conformance/cases/18-cumulative-histogram/tanstack.ts b/benchmarks/conformance/cases/18-cumulative-histogram/tanstack.ts
index ba392cd..e3784f2 100644
--- a/benchmarks/conformance/cases/18-cumulative-histogram/tanstack.ts
+++ b/benchmarks/conformance/cases/18-cumulative-histogram/tanstack.ts
@@ -51,16 +51,8 @@ const definition = (input: ConformanceInput) => {
         inset: 1,
       }),
     ],
-    x: {
-      scale: scaleLinear,
-      grid: true,
-      label: 'Weight (kg)',
-    },
-    y: {
-      scale: scaleLinear,
-      grid: true,
-      label: 'Cumulative count',
-    },
+    x: { scale: scaleLinear, grid: true, axis: { label: 'Weight (kg)' } },
+    y: { scale: scaleLinear, grid: true, axis: { label: 'Cumulative count' } },
   })
 }
 
diff --git a/benchmarks/conformance/cases/19-moving-average-line/tanstack.ts b/benchmarks/conformance/cases/19-moving-average-line/tanstack.ts
index 6486751..b8fb3da 100644
--- a/benchmarks/conformance/cases/19-moving-average-line/tanstack.ts
+++ b/benchmarks/conformance/cases/19-moving-average-line/tanstack.ts
@@ -30,14 +30,11 @@ const definition = (_input: ConformanceInput) => {
         strokeDasharray: '4 4',
       }),
     ],
-    x: {
-      scale: scaleUtc,
-      label: 'Date',
-    },
+    x: { scale: scaleUtc, axis: { label: 'Date' } },
     y: {
       scale: scaleLinear,
       grid: true,
-      label: 'Fourteen-day average temperature (°F)',
+      axis: { label: 'Fourteen-day average temperature (°F)' },
     },
   })
 }
diff --git a/benchmarks/conformance/cases/20-normalized-stacked-area/tanstack.ts b/benchmarks/conformance/cases/20-normalized-stacked-area/tanstack.ts
index 4590ed1..2cfb520 100644
--- a/benchmarks/conformance/cases/20-normalized-stacked-area/tanstack.ts
+++ b/benchmarks/conformance/cases/20-normalized-stacked-area/tanstack.ts
@@ -46,15 +46,11 @@ const definition = (_input: ConformanceInput) => {
       }),
       ruleY([0]),
     ],
-    x: {
-      scale: scaleUtc,
-      label: 'Month',
-    },
+    x: { scale: scaleUtc, axis: { label: 'Month' } },
     y: {
       scale: scaleLinear().domain([0, 1]),
       grid: true,
-      label: 'Share of unemployment',
-      format: percent,
+      axis: { ticks: { format: percent }, label: 'Share of unemployment' },
     },
     color: {
       range: colors,
diff --git a/benchmarks/conformance/cases/21-streamgraph/tanstack.ts b/benchmarks/conformance/cases/21-streamgraph/tanstack.ts
index 2084280..b7bf7a1 100644
--- a/benchmarks/conformance/cases/21-streamgraph/tanstack.ts
+++ b/benchmarks/conformance/cases/21-streamgraph/tanstack.ts
@@ -43,14 +43,11 @@ const definition = (_input: ConformanceInput) => {
         fillOpacity: 0.85,
       }),
     ],
-    x: {
-      scale: scaleUtc,
-      label: 'Month',
-    },
+    x: { scale: scaleUtc, axis: { label: 'Month' } },
     y: {
       scale: scaleLinear,
       grid: true,
-      label: 'Unemployed (thousands)',
+      axis: { label: 'Unemployed (thousands)' },
     },
     color: {
       range: colors,
diff --git a/benchmarks/conformance/cases/22-bollinger-band/tanstack.ts b/benchmarks/conformance/cases/22-bollinger-band/tanstack.ts
index ee7567b..ccd1e0b 100644
--- a/benchmarks/conformance/cases/22-bollinger-band/tanstack.ts
+++ b/benchmarks/conformance/cases/22-bollinger-band/tanstack.ts
@@ -35,15 +35,8 @@ const definition = (input: ConformanceInput) => {
         strokeWidth: 2.25,
       }),
     ],
-    x: {
-      scale: scaleUtc,
-      label: 'Date',
-    },
-    y: {
-      scale: scaleLinear,
-      grid: true,
-      label: 'Apple close (USD)',
-    },
+    x: { scale: scaleUtc, axis: { label: 'Date' } },
+    y: { scale: scaleLinear, grid: true, axis: { label: 'Apple close (USD)' } },
   })
 }
 
diff --git a/benchmarks/conformance/cases/24-quantitative-binned-heatmap/tanstack.ts b/benchmarks/conformance/cases/24-quantitative-binned-heatmap/tanstack.ts
index 7984abf..e6bf287 100644
--- a/benchmarks/conformance/cases/24-quantitative-binned-heatmap/tanstack.ts
+++ b/benchmarks/conformance/cases/24-quantitative-binned-heatmap/tanstack.ts
@@ -73,12 +73,12 @@ const definition = (input: ConformanceInput) => {
     x: {
       scale: scaleLinear().domain([30, 62]),
       grid: true,
-      label: 'Bill length (mm)',
+      axis: { label: 'Bill length (mm)' },
     },
     y: {
       scale: scaleLinear().domain([12, 23]),
       grid: true,
-      label: 'Bill depth (mm)',
+      axis: { label: 'Bill depth (mm)' },
     },
     color: {
       scale: scaleSequential,
diff --git a/benchmarks/conformance/cases/25-calendar-heatmap/tanstack.ts b/benchmarks/conformance/cases/25-calendar-heatmap/tanstack.ts
index 3609996..37c0fb5 100644
--- a/benchmarks/conformance/cases/25-calendar-heatmap/tanstack.ts
+++ b/benchmarks/conformance/cases/25-calendar-heatmap/tanstack.ts
@@ -27,8 +27,7 @@ const definition = (input: ConformanceInput) => {
     ],
     x: {
       scale: () => scaleBand<number>().paddingInner(0.06).paddingOuter(0.03),
-      label: 'Week',
-      format: (value) => `W${value + 1}`,
+      axis: { ticks: { format: (value) => `W${value + 1}` }, label: 'Week' },
     },
     y: {
       scale: scaleBand<string>()
diff --git a/benchmarks/conformance/cases/26-diverging-likert/tanstack.ts b/benchmarks/conformance/cases/26-diverging-likert/tanstack.ts
index 7bc23bc..31b31f3 100644
--- a/benchmarks/conformance/cases/26-diverging-likert/tanstack.ts
+++ b/benchmarks/conformance/cases/26-diverging-likert/tanstack.ts
@@ -26,8 +26,10 @@ const definition = () =>
     x: {
       scale: scaleLinear,
       grid: true,
-      label: '← more disagree · Number of responses · more agree →',
-      format: (value) => `${Math.abs(value)}`,
+      axis: {
+        ticks: { format: (value) => `${Math.abs(value)}` },
+        label: '← more disagree · Number of responses · more agree →',
+      },
     },
     y: {
       scale: () => scaleBand<string>().paddingInner(0.14).paddingOuter(0.08),
diff --git a/benchmarks/conformance/cases/27-parallel-coordinates/tanstack.ts b/benchmarks/conformance/cases/27-parallel-coordinates/tanstack.ts
index 89d5343..2bfa89e 100644
--- a/benchmarks/conformance/cases/27-parallel-coordinates/tanstack.ts
+++ b/benchmarks/conformance/cases/27-parallel-coordinates/tanstack.ts
@@ -40,7 +40,7 @@ const definition = () =>
     y: {
       scale: scaleLinear().domain([0, 100]),
       grid: true,
-      label: 'Relative performance within sample',
+      axis: { label: 'Relative performance within sample' },
     },
     color: {
       range: colors,
diff --git a/benchmarks/conformance/cases/28-candlestick/tanstack.ts b/benchmarks/conformance/cases/28-candlestick/tanstack.ts
index df1418c..337a118 100644
--- a/benchmarks/conformance/cases/28-candlestick/tanstack.ts
+++ b/benchmarks/conformance/cases/28-candlestick/tanstack.ts
@@ -48,11 +48,7 @@ const definition = (input: ConformanceInput) => {
       }),
     ],
     x: { scale: scaleUtc },
-    y: {
-      scale: scaleLinear,
-      grid: true,
-      label: 'Price',
-    },
+    y: { scale: scaleLinear, grid: true, axis: { label: 'Price' } },
   })
 }
 
diff --git a/benchmarks/conformance/cases/29-waterfall/tanstack.ts b/benchmarks/conformance/cases/29-waterfall/tanstack.ts
index 7cc0941..328316f 100644
--- a/benchmarks/conformance/cases/29-waterfall/tanstack.ts
+++ b/benchmarks/conformance/cases/29-waterfall/tanstack.ts
@@ -45,12 +45,12 @@ const definition = () =>
       ],
       x: {
         scale: () => scaleBand<string>().padding(0.14),
-        tickRotate: width < 560 ? -32 : 0,
+        axis: { tickLabels: { rotate: width < 560 ? -32 : 0 } },
       },
       y: {
         scale: scaleLinear,
         grid: true,
-        label: 'Change in gasoline price (USD per gallon)',
+        axis: { label: 'Change in gasoline price (USD per gallon)' },
       },
       color: {
         domain: kinds,
diff --git a/benchmarks/conformance/cases/30-slopegraph/tanstack.ts b/benchmarks/conformance/cases/30-slopegraph/tanstack.ts
index e802776..3c55d45 100644
--- a/benchmarks/conformance/cases/30-slopegraph/tanstack.ts
+++ b/benchmarks/conformance/cases/30-slopegraph/tanstack.ts
@@ -49,7 +49,7 @@ const definition = (input: ConformanceInput) => {
     y: {
       scale: scaleLinear,
       grid: true,
-      label: '90th/10th percentile wage ratio',
+      axis: { label: '90th/10th percentile wage ratio' },
     },
     color: {
       range: colors,
diff --git a/benchmarks/conformance/cases/31-linear-regression/tanstack.ts b/benchmarks/conformance/cases/31-linear-regression/tanstack.ts
index 232a92f..5e456ce 100644
--- a/benchmarks/conformance/cases/31-linear-regression/tanstack.ts
+++ b/benchmarks/conformance/cases/31-linear-regression/tanstack.ts
@@ -67,15 +67,11 @@ const definition = (input: ConformanceInput) => {
         strokeWidth: 2,
       }),
     ],
-    x: {
-      scale: scaleLinear,
-      grid: true,
-      label: 'Power (hp)',
-    },
+    x: { scale: scaleLinear, grid: true, axis: { label: 'Power (hp)' } },
     y: {
       scale: scaleLinear,
       grid: true,
-      label: 'Fuel economy (mpg)',
+      axis: { label: 'Fuel economy (mpg)' },
     },
   })
 }
diff --git a/benchmarks/conformance/cases/32-change-arrows/tanstack.ts b/benchmarks/conformance/cases/32-change-arrows/tanstack.ts
index 5504412..63be8c2 100644
--- a/benchmarks/conformance/cases/32-change-arrows/tanstack.ts
+++ b/benchmarks/conformance/cases/32-change-arrows/tanstack.ts
@@ -36,15 +36,11 @@ const definition = () => {
         headLength: 8,
       }),
     ],
-    x: {
-      scale: scaleLinear,
-      grid: true,
-      label: 'Log₁₀ population',
-    },
+    x: { scale: scaleLinear, grid: true, axis: { label: 'Log₁₀ population' } },
     y: {
       scale: scaleLinear,
       grid: true,
-      label: '90th-to-10th-percentile wage ratio',
+      axis: { label: '90th-to-10th-percentile wage ratio' },
     },
   })
 }
diff --git a/benchmarks/conformance/cases/33-difference-chart/tanstack.ts b/benchmarks/conformance/cases/33-difference-chart/tanstack.ts
index 8b2d721..577596b 100644
--- a/benchmarks/conformance/cases/33-difference-chart/tanstack.ts
+++ b/benchmarks/conformance/cases/33-difference-chart/tanstack.ts
@@ -45,14 +45,9 @@ const definition = (input: ConformanceInput) => {
     ],
     x: {
       scale: scaleUtc,
-      ticks: 9,
-      format: formatDifferenceMonth,
-    },
-    y: {
-      scale: scaleLinear,
-      ticks: 6,
-      grid: true,
+      axis: { ticks: { count: 9, format: formatDifferenceMonth } },
     },
+    y: { scale: scaleLinear, grid: true, axis: { ticks: { count: 6 } } },
     color: {
       domain: ['positive', 'negative'],
       range: ['#16a34a', '#dc2626'],
diff --git a/benchmarks/conformance/cases/34-pointer-tooltip/tanstack.ts b/benchmarks/conformance/cases/34-pointer-tooltip/tanstack.ts
index 765c3af..d109ba6 100644
--- a/benchmarks/conformance/cases/34-pointer-tooltip/tanstack.ts
+++ b/benchmarks/conformance/cases/34-pointer-tooltip/tanstack.ts
@@ -27,11 +27,7 @@ const definition = (input: ConformanceInput) => {
       }),
     ],
     x: { scale: scaleUtc },
-    y: {
-      scale: scaleLinear,
-      grid: true,
-      label: 'Apple close (USD)',
-    },
+    y: { scale: scaleLinear, grid: true, axis: { label: 'Apple close (USD)' } },
   })
 }
 
diff --git a/benchmarks/conformance/cases/35-grouped-tooltip/tanstack.ts b/benchmarks/conformance/cases/35-grouped-tooltip/tanstack.ts
index 51216e4..629c90f 100644
--- a/benchmarks/conformance/cases/35-grouped-tooltip/tanstack.ts
+++ b/benchmarks/conformance/cases/35-grouped-tooltip/tanstack.ts
@@ -32,7 +32,7 @@ const definition = (input: ConformanceInput) => {
     y: {
       scale: scaleLinear,
       grid: true,
-      label: 'Unemployed (thousands)',
+      axis: { label: 'Unemployed (thousands)' },
     },
     color: {
       domain: industryNames,
diff --git a/benchmarks/conformance/cases/37-delaunay-network/tanstack.ts b/benchmarks/conformance/cases/37-delaunay-network/tanstack.ts
index 7155a51..b5176de 100644
--- a/benchmarks/conformance/cases/37-delaunay-network/tanstack.ts
+++ b/benchmarks/conformance/cases/37-delaunay-network/tanstack.ts
@@ -85,15 +85,11 @@ const definition = (input: ConformanceInput) => {
         r: 4,
       }),
     ],
-    x: {
-      scale: scaleLinear,
-      grid: true,
-      label: 'Weight (lb)',
-    },
+    x: { scale: scaleLinear, grid: true, axis: { label: 'Weight (lb)' } },
     y: {
       scale: scaleLinear,
       grid: true,
-      label: 'Fuel economy (mpg)',
+      axis: { label: 'Fuel economy (mpg)' },
     },
   })
 }
diff --git a/benchmarks/conformance/cases/42-vector-field/tanstack.ts b/benchmarks/conformance/cases/42-vector-field/tanstack.ts
index 7be52f5..e05eb2b 100644
--- a/benchmarks/conformance/cases/42-vector-field/tanstack.ts
+++ b/benchmarks/conformance/cases/42-vector-field/tanstack.ts
@@ -18,16 +18,8 @@ const definition = () =>
         stroke: '#2563eb',
       }),
     ],
-    x: {
-      scale: scaleLinear,
-      grid: true,
-      label: 'Longitude',
-    },
-    y: {
-      scale: scaleLinear,
-      grid: true,
-      label: 'Latitude',
-    },
+    x: { scale: scaleLinear, grid: true, axis: { label: 'Longitude' } },
+    y: { scale: scaleLinear, grid: true, axis: { label: 'Latitude' } },
   })
 
 export const mount = tanstackMount(definition, 'Two-dimensional vector field')
diff --git a/benchmarks/conformance/cases/43-hexbin-density/tanstack.ts b/benchmarks/conformance/cases/43-hexbin-density/tanstack.ts
index 2b1ab29..5868265 100644
--- a/benchmarks/conformance/cases/43-hexbin-density/tanstack.ts
+++ b/benchmarks/conformance/cases/43-hexbin-density/tanstack.ts
@@ -64,12 +64,12 @@ const definition = (input: ConformanceInput) => {
       x: {
         scale: scaleLinear().domain([1500, 5500]),
         grid: true,
-        label: 'Weight (lb)',
+        axis: { label: 'Weight (lb)' },
       },
       y: {
         scale: scaleLinear().domain([5, 50]),
         grid: true,
-        label: 'Fuel economy (mpg)',
+        axis: { label: 'Fuel economy (mpg)' },
       },
       color: {
         scale: scaleThreshold<number, string>,
diff --git a/benchmarks/conformance/cases/50-empirical-cdf/tanstack.ts b/benchmarks/conformance/cases/50-empirical-cdf/tanstack.ts
index 062b953..0c4ee89 100644
--- a/benchmarks/conformance/cases/50-empirical-cdf/tanstack.ts
+++ b/benchmarks/conformance/cases/50-empirical-cdf/tanstack.ts
@@ -45,13 +45,15 @@ const definition = (input: ConformanceInput) => {
     x: {
       scale: scaleLinear,
       grid: true,
-      label: 'Fuel economy (mpg)',
+      axis: { label: 'Fuel economy (mpg)' },
     },
     y: {
       scale: scaleLinear().domain([0, 1]),
       grid: true,
-      label: 'Cumulative proportion',
-      format: (value) => percent.format(value),
+      axis: {
+        ticks: { format: (value) => percent.format(value) },
+        label: 'Cumulative proportion',
+      },
     },
   })
 }
diff --git a/benchmarks/conformance/cases/51-faceted-distributions/tanstack.ts b/benchmarks/conformance/cases/51-faceted-distributions/tanstack.ts
index c3129e1..f9a517e 100644
--- a/benchmarks/conformance/cases/51-faceted-distributions/tanstack.ts
+++ b/benchmarks/conformance/cases/51-faceted-distributions/tanstack.ts
@@ -88,14 +88,15 @@ const definition = (input: ConformanceInput) => {
           x: {
             scale: scaleLinear().domain([2500, 6500]),
             grid: true,
-            label: 'Body mass (g)',
+            axis: { label: 'Body mass (g)' },
           },
           y: {
             scale: scaleLinear().domain([0, 0.4]),
             grid: true,
-            ticks: 3,
-            label: 'Proportion',
-            format: (value) => percent.format(value),
+            axis: {
+              ticks: { count: 3, format: (value) => percent.format(value) },
+              label: 'Proportion',
+            },
           },
         }),
       }),
diff --git a/benchmarks/conformance/cases/53-log-scale-scatter/tanstack.ts b/benchmarks/conformance/cases/53-log-scale-scatter/tanstack.ts
index 91cd420..d632e6f 100644
--- a/benchmarks/conformance/cases/53-log-scale-scatter/tanstack.ts
+++ b/benchmarks/conformance/cases/53-log-scale-scatter/tanstack.ts
@@ -32,13 +32,9 @@ const definition = (input: ConformanceInput) => {
     x: {
       scale: scaleLog().domain([200, 30_000]),
       grid: true,
-      label: 'Class size',
-    },
-    y: {
-      scale: scaleLinear,
-      grid: true,
-      label: 'Hierarchy depth',
+      axis: { label: 'Class size' },
     },
+    y: { scale: scaleLinear, grid: true, axis: { label: 'Hierarchy depth' } },
   })
 }
 
diff --git a/benchmarks/conformance/cases/54-bump-ranking/tanstack.ts b/benchmarks/conformance/cases/54-bump-ranking/tanstack.ts
index c497da4..50ab8df 100644
--- a/benchmarks/conformance/cases/54-bump-ranking/tanstack.ts
+++ b/benchmarks/conformance/cases/54-bump-ranking/tanstack.ts
@@ -56,16 +56,18 @@ const definition = () => {
     ],
     x: {
       scale: scaleUtc,
-      ticks: 7,
-      format: (date) => `${date.getUTCFullYear()}`,
-      label: 'Year',
+      axis: {
+        ticks: { count: 7, format: (date) => `${date.getUTCFullYear()}` },
+        label: 'Year',
+      },
     },
     y: {
       scale: scaleLinear().domain([5.2, 0.8]),
-      ticks: 5,
-      format: (value) => `#${value}`,
       grid: true,
-      label: 'Rank',
+      axis: {
+        ticks: { count: 5, format: (value) => `#${value}` },
+        label: 'Rank',
+      },
     },
     color: {
       domain: includedIndustries,
diff --git a/benchmarks/conformance/cases/55-indexed-multi-line/tanstack.ts b/benchmarks/conformance/cases/55-indexed-multi-line/tanstack.ts
index 7fc8c5b..2d635e4 100644
--- a/benchmarks/conformance/cases/55-indexed-multi-line/tanstack.ts
+++ b/benchmarks/conformance/cases/55-indexed-multi-line/tanstack.ts
@@ -45,15 +45,14 @@ const definition = () => {
         dx: 5,
       }),
     ],
-    x: {
-      scale: scaleUtc,
-      label: 'Month',
-    },
+    x: { scale: scaleUtc, axis: { label: 'Month' } },
     y: {
       scale: scaleLinear,
       grid: true,
-      format: formatIndex,
-      label: 'Change from January 2008',
+      axis: {
+        ticks: { format: formatIndex },
+        label: 'Change from January 2008',
+      },
     },
     color: {
       range: colors,
diff --git a/benchmarks/conformance/cases/56-connected-scatter/tanstack.ts b/benchmarks/conformance/cases/56-connected-scatter/tanstack.ts
index 2890545..27f27d4 100644
--- a/benchmarks/conformance/cases/56-connected-scatter/tanstack.ts
+++ b/benchmarks/conformance/cases/56-connected-scatter/tanstack.ts
@@ -44,12 +44,12 @@ const definition = () =>
     x: {
       scale: scaleLinear,
       grid: true,
-      label: 'Miles driven per person',
+      axis: { label: 'Miles driven per person' },
     },
     y: {
       scale: scaleLinear,
       grid: true,
-      label: 'Cost of gasoline ($ per gallon)',
+      axis: { label: 'Cost of gasoline ($ per gallon)' },
     },
   })
 
diff --git a/benchmarks/conformance/cases/57-scatter-marginal-histograms/tanstack.ts b/benchmarks/conformance/cases/57-scatter-marginal-histograms/tanstack.ts
index 3ecdcd1..308cc8c 100644
--- a/benchmarks/conformance/cases/57-scatter-marginal-histograms/tanstack.ts
+++ b/benchmarks/conformance/cases/57-scatter-marginal-histograms/tanstack.ts
@@ -69,14 +69,15 @@ const definition = (input: ConformanceInput) => {
     x: {
       scale: scaleLinear().domain([170, 245]),
       grid: true,
-      format: visibleFlipperTick,
-      label: 'Flipper length (mm)',
+      axis: {
+        ticks: { format: visibleFlipperTick },
+        label: 'Flipper length (mm)',
+      },
     },
     y: {
       scale: scaleLinear().domain([2500, 7000]),
       grid: true,
-      format: visibleMassTick,
-      label: 'Body mass (g)',
+      axis: { ticks: { format: visibleMassTick }, label: 'Body mass (g)' },
     },
     color: {
       range: colors,
diff --git a/benchmarks/conformance/cases/58-select-extrema/tanstack.ts b/benchmarks/conformance/cases/58-select-extrema/tanstack.ts
index 1d9f93a..fe56a3f 100644
--- a/benchmarks/conformance/cases/58-select-extrema/tanstack.ts
+++ b/benchmarks/conformance/cases/58-select-extrema/tanstack.ts
@@ -41,15 +41,8 @@ const definition = () => {
         dy: (point) => point.dy,
       }),
     ],
-    x: {
-      scale: scaleUtc,
-      label: 'Date',
-    },
-    y: {
-      scale: scaleLinear,
-      grid: true,
-      label: 'Apple close (USD)',
-    },
+    x: { scale: scaleUtc, axis: { label: 'Date' } },
+    y: { scale: scaleLinear, grid: true, axis: { label: 'Apple close (USD)' } },
   })
 }
 
diff --git a/benchmarks/conformance/cases/59-grouped-reducer-bars/tanstack.ts b/benchmarks/conformance/cases/59-grouped-reducer-bars/tanstack.ts
index 8eb27c2..d847c37 100644
--- a/benchmarks/conformance/cases/59-grouped-reducer-bars/tanstack.ts
+++ b/benchmarks/conformance/cases/59-grouped-reducer-bars/tanstack.ts
@@ -43,7 +43,7 @@ const definition = () => {
     y: {
       scale: scaleLinear,
       grid: true,
-      label: 'Mean body mass (g)',
+      axis: { label: 'Mean body mass (g)' },
     },
   })
 }
diff --git a/benchmarks/conformance/cases/60-lag-autocorrelation/tanstack.ts b/benchmarks/conformance/cases/60-lag-autocorrelation/tanstack.ts
index 4fa4be4..2b48755 100644
--- a/benchmarks/conformance/cases/60-lag-autocorrelation/tanstack.ts
+++ b/benchmarks/conformance/cases/60-lag-autocorrelation/tanstack.ts
@@ -43,12 +43,12 @@ const definition = () => {
     x: {
       scale: scaleLinear().domain(closeDomain),
       grid: true,
-      label: 'Previous close (USD)',
+      axis: { label: 'Previous close (USD)' },
     },
     y: {
       scale: scaleLinear().domain(closeDomain),
       grid: true,
-      label: 'Current close (USD)',
+      axis: { label: 'Current close (USD)' },
     },
   })
 }
diff --git a/benchmarks/conformance/cases/61-quantile-ribbon/tanstack.ts b/benchmarks/conformance/cases/61-quantile-ribbon/tanstack.ts
index e593881..99e5420 100644
--- a/benchmarks/conformance/cases/61-quantile-ribbon/tanstack.ts
+++ b/benchmarks/conformance/cases/61-quantile-ribbon/tanstack.ts
@@ -31,14 +31,11 @@ const definition = () => {
         strokeWidth: 2.25,
       }),
     ],
-    x: {
-      scale: scaleUtc,
-      label: 'Month',
-    },
+    x: { scale: scaleUtc, axis: { label: 'Month' } },
     y: {
       scale: scaleLinear,
       grid: true,
-      label: 'Unemployed people by industry (thousands)',
+      axis: { label: 'Unemployed people by industry (thousands)' },
     },
   })
 }
diff --git a/benchmarks/conformance/cases/62-ridgeline-density/tanstack.ts b/benchmarks/conformance/cases/62-ridgeline-density/tanstack.ts
index 6a0325a..bb91653 100644
--- a/benchmarks/conformance/cases/62-ridgeline-density/tanstack.ts
+++ b/benchmarks/conformance/cases/62-ridgeline-density/tanstack.ts
@@ -37,15 +37,19 @@ const definition = (input: ConformanceInput) => {
     ],
     x: {
       scale: scaleLinear().domain([4, 10]),
-      label: 'IMDb rating',
       grid: true,
+      axis: { label: 'IMDb rating' },
     },
     y: {
       scale: scaleLinear().domain([-0.08, 2.86]),
-      ticks: seasons.length,
-      format: (value) => {
-        const season = seasons[Math.round(value)]
-        return season === undefined ? '' : `Season ${season}`
+      axis: {
+        ticks: {
+          count: seasons.length,
+          format: (value) => {
+            const season = seasons[Math.round(value)]
+            return season === undefined ? '' : `Season ${season}`
+          },
+        },
       },
     },
     color: {
diff --git a/benchmarks/conformance/cases/63-violin-distributions/tanstack.ts b/benchmarks/conformance/cases/63-violin-distributions/tanstack.ts
index a64aba9..cf0e8d2 100644
--- a/benchmarks/conformance/cases/63-violin-distributions/tanstack.ts
+++ b/benchmarks/conformance/cases/63-violin-distributions/tanstack.ts
@@ -49,14 +49,14 @@ const definition = (input: ConformanceInput) => {
     ],
     x: {
       scale: scaleLinear().domain([0.5, 3.5]),
-      ticks: violinSpecies.length,
-      format: (value) => violinSpecies[Math.round(value) - 1] ?? '',
-    },
-    y: {
-      scale: scaleLinear,
-      grid: true,
-      label: 'Body mass (g)',
+      axis: {
+        ticks: {
+          count: violinSpecies.length,
+          format: (value) => violinSpecies[Math.round(value) - 1] ?? '',
+        },
+      },
     },
+    y: { scale: scaleLinear, grid: true, axis: { label: 'Body mass (g)' } },
     color: {
       range: colors,
     },
diff --git a/benchmarks/conformance/cases/64-marimekko-mosaic/tanstack.ts b/benchmarks/conformance/cases/64-marimekko-mosaic/tanstack.ts
index f23f115..0f88e4f 100644
--- a/benchmarks/conformance/cases/64-marimekko-mosaic/tanstack.ts
+++ b/benchmarks/conformance/cases/64-marimekko-mosaic/tanstack.ts
@@ -31,13 +31,11 @@ const definition = () => {
     ],
     x: {
       scale: scaleLinear().domain([0, 1]),
-      format: percent,
-      label: 'Share of responses',
+      axis: { ticks: { format: percent }, label: 'Share of responses' },
     },
     y: {
       scale: scaleLinear().domain([0, 1.12]),
-      format: percent,
-      label: 'Within-question share',
+      axis: { ticks: { format: percent }, label: 'Within-question share' },
     },
     color: {
       domain: mosaicResponses,
diff --git a/benchmarks/conformance/cases/65-voronoi-nearest-tooltip/tanstack.ts b/benchmarks/conformance/cases/65-voronoi-nearest-tooltip/tanstack.ts
index a3e47ae..f67dba6 100644
--- a/benchmarks/conformance/cases/65-voronoi-nearest-tooltip/tanstack.ts
+++ b/benchmarks/conformance/cases/65-voronoi-nearest-tooltip/tanstack.ts
@@ -97,15 +97,11 @@ const definition = (rows: readonly CompleteCar[]) =>
         r: 4,
       }),
     ],
-    x: {
-      scale: scaleLinear,
-      grid: true,
-      label: 'Weight (lb)',
-    },
+    x: { scale: scaleLinear, grid: true, axis: { label: 'Weight (lb)' } },
     y: {
       scale: scaleLinear,
       grid: true,
-      label: 'Fuel economy (mpg)',
+      axis: { label: 'Fuel economy (mpg)' },
     },
     color: {
       range: colors,
diff --git a/benchmarks/conformance/cases/70-composed-chart/tanstack.ts b/benchmarks/conformance/cases/70-composed-chart/tanstack.ts
index 769b521..9786991 100644
--- a/benchmarks/conformance/cases/70-composed-chart/tanstack.ts
+++ b/benchmarks/conformance/cases/70-composed-chart/tanstack.ts
@@ -52,13 +52,11 @@ const definition = (input: ConformanceInput) =>
       ],
       x: {
         scale: () => scaleBand<Date>().paddingInner(0.1).paddingOuter(0.05),
-        format: (value) => dateFormat.format(value),
-      },
-      y: {
-        scale: scaleLinear,
-        ticks: 5,
-        grid: true,
+        axis: {
+          ticks: { format: (value: Date) => dateFormat.format(value) },
+        },
       },
+      y: { scale: scaleLinear, grid: true, axis: { ticks: { count: 5 } } },
       margin: { top: 20, right: 20, bottom: 50, left: 80 },
     }
   })
diff --git a/benchmarks/conformance/cases/71-recharts-population-pyramid/tanstack.ts b/benchmarks/conformance/cases/71-recharts-population-pyramid/tanstack.ts
index 4ff9131..d16dee4 100644
--- a/benchmarks/conformance/cases/71-recharts-population-pyramid/tanstack.ts
+++ b/benchmarks/conformance/cases/71-recharts-population-pyramid/tanstack.ts
@@ -26,10 +26,14 @@ const definition = (input: ConformanceInput) => {
     ],
     x: {
       scale: scaleLinear().domain([-80, 80]),
-      ticks: 5,
-      format: (value) => Math.abs(value).toLocaleString('en-US'),
-      label: 'Penguins observed',
       grid: true,
+      axis: {
+        ticks: {
+          count: 5,
+          format: (value) => Math.abs(value).toLocaleString('en-US'),
+        },
+        label: 'Penguins observed',
+      },
     },
     y: {
       scale: () => scaleBand<string>().paddingInner(0.02).paddingOuter(0.01),
diff --git a/benchmarks/conformance/cases/72-recharts-mixed-bars/tanstack.ts b/benchmarks/conformance/cases/72-recharts-mixed-bars/tanstack.ts
index adcc3cb..1666b25 100644
--- a/benchmarks/conformance/cases/72-recharts-mixed-bars/tanstack.ts
+++ b/benchmarks/conformance/cases/72-recharts-mixed-bars/tanstack.ts
@@ -1,5 +1,5 @@
 import { weather } from '@charts-poc/demo-data/weather'
-import { barY, defineChart } from '@tanstack/charts'
+import { barY, defineChart, group } from '@tanstack/charts'
 import { scaleBand, scaleLinear } from 'd3-scale'
 import { tanstackMount } from '../../shared/mount'
 import type { ConformanceInput } from '../../types'
@@ -27,7 +27,7 @@ const definition = (input: ConformanceInput) => {
         y2: 'precipitation',
         z: () => 'stack',
         fill: '#8884d8',
-        groupScale,
+        layout: group({ scale: groupScale }),
         inset: 1,
       }),
       barY(rows, {
@@ -36,7 +36,7 @@ const definition = (input: ConformanceInput) => {
         y2: (row) => row.precipitation + row.wind,
         z: () => 'stack',
         fill: '#82ca9d',
-        groupScale,
+        layout: group({ scale: groupScale }),
         inset: 1,
       }),
       barY(rows, {
@@ -44,19 +44,15 @@ const definition = (input: ConformanceInput) => {
         y: 'temp_max',
         z: () => 'independent',
         fill: '#ffc658',
-        groupScale,
+        layout: group({ scale: groupScale }),
         inset: 1,
       }),
     ],
     x: {
       scale: () => scaleBand<Date>().paddingInner(0.1).paddingOuter(0.05),
-      format: (value) => dateFormat.format(value),
-    },
-    y: {
-      scale: scaleLinear,
-      ticks: 5,
-      grid: true,
+      axis: { ticks: { format: (value) => dateFormat.format(value) } },
     },
+    y: { scale: scaleLinear, grid: true, axis: { ticks: { count: 5 } } },
     margin: { top: 20, right: 20, bottom: 50, left: 80 },
   })
 }
diff --git a/benchmarks/conformance/cases/73-many-point-scatter/tanstack.ts b/benchmarks/conformance/cases/73-many-point-scatter/tanstack.ts
index 753c385..e729a4b 100644
--- a/benchmarks/conformance/cases/73-many-point-scatter/tanstack.ts
+++ b/benchmarks/conformance/cases/73-many-point-scatter/tanstack.ts
@@ -23,16 +23,8 @@ const definition = (input: ConformanceInput) => {
         fillOpacity: 0.72,
       }),
     ],
-    x: {
-      scale: scaleLinear,
-      ticks: 6,
-      grid: true,
-    },
-    y: {
-      scale: scaleLinear,
-      ticks: 6,
-      grid: true,
-    },
+    x: { scale: scaleLinear, grid: true, axis: { ticks: { count: 6 } } },
+    y: { scale: scaleLinear, grid: true, axis: { ticks: { count: 6 } } },
     color: {
       range: colors,
     },
diff --git a/benchmarks/conformance/cases/80-echarts-axis-pointer/tanstack.ts b/benchmarks/conformance/cases/80-echarts-axis-pointer/tanstack.ts
index 0c1c291..0e25153 100644
--- a/benchmarks/conformance/cases/80-echarts-axis-pointer/tanstack.ts
+++ b/benchmarks/conformance/cases/80-echarts-axis-pointer/tanstack.ts
@@ -49,17 +49,20 @@ const definition = (input: ConformanceInput) => {
     ],
     x: {
       scale: scaleUtc,
-      format: (value) =>
-        value.toLocaleDateString(undefined, {
-          month: 'short',
-          timeZone: 'UTC',
-        }),
+      axis: {
+        ticks: {
+          format: (value) =>
+            value.toLocaleDateString(undefined, {
+              month: 'short',
+              timeZone: 'UTC',
+            }),
+        },
+      },
     },
     y: {
       scale: scaleLinear,
-      ticks: 5,
       grid: true,
-      label: 'Unemployed (thousands)',
+      axis: { ticks: { count: 5 }, label: 'Unemployed (thousands)' },
     },
     color: {
       domain: axisPointerIndustries,
diff --git a/benchmarks/conformance/cases/81-recharts-interactive-legend/tanstack.ts b/benchmarks/conformance/cases/81-recharts-interactive-legend/tanstack.ts
index c93b119..146d383 100644
--- a/benchmarks/conformance/cases/81-recharts-interactive-legend/tanstack.ts
+++ b/benchmarks/conformance/cases/81-recharts-interactive-legend/tanstack.ts
@@ -54,17 +54,20 @@ const definition = (input: InteractiveLegendInput) => {
     ],
     x: {
       scale: scaleUtc,
-      format: (date) =>
-        date.toLocaleDateString('en-US', {
-          month: 'short',
-          timeZone: 'UTC',
-        }),
+      axis: {
+        ticks: {
+          format: (date) =>
+            date.toLocaleDateString('en-US', {
+              month: 'short',
+              timeZone: 'UTC',
+            }),
+        },
+      },
     },
     y: {
       scale: scaleLinear().domain(yDomain),
-      ticks: 5,
       grid: true,
-      label: 'Unemployed (thousands)',
+      axis: { ticks: { count: 5 }, label: 'Unemployed (thousands)' },
     },
     color: {
       domain: legendSeries.map((series) => series.id),
diff --git a/benchmarks/conformance/cases/82-chart-table-selection/tanstack.ts b/benchmarks/conformance/cases/82-chart-table-selection/tanstack.ts
index 0e82065..db6e644 100644
--- a/benchmarks/conformance/cases/82-chart-table-selection/tanstack.ts
+++ b/benchmarks/conformance/cases/82-chart-table-selection/tanstack.ts
@@ -48,15 +48,11 @@ const definition = (input: ChartTableInput) => {
           ]
         : []),
     ],
-    x: {
-      scale: scaleLinear,
-      label: 'Flipper length (mm)',
-    },
+    x: { scale: scaleLinear, axis: { label: 'Flipper length (mm)' } },
     y: {
       scale: scaleLinear,
-      ticks: 5,
       grid: true,
-      label: 'Body mass (g)',
+      axis: { ticks: { count: 5 }, label: 'Body mass (g)' },
     },
     margin: { top: 16, right: 24, bottom: 42, left: 62 },
   })
diff --git a/benchmarks/conformance/cases/83-focus-context-window/tanstack.ts b/benchmarks/conformance/cases/83-focus-context-window/tanstack.ts
index dbd1e96..086a42a 100644
--- a/benchmarks/conformance/cases/83-focus-context-window/tanstack.ts
+++ b/benchmarks/conformance/cases/83-focus-context-window/tanstack.ts
@@ -63,13 +63,9 @@ const detailDefinition = (input: DetailInput) => {
     ],
     x: {
       scale: scaleUtc().domain([input.window.start, input.window.end]),
-      label: 'Selected time window',
-    },
-    y: {
-      scale: scaleLinear,
-      grid: true,
-      label: 'Close ($)',
+      axis: { label: 'Selected time window' },
     },
+    y: { scale: scaleLinear, grid: true, axis: { label: 'Close ($)' } },
     margin: detailMargin,
   })
 }
@@ -87,17 +83,18 @@ const overviewDefinition = (input: ConformanceInput) => {
     ],
     x: {
       scale: scaleUtc().domain(fullDomain),
-      ticks: 4,
-      format: (value) =>
-        value.toLocaleDateString(undefined, {
-          month: 'short',
-          timeZone: 'UTC',
-        }),
-    },
-    y: {
-      scale: scaleLinear,
-      guide: false,
+      axis: {
+        ticks: {
+          count: 4,
+          format: (value) =>
+            value.toLocaleDateString(undefined, {
+              month: 'short',
+              timeZone: 'UTC',
+            }),
+        },
+      },
     },
+    y: { scale: scaleLinear, axis: false },
     margin: overviewMargin,
   })
 }
diff --git a/benchmarks/conformance/cases/84-pinned-nested-chart-tooltip/tanstack.ts b/benchmarks/conformance/cases/84-pinned-nested-chart-tooltip/tanstack.ts
index 1b32169..fc070d7 100644
--- a/benchmarks/conformance/cases/84-pinned-nested-chart-tooltip/tanstack.ts
+++ b/benchmarks/conformance/cases/84-pinned-nested-chart-tooltip/tanstack.ts
@@ -58,13 +58,12 @@ const mainDefinition = (input: MainChartInput) => {
     ],
     x: {
       scale: scaleLinear().domain([170, 235]),
-      label: 'Flipper length (mm)',
+      axis: { label: 'Flipper length (mm)' },
     },
     y: {
       scale: scaleLinear().domain([3000, 6000]),
-      ticks: 5,
       grid: true,
-      label: 'Body mass (g)',
+      axis: { ticks: { count: 5 }, label: 'Body mass (g)' },
     },
     margin: { top: 18, right: 24, bottom: 42, left: 68 },
   })
@@ -83,10 +82,7 @@ const miniDefinition = (input: MiniChartInput) =>
     x: {
       scale: () => scaleBand<string>().paddingInner(0.18).paddingOuter(0.08),
     },
-    y: {
-      scale: scaleLinear,
-      guide: false,
-    },
+    y: { scale: scaleLinear, axis: false },
     margin: { top: 6, right: 6, bottom: 24, left: 6 },
   })
 
diff --git a/benchmarks/conformance/cases/85-scrollable-resource-lanes/tanstack.ts b/benchmarks/conformance/cases/85-scrollable-resource-lanes/tanstack.ts
index f6e6ccd..73b280d 100644
--- a/benchmarks/conformance/cases/85-scrollable-resource-lanes/tanstack.ts
+++ b/benchmarks/conformance/cases/85-scrollable-resource-lanes/tanstack.ts
@@ -63,7 +63,7 @@ const definition = (input: ConformanceInput) => {
       x: {
         scale: scaleUtc().domain(resourceTimelineDomain),
         grid: true,
-        ticks: Math.max(6, Math.floor(width / 84)),
+        axis: { ticks: { count: Math.max(6, Math.floor(width / 84)) } },
       },
       y: {
         scale: scaleBand<string>()
@@ -71,7 +71,7 @@ const definition = (input: ConformanceInput) => {
           .paddingInner(0.08)
           .paddingOuter(0.04),
         grid: false,
-        guide: false,
+        axis: false,
       },
       color: {
         domain: timelineStatuses,
diff --git a/benchmarks/conformance/cases/86-streaming-window-preservation/tanstack.ts b/benchmarks/conformance/cases/86-streaming-window-preservation/tanstack.ts
index 48a1d7f..4a5d1f0 100644
--- a/benchmarks/conformance/cases/86-streaming-window-preservation/tanstack.ts
+++ b/benchmarks/conformance/cases/86-streaming-window-preservation/tanstack.ts
@@ -60,24 +60,27 @@ const definition = (input: StreamingChartInput) => {
     ],
     x: {
       scale: scaleUtc().domain(input.viewport),
-      label:
-        input.viewportMode === 'locked'
-          ? 'Locked viewport'
-          : input.viewportMode === 'latest'
-            ? 'Following latest'
-            : 'All samples',
-      format: (value) =>
-        value.toLocaleDateString(undefined, {
-          month: 'short',
-          day: 'numeric',
-          timeZone: 'UTC',
-        }),
+      axis: {
+        ticks: {
+          format: (value) =>
+            value.toLocaleDateString(undefined, {
+              month: 'short',
+              day: 'numeric',
+              timeZone: 'UTC',
+            }),
+        },
+        label:
+          input.viewportMode === 'locked'
+            ? 'Locked viewport'
+            : input.viewportMode === 'latest'
+              ? 'Following latest'
+              : 'All samples',
+      },
     },
     y: {
       scale: scaleLinear,
-      ticks: 5,
       grid: true,
-      label: 'Downloads',
+      axis: { ticks: { count: 5 }, label: 'Downloads' },
     },
     margin: { top: 18, right: 24, bottom: 44, left: 58 },
   })
diff --git a/benchmarks/conformance/cases/87-echarts-synchronized-cursors/tanstack.ts b/benchmarks/conformance/cases/87-echarts-synchronized-cursors/tanstack.ts
index 1a695e2..c2a0af4 100644
--- a/benchmarks/conformance/cases/87-echarts-synchronized-cursors/tanstack.ts
+++ b/benchmarks/conformance/cases/87-echarts-synchronized-cursors/tanstack.ts
@@ -74,18 +74,23 @@ const definition = (input: SynchronizedViewInput) => {
     ],
     x: {
       scale: scaleUtc,
-      format: (value) =>
-        value.toLocaleDateString(undefined, {
-          month: 'short',
-          timeZone: 'UTC',
-        }),
+      axis: {
+        ticks: {
+          format: (value) =>
+            value.toLocaleDateString(undefined, {
+              month: 'short',
+              timeZone: 'UTC',
+            }),
+        },
+      },
     },
     y: {
       scale: scaleLinear().domain(synchronizedCursorYDomains[input.view]),
-      ticks: 4,
       grid: true,
-      label: input.view === 'current' ? '2020 travelers' : '2019 travelers',
-      format: formatTravelers,
+      axis: {
+        ticks: { count: 4, format: formatTravelers },
+        label: input.view === 'current' ? '2020 travelers' : '2019 travelers',
+      },
     },
     margin: {
       top: 16,
diff --git a/benchmarks/conformance/cases/88-echarts-free-cursor/tanstack.ts b/benchmarks/conformance/cases/88-echarts-free-cursor/tanstack.ts
index bc75097..d99ecbf 100644
--- a/benchmarks/conformance/cases/88-echarts-free-cursor/tanstack.ts
+++ b/benchmarks/conformance/cases/88-echarts-free-cursor/tanstack.ts
@@ -66,15 +66,11 @@ const definition = (input: ConformanceInput) => {
         strokeWidth: 1,
       }),
     ],
-    x: {
-      scale: configuredXScale,
-      label: 'Horsepower',
-    },
+    x: { scale: configuredXScale, axis: { label: 'Horsepower' } },
     y: {
       scale: configuredYScale,
-      ticks: 7,
       grid: true,
-      label: 'Fuel economy (mpg)',
+      axis: { ticks: { count: 7 }, label: 'Fuel economy (mpg)' },
     },
     margin: {
       top: 22,
diff --git a/benchmarks/conformance/cases/89-brush-range-selection/tanstack.ts b/benchmarks/conformance/cases/89-brush-range-selection/tanstack.ts
index 3ec2d45..d5b3e9d 100644
--- a/benchmarks/conformance/cases/89-brush-range-selection/tanstack.ts
+++ b/benchmarks/conformance/cases/89-brush-range-selection/tanstack.ts
@@ -68,14 +68,15 @@ const definition = (input: ConformanceInput) => {
     ],
     x: {
       scale: brushScale,
-      format: (value) => brushMonthFormatter.format(value),
-      label: 'Month',
+      axis: {
+        ticks: { format: (value) => brushMonthFormatter.format(value) },
+        label: 'Month',
+      },
     },
     y: {
       scale: scaleLinear,
-      ticks: 4,
       grid: true,
-      label: 'AAPL close ($)',
+      axis: { ticks: { count: 4 }, label: 'AAPL close ($)' },
     },
     margin: { top: 52, right: 24, bottom: 44, left: 58 },
   })
diff --git a/benchmarks/conformance/cases/90-zoomable-time-window/tanstack.ts b/benchmarks/conformance/cases/90-zoomable-time-window/tanstack.ts
index 3049ea1..cf4e08b 100644
--- a/benchmarks/conformance/cases/90-zoomable-time-window/tanstack.ts
+++ b/benchmarks/conformance/cases/90-zoomable-time-window/tanstack.ts
@@ -63,19 +63,22 @@ const definition = (input: ZoomChartInput) => {
     ],
     x: {
       scale: scaleForWindow(input.window),
-      label: 'Date',
-      format: (value) =>
-        value.toLocaleDateString(undefined, {
-          month: 'short',
-          day: 'numeric',
-          timeZone: 'UTC',
-        }),
+      axis: {
+        ticks: {
+          format: (value) =>
+            value.toLocaleDateString(undefined, {
+              month: 'short',
+              day: 'numeric',
+              timeZone: 'UTC',
+            }),
+        },
+        label: 'Date',
+      },
     },
     y: {
       scale: scaleLinear,
-      ticks: 4,
       grid: true,
-      label: 'AAPL close ($)',
+      axis: { ticks: { count: 4 }, label: 'AAPL close ($)' },
     },
     margin: { top: 56, right: 24, bottom: 44, left: 58 },
   })
diff --git a/benchmarks/conformance/cases/91-timeline-playback-scrubber/tanstack.ts b/benchmarks/conformance/cases/91-timeline-playback-scrubber/tanstack.ts
index 93a24c8..88bbe29 100644
--- a/benchmarks/conformance/cases/91-timeline-playback-scrubber/tanstack.ts
+++ b/benchmarks/conformance/cases/91-timeline-playback-scrubber/tanstack.ts
@@ -54,18 +54,21 @@ const definition = (input: ConformanceInput) => {
     ],
     x: {
       scale: scaleUtc,
-      format: (value) =>
-        value.toLocaleDateString(undefined, {
-          month: 'short',
-          day: 'numeric',
-          timeZone: 'UTC',
-        }),
+      axis: {
+        ticks: {
+          format: (value) =>
+            value.toLocaleDateString(undefined, {
+              month: 'short',
+              day: 'numeric',
+              timeZone: 'UTC',
+            }),
+        },
+      },
     },
     y: {
       scale: scaleLinear,
-      ticks: 4,
       grid: true,
-      label: 'AAPL close ($)',
+      axis: { ticks: { count: 4 }, label: 'AAPL close ($)' },
     },
     margin,
   })
diff --git a/benchmarks/conformance/cases/92-editable-event-range/tanstack.ts b/benchmarks/conformance/cases/92-editable-event-range/tanstack.ts
index 824a905..2920a54 100644
--- a/benchmarks/conformance/cases/92-editable-event-range/tanstack.ts
+++ b/benchmarks/conformance/cases/92-editable-event-range/tanstack.ts
@@ -97,12 +97,16 @@ const definition = (input: EditableChartInput) => {
       x: {
         scale: scaleUtc().domain(editableDomain),
         grid: true,
-        format: (value) =>
-          value.toLocaleDateString(undefined, {
-            month: 'short',
-            day: 'numeric',
-            timeZone: 'UTC',
-          }),
+        axis: {
+          ticks: {
+            format: (value: Date) =>
+              value.toLocaleDateString(undefined, {
+                month: 'short',
+                day: 'numeric',
+                timeZone: 'UTC',
+              }),
+          },
+        },
       },
       y: {
         scale: scaleBand<string>()
diff --git a/benchmarks/conformance/cases/bar-grouped/tanstack.ts b/benchmarks/conformance/cases/bar-grouped/tanstack.ts
index eeca544..e5c8c51 100644
--- a/benchmarks/conformance/cases/bar-grouped/tanstack.ts
+++ b/benchmarks/conformance/cases/bar-grouped/tanstack.ts
@@ -1,5 +1,5 @@
 import { penguins } from '@charts-poc/demo-data/penguins'
-import { barY, colorLegend, defineChart } from '@tanstack/charts'
+import { barY, colorLegend, defineChart, group } from '@tanstack/charts'
 import { rollups } from 'd3-array'
 import { scaleBand, scaleLinear } from 'd3-scale'
 import { tanstackMount } from '../../shared/mount'
@@ -27,19 +27,20 @@ const definition = (input: ConformanceInput) =>
           x: 'species',
           y: 'count',
           color: 'sex',
-          groupScale: scaleBand<string>().domain(sexDomain).paddingInner(0.08),
+          layout: group({
+            scale: scaleBand<string>().domain(sexDomain).paddingInner(0.08),
+          }),
           inset: 1,
         }),
       ],
       x: {
         scale: () => scaleBand<string>().paddingInner(0.14).paddingOuter(0.06),
-        tickRotate: width < 640 ? -32 : 0,
+        axis: { tickLabels: { rotate: width < 640 ? -32 : 0 } },
       },
       y: {
         scale: scaleLinear,
-        label: 'Penguins',
-        ticks: 5,
         grid: true,
+        axis: { ticks: { count: 5 }, label: 'Penguins' },
       },
       color: {
         range: sexColors,
diff --git a/benchmarks/conformance/cases/bar-horizontal-ranking/tanstack.ts b/benchmarks/conformance/cases/bar-horizontal-ranking/tanstack.ts
index ce5c454..2506517 100644
--- a/benchmarks/conformance/cases/bar-horizontal-ranking/tanstack.ts
+++ b/benchmarks/conformance/cases/bar-horizontal-ranking/tanstack.ts
@@ -21,9 +21,8 @@ const definition = (input: ConformanceInput) => {
     ],
     x: {
       scale: scaleLinear,
-      label: '2015 population',
-      ticks: 5,
       grid: true,
+      axis: { ticks: { count: 5 }, label: '2015 population' },
     },
     y: {
       scale: () => scaleBand<string>().paddingInner(0.1).paddingOuter(0.05),
diff --git a/benchmarks/conformance/cases/bar-stacked/case.json b/benchmarks/conformance/cases/bar-stacked/case.json
index 3621730..1b0178c 100644
--- a/benchmarks/conformance/cases/bar-stacked/case.json
+++ b/benchmarks/conformance/cases/bar-stacked/case.json
@@ -8,16 +8,17 @@
   "support": "composed",
   "features": [
     "stacked bars",
-    "D3 stack intervals",
+    "stack transform",
     "categorical color inference",
     "monthly time intervals",
-    "explicit lower and upper bounds"
+    "implicit lower and upper bounds"
   ],
   "geometry": [
     {
-      "role": "rect",
+      "role": "bar",
       "count": 69,
-      "maxCount": 72
+      "maxCount": 72,
+      "rendererRoles": { "observable-plot": "rect", "tanstack": "bar" }
     },
     {
       "role": "rule",
diff --git a/benchmarks/conformance/cases/bar-stacked/tanstack.ts b/benchmarks/conformance/cases/bar-stacked/tanstack.ts
index 8eebc81..df2d3ee 100644
--- a/benchmarks/conformance/cases/bar-stacked/tanstack.ts
+++ b/benchmarks/conformance/cases/bar-stacked/tanstack.ts
@@ -1,48 +1,45 @@
 import { crimeanWar } from '@charts-poc/demo-data/crimean-war'
-import { defineChart, rect, ruleY } from '@tanstack/charts'
+import { barY, defineChart, ruleY, stackY } from '@tanstack/charts'
 import { scaleLinear, scaleUtc } from 'd3-scale'
-import { stack, stackOrderReverse } from 'd3-shape'
 import { tanstackMount } from '../../shared/mount'
-import type { CrimeanWarRow } from '@charts-poc/demo-data/crimean-war'
 import type { ConformanceInput } from '../../types'
 
 const causes = ['disease', 'wounds', 'other'] as const
 const causeColors = ['#4269d0', '#ff725c', '#efb118']
-type Cause = (typeof causes)[number]
-
-interface MortalityInterval {
-  date: Date
-  nextMonth: Date
-  cause: Cause
-  deaths: number
-  y1: number
-  y2: number
-}
 
 const definition = (input: ConformanceInput) => {
-  const intervals = stackRows(crimeanWar.slice(input.revision))
+  const rows = crimeanWar.slice(input.revision).flatMap((row) =>
+    causes.map((cause) => ({
+      date: row.date,
+      cause,
+      deaths: row[cause],
+    })),
+  )
 
   return defineChart({
     marks: [
-      rect(intervals, {
-        x1: 'date',
-        x2: 'nextMonth',
-        y1: 'y1',
-        y2: 'y2',
-        color: 'cause',
-      }),
+      barY(
+        rows,
+        stackY(
+          { order: [...causes].reverse() },
+          {
+            x: 'date',
+            y: 'deaths',
+            z: 'cause',
+            color: 'cause',
+          },
+        ),
+      ),
       ruleY([0]),
     ],
     x: {
       scale: scaleUtc,
-      ticks: 6,
-      format: (value) => month.format(value),
+      axis: { ticks: { count: 6, format: (value) => month.format(value) } },
     },
     y: {
       scale: scaleLinear,
-      label: 'Deaths',
-      ticks: 5,
       grid: true,
+      axis: { ticks: { count: 5 }, label: 'Deaths' },
     },
     color: { domain: causes, range: causeColors },
   })
@@ -54,26 +51,3 @@ const month = new Intl.DateTimeFormat('en-US', {
   month: 'short',
   timeZone: 'UTC',
 })
-
-function stackRows(rows: readonly CrimeanWarRow[]): MortalityInterval[] {
-  return stack<CrimeanWarRow, Cause>()
-    .keys(causes)
-    .order(stackOrderReverse)
-    .value((row, cause) => row[cause])(rows)
-    .flatMap((layer) =>
-      layer.map((point) => ({
-        date: point.data.date,
-        nextMonth: new Date(
-          Date.UTC(
-            point.data.date.getUTCFullYear(),
-            point.data.date.getUTCMonth() + 1,
-            1,
-          ),
-        ),
-        cause: layer.key,
-        deaths: point[1] - point[0],
-        y1: point[0],
-        y2: point[1],
-      })),
-    )
-}
diff --git a/benchmarks/conformance/cases/bar-vertical-sorted/tanstack.ts b/benchmarks/conformance/cases/bar-vertical-sorted/tanstack.ts
index b230cab..89b5cd3 100644
--- a/benchmarks/conformance/cases/bar-vertical-sorted/tanstack.ts
+++ b/benchmarks/conformance/cases/bar-vertical-sorted/tanstack.ts
@@ -22,14 +22,18 @@ const definition = (_input: ConformanceInput) =>
       ],
       x: {
         scale: () => scaleBand<string>().paddingInner(0.1).paddingOuter(0.05),
-        tickRotate: width < 560 ? -32 : 0,
+        axis: { tickLabels: { rotate: width < 560 ? -32 : 0 } },
       },
       y: {
         scale: scaleLinear,
-        label: 'Frequency',
-        ticks: 5,
         grid: true,
-        format: (value) => percent.format(value),
+        axis: {
+          ticks: {
+            count: 5,
+            format: (value: number) => percent.format(value),
+          },
+          label: 'Frequency',
+        },
       },
     }
   })
diff --git a/benchmarks/conformance/cases/facets-anscombe/tanstack.ts b/benchmarks/conformance/cases/facets-anscombe/tanstack.ts
index 053219c..eb7e418 100644
--- a/benchmarks/conformance/cases/facets-anscombe/tanstack.ts
+++ b/benchmarks/conformance/cases/facets-anscombe/tanstack.ts
@@ -24,12 +24,12 @@ const definition = (_input: ConformanceInput) =>
           x: {
             scale: scaleLinear().domain([3, 20]),
             grid: true,
-            ticks: 5,
+            axis: { ticks: { count: 5 } },
           },
           y: {
             scale: scaleLinear().domain([2, 14]),
             grid: true,
-            ticks: 4,
+            axis: { ticks: { count: 4 } },
           },
         }),
       }),
diff --git a/benchmarks/conformance/cases/heatmap-labeled/tanstack.ts b/benchmarks/conformance/cases/heatmap-labeled/tanstack.ts
index 13c981c..35e28ff 100644
--- a/benchmarks/conformance/cases/heatmap-labeled/tanstack.ts
+++ b/benchmarks/conformance/cases/heatmap-labeled/tanstack.ts
@@ -48,14 +48,14 @@ const definition = (_input: ConformanceInput) =>
         .domain(episodeDomain)
         .paddingInner(0.04)
         .paddingOuter(0.02),
-      label: 'Episode',
+      axis: { label: 'Episode' },
     },
     y: {
       scale: scaleBand<number>()
         .domain(seasonDomain)
         .paddingInner(0.04)
         .paddingOuter(0.02),
-      label: 'Season',
+      axis: { label: 'Season' },
     },
     color: {
       scale: () => scaleLinear<string>().range(ratingColors),
diff --git a/benchmarks/conformance/cases/histogram/tanstack.ts b/benchmarks/conformance/cases/histogram/tanstack.ts
index f419dfd..efa79d2 100644
--- a/benchmarks/conformance/cases/histogram/tanstack.ts
+++ b/benchmarks/conformance/cases/histogram/tanstack.ts
@@ -54,13 +54,9 @@ const definition = (input: ConformanceInput) => {
     x: {
       scale: scaleLinear,
       grid: true,
-      label: 'Fuel economy (mpg)',
-    },
-    y: {
-      scale: scaleLinear,
-      grid: true,
-      label: 'Count',
+      axis: { label: 'Fuel economy (mpg)' },
     },
+    y: { scale: scaleLinear, grid: true, axis: { label: 'Count' } },
   })
 }
 
diff --git a/benchmarks/conformance/cases/scatter-bubble/tanstack.ts b/benchmarks/conformance/cases/scatter-bubble/tanstack.ts
index 97e37e8..f3373c0 100644
--- a/benchmarks/conformance/cases/scatter-bubble/tanstack.ts
+++ b/benchmarks/conformance/cases/scatter-bubble/tanstack.ts
@@ -34,16 +34,8 @@ const definition = (input: ConformanceInput) => {
         strokeWidth: 0.75,
       }),
     ],
-    x: {
-      scale: scaleLinear,
-      grid: true,
-      label: 'Bill length (mm)',
-    },
-    y: {
-      scale: scaleLinear,
-      grid: true,
-      label: 'Bill depth (mm)',
-    },
+    x: { scale: scaleLinear, grid: true, axis: { label: 'Bill length (mm)' } },
+    y: { scale: scaleLinear, grid: true, axis: { label: 'Bill depth (mm)' } },
     color: {
       range: groupRange,
       legend: colorLegend({ label: 'Species' }),
diff --git a/benchmarks/rendering.ts b/benchmarks/rendering.ts
index e2c4adc..9be4607 100644
--- a/benchmarks/rendering.ts
+++ b/benchmarks/rendering.ts
@@ -121,13 +121,13 @@ const nativeDownloads = defineChart({
   ],
   x: {
     scale: scaleUtc().domain(downloadData.map((point) => point.date)),
-    ticks: 6,
+    axis: { ticks: { count: 6 } },
   },
   y: {
     scale: scaleLinear()
       .domain([0, max(downloadData, (point) => point.downloads) ?? 1])
       .nice(5),
-    ticks: 5,
+    axis: { ticks: { count: 5 } },
   },
 })
 const largeData = Array.from({ length: 10_000 }, (_, index) => ({
@@ -296,11 +296,11 @@ const createNativeDynamicDefinition = (input: {
       ],
       x: {
         scale: scaleUtc().domain(input.points.map((point) => point.date)),
-        ticks: 6,
+        axis: { ticks: { count: 6 } },
       },
       y: {
         scale: scaleLinear().domain([0, maximum]).nice(5),
-        ticks: 5,
+        axis: { ticks: { count: 5 } },
       },
     }
   })
diff --git a/docs/comparison.md b/docs/comparison.md
index 81f1fb1..a928cfc 100644
--- a/docs/comparison.md
+++ b/docs/comparison.md
@@ -12,14 +12,14 @@ evidence without turning untested behavior into a checkmark.
 
 | Library                                                                                | Package              | Measured source     |
 | -------------------------------------------------------------------------------------- | -------------------- | ------------------- |
-| [TanStack Charts](./overview.md)                                                       | `@tanstack/charts`   | workspace `5c36a38` |
+| [TanStack Charts](./overview.md)                                                       | `@tanstack/charts`   | workspace `093f81c` |
 | [Chart.js](https://www.chartjs.org/docs/latest/)                                       | `chart.js`           | npm `4.5.1`         |
 | [Apache ECharts](https://echarts.apache.org/handbook/en/best-practices/canvas-vs-svg/) | `echarts`            | npm `6.1.0`         |
 | [Recharts](https://recharts.github.io/en-US/)                                          | `recharts`           | npm `3.10.1`        |
 | [Observable Plot](https://observablehq.com/plot/features/plots)                        | `@observablehq/plot` | npm `0.6.17`        |
 
 The competitor versions are exact package pins, not latest versions inferred
-at page render time. The measured TanStack workspace revision is `5c36a38`.
+at page render time. The measured TanStack workspace revision is `093f81c`.
 
 ## Capability matrix
 
@@ -59,7 +59,7 @@ that lane externalizes React and React DOM.
 
 | Library         | Full cold-page gzip | React externalized |
 | --------------- | ------------------: | -----------------: |
-| TanStack Charts |     24.20–28.22 KiB |                  — |
+| TanStack Charts |     26.12–31.04 KiB |                  — |
 | Chart.js        |     44.70–58.21 KiB |                  — |
 | Apache ECharts  |   153.10–173.18 KiB |                  — |
 | Recharts        |   153.08–168.27 KiB |   94.96–109.96 KiB |
diff --git a/docs/concepts/chart-definitions.md b/docs/concepts/chart-definitions.md
index 462a1a1..f22c872 100644
--- a/docs/concepts/chart-definitions.md
+++ b/docs/concepts/chart-definitions.md
@@ -38,8 +38,8 @@ const letterFrequencies = defineChart({
   y: {
     scale: scaleLinear,
     nice: true,
-    label: 'Frequency',
     grid: true,
+    axis: { label: 'Frequency' },
   },
 })
 ```
@@ -57,7 +57,7 @@ const productRanking = defineChart({
     x: {
       scale: scaleLinear,
       nice: true,
-      ticks: width < 480 ? 4 : 7,
+      axis: { ticks: { count: width < 480 ? 4 : 7 } },
     },
     y: {
       scale: () => scaleBand<string>().padding(0.1),
@@ -106,7 +106,7 @@ function ProductRanking({ rows, metric }: Props) {
         x: {
           scale: scaleLinear,
           nice: true,
-          ticks: width < 480 ? 4 : 7,
+          axis: { ticks: { count: width < 480 ? 4 : 7 } },
         },
         y: {
           scale: () => scaleBand<string>().padding(0.1),
diff --git a/docs/concepts/data-and-channels.md b/docs/concepts/data-and-channels.md
index b8370be..f5ca377 100644
--- a/docs/concepts/data-and-channels.md
+++ b/docs/concepts/data-and-channels.md
@@ -89,9 +89,9 @@ also supplies that path grouping. When both are present, `z` wins for geometry
 and interaction grouping while `color` remains an independent color-scale
 value. Omitting `color` reuses `z` for color.
 
-On bars, neither channel implicitly invents grouped-bar geometry. Supply a D3
-`groupScale` when multiple bars must occupy sub-bands within one category.
-The scale uses `z` when present, otherwise `color`. See
+Bars stack their length channel by default. Use `layout: group()` when multiple
+bars must occupy sub-bands within one category. Grouping uses `z` when present,
+otherwise a discrete `color` channel may infer series identity. See
 [Bars and Rankings](../examples/bars-and-rankings.md).
 
 ## Color channels and constants
@@ -365,13 +365,13 @@ const bubbleChart = defineChart({
   ],
   x: {
     scale: scaleLinear,
-    label: 'Bill length (mm)',
     grid: true,
+    axis: { label: 'Bill length (mm)' },
   },
   y: {
     scale: scaleLinear,
-    label: 'Bill depth (mm)',
     grid: true,
+    axis: { label: 'Bill depth (mm)' },
   },
   color: {
     scale: scaleOrdinal(species, ['#2563eb', '#f97316', '#10b981']),
diff --git a/docs/concepts/grammar-of-graphics.md b/docs/concepts/grammar-of-graphics.md
index badabd4..46ad2f6 100644
--- a/docs/concepts/grammar-of-graphics.md
+++ b/docs/concepts/grammar-of-graphics.md
@@ -137,13 +137,13 @@ const axes = {
   x: {
     scale: scaleUtc,
     nice: true,
-    label: 'Month',
+    axis: { label: 'Month' },
   },
   y: {
     scale: scaleLinear,
     nice: true,
-    label: 'Revenue',
     grid: true,
+    axis: { label: 'Revenue' },
   },
 }
 ```
@@ -159,10 +159,14 @@ Axis guide options live next to their scale:
 ```ts
 const y = {
   scale: revenueScale,
-  label: 'Monthly revenue',
-  format: (value: number) => `$${Math.round(value / 1_000)}k`,
-  ticks: 5,
   grid: true,
+  axis: {
+    label: 'Monthly revenue',
+    ticks: {
+      count: 5,
+      format: (value: number) => `$${Math.round(value / 1_000)}k`,
+    },
+  },
 }
 ```
 
@@ -272,7 +276,7 @@ const composedChart = defineChart({
   ],
   x: {
     scale: () => scaleBand<Date>().padding(0.12),
-    label: 'Date',
+    axis: { label: 'Date' },
   },
   y: {
     scale: scaleLinear,
diff --git a/docs/concepts/layout-axes-and-coordinates.md b/docs/concepts/layout-axes-and-coordinates.md
index 018bfa3..f5cd51d 100644
--- a/docs/concepts/layout-axes-and-coordinates.md
+++ b/docs/concepts/layout-axes-and-coordinates.md
@@ -63,12 +63,14 @@ const chart = defineChart(({ width }) => ({
   marks: [lineY(rows, { x: 'date', y: 'value' })],
   x: {
     scale: xScale,
-    ticks: width < 420 ? 4 : 8,
-    tickRotate: width < 520 ? -30 : undefined,
+    axis: {
+      ticks: { count: width < 420 ? 4 : 8 },
+      tickLabels: { rotate: width < 520 ? -30 : undefined },
+    },
   },
   y: {
     scale: yScale,
-    label: width < 480 ? undefined : 'Weekly downloads',
+    axis: { label: width < 480 ? undefined : 'Weekly downloads' },
   },
 }))
 ```
@@ -124,10 +126,9 @@ inherited font and relayout after web fonts load.
 
 Advanced renderers can supply `measureText`. Its metrics include painted x and y offsets relative to the requested anchor and baseline, not only width and height. This is necessary for correct containment of rotated and anchored labels.
 
-Automatic margins contain chart-owned guides and Cartesian `text` marks; they do
-not avoid collisions between adjacent labels. Use `ticks` to reduce density,
-`tickRotate` when guide labels overlap, and explicit text placement when data
-labels overlap one another.
+Automatic margins contain chart-owned guides and Cartesian `text` marks. Axis
+tick labels are thinned against their measured, optionally rotated bounds.
+Explicit text placement remains responsible for data-label collisions.
 
 ## Axis guide options
 
@@ -136,34 +137,61 @@ Each axis combines a required scale factory or instance with optional guide cont
 ```ts
 const x = {
   scale: xScale,
-  label: 'Month',
-  ticks: 6,
-  format: (date: Date) => monthFormatter.format(date),
-  tickRotate: -30,
-  labelOffset: 12,
   grid: false,
+  axis: {
+    ticks: {
+      count: 6,
+      format: (date: Date) => monthFormatter.format(date),
+    },
+    tickLabels: { rotate: -30 },
+    label: { text: 'Month', offset: 12 },
+  },
 }
 ```
 
-| Option        | Purpose                                            |
-| ------------- | -------------------------------------------------- |
-| `guide`       | Show or hide this axis, its title, ticks, and grid |
-| `ticks`       | Suggested tick count                               |
-| `format`      | Format a typed tick value                          |
-| `grid`        | Draw grid lines at ticks                           |
-| `label`       | Axis title                                         |
-| `reverse`     | Reverse the responsive range                       |
-| `tickRotate`  | Rotate tick labels in degrees                      |
-| `labelOffset` | Add distance between the axis and title            |
+| Option            | Purpose                                              |
+| ----------------- | ---------------------------------------------------- |
+| `axis`            | Configure the axis or hide it with `false`           |
+| `axis.line`       | Show or hide the baseline                            |
+| `axis.ticks`      | Configure candidates, stubs, padding, and formatting |
+| `axis.tickLabels` | Configure label rotation and collision thinning      |
+| `axis.label`      | Configure the axis title and offset                  |
+| `grid`            | Draw grid lines at semantic candidates               |
+| `reverse`         | Reverse the responsive range                         |
 
 The y grid defaults to visible and the x grid defaults to hidden when `grid` is omitted.
 
+Candidate generation and label layout are separate. Choose at most one of
+`axis.ticks.count`, `axis.ticks.spacing`, and `axis.ticks.values`. Grid lines
+and tick stubs use the generated candidates; label thinning does not remove
+either. `axis.ticks.size: 0` removes stubs while retaining labels and grid
+lines.
+
+Rotation and thinning are independent. Thinning is enabled by default and
+uses measured rotated bounds:
+
+```ts
+const x = {
+  scale: xScale,
+  axis: {
+    ticks: { spacing: 80 },
+    tickLabels: {
+      rotate: -35,
+      thin: { minGap: 8, priority: 'ends', keep: importantDates },
+    },
+  },
+}
+```
+
+Hard-kept labels are retained even when they collide. Values absent from the
+candidate set add labels only.
+
 Hide one guide without removing its scale:
 
 ```ts
 const x = {
   scale: xScale,
-  guide: false,
+  axis: false,
 }
 ```
 
@@ -247,7 +275,8 @@ barX(rows, {
 
 The D3 band scale’s `paddingInner` and `paddingOuter` determine category spacing. `inset` removes additional pixels from both bar edges after layout.
 
-For side-by-side bars, `groupScale` subdivides the primary bandwidth. See [Bars and Rankings](../examples/bars-and-rankings.md).
+For side-by-side bars, `layout: group()` subdivides the primary bandwidth. See
+[Bars and Rankings](../examples/bars-and-rankings.md).
 
 ## Scene and pointer coordinates
 
@@ -327,9 +356,11 @@ const rankingChart = defineChart({
   x: {
     scale: scaleLinear,
     nice: true,
-    label: '2015 population',
-    format: (value) => compact.format(value),
     grid: true,
+    axis: {
+      label: '2015 population',
+      ticks: { format: (value) => compact.format(value) },
+    },
   },
   y: {
     scale: () => scaleBand<string>().paddingInner(0.12).paddingOuter(0.06),
diff --git a/docs/concepts/marks-and-layering.md b/docs/concepts/marks-and-layering.md
index daa3203..15bf86d 100644
--- a/docs/concepts/marks-and-layering.md
+++ b/docs/concepts/marks-and-layering.md
@@ -92,11 +92,10 @@ rule. When `z` is omitted on a connected line or area, an authored `color`
 channel supplies the path groups as well as color semantics. Explicit `z`
 always wins when the two fields differ.
 
-Bars use the primary band by default. Supply a configured D3 `groupScale` for
-side-by-side bars; it groups by `z` when present and otherwise by `color`.
-When rows should stack, prepare explicit `y1` and `y2` or `x1` and `x2`
-intervals before the mark. TanStack Charts does not guess whether bars should
-dodge, stack, or overlap.
+Bars stack their single quantitative channel by default. Use
+`layout: group({ scale })` for side-by-side bars; it groups by `z` when present
+and otherwise by discrete `color`. Explicit `y1`/`y2` or `x1`/`x2` channels
+opt out of implicit stacking and preserve authored intervals.
 
 ## Line and area gaps
 
@@ -239,13 +238,13 @@ const temperatureChart = defineChart({
   ],
   x: {
     scale: scaleUtc,
-    label: 'Day',
+    axis: { label: 'Day' },
   },
   y: {
     scale: scaleLinear,
     nice: true,
-    label: 'Temperature (°F)',
     grid: true,
+    axis: { label: 'Temperature (°F)' },
   },
 })
 ```
diff --git a/docs/concepts/scales-and-d3.md b/docs/concepts/scales-and-d3.md
index 9230802..bffd6f9 100644
--- a/docs/concepts/scales-and-d3.md
+++ b/docs/concepts/scales-and-d3.md
@@ -168,7 +168,9 @@ const categoryScale = () =>
 
 TanStack Charts applies the plot range, reads the scale bandwidth, and treats the mapped value as the center of the band for mark and interaction coordinates. Bars use the primary bandwidth by default.
 
-For grouped bars, pass a second band scale as the mark’s `groupScale`. Its range is assigned within the primary band. Grouping is explicit because `z` alone cannot decide whether a chart should overlap, stack, dodge, or only color its rows.
+For grouped bars, use `layout: group({ scale })`. The supplied band scale is
+copied and its range is assigned within the primary band. Grouping is explicit;
+the default length-channel geometry is stacked.
 
 ## Color scales
 
@@ -348,13 +350,13 @@ const logChart = defineChart({
   ],
   x: {
     scale: scaleLog().domain([200, 30_000]),
-    label: 'Class size',
     grid: true,
+    axis: { label: 'Class size' },
   },
   y: {
     scale: scaleLinear,
-    label: 'Hierarchy depth',
     grid: true,
+    axis: { label: 'Hierarchy depth' },
   },
 })
 ```
diff --git a/docs/examples/interactive-charts.md b/docs/examples/interactive-charts.md
index 5852347..64aca10 100644
--- a/docs/examples/interactive-charts.md
+++ b/docs/examples/interactive-charts.md
@@ -16,6 +16,7 @@ selection, or product record.
 | Reader task                                                  | Start with                                     |
 | ------------------------------------------------------------ | ---------------------------------------------- |
 | Inspect one point or a same-x group                          | Native chart focus and tooltip                 |
+| Paint a band, rule, or mark only for the active datum/group  | `whenFocused` around an ordinary mark          |
 | Keep rich framework detail open, including another chart     | Pinned composed tooltip body                   |
 | Navigate a wide schedule without changing its semantic scale | Native horizontal scrolling                    |
 | Crop and pan a continuous domain                             | Controlled zoom and viewport state             |
diff --git a/docs/examples/stacked-and-composition.md b/docs/examples/stacked-and-composition.md
index a287d10..b803bc2 100644
--- a/docs/examples/stacked-and-composition.md
+++ b/docs/examples/stacked-and-composition.md
@@ -24,16 +24,25 @@ values remain available elsewhere.
 | Which subgroup values must be compared precisely across groups? | Grouped bars or aligned small multiples |
 | Do contributions extend in positive and negative directions?    | Diverging stack around an explicit zero |
 
-Prepare explicit interval endpoints for every stacked row. The application
-owns series order, offset, normalization, and the denominator behind every
-proportion. [Scales and D3](../concepts/scales-and-d3.md) defines that
-preparation boundary.
+Single-value bar and area channels stack implicitly. Use `stackY` when the
+order or offset must be explicit; supply interval endpoints when the
+application has already computed them.
 
 ## Preserve totals with a stacked area
 
-A stacked area combines a shared ordered x domain with explicit lower and upper
-boundaries for every series. The top boundary carries the total; the thickness
-of each layer carries its contribution.
+A stacked area combines a shared ordered x domain with one length per series.
+The top boundary carries the total; the thickness of each layer carries its
+contribution.
+
+```ts
+areaY(
+  rows,
+  stackY(
+    { order: ['Core', 'Services'] },
+    { x: 'date', y: 'value', color: 'series' },
+  ),
+)
+```
 
 <iframe
   src="https://tanstack.com/charts/catalog/embed/04-stacked-time-area/?theme=system&height=420"
@@ -49,9 +58,8 @@ values appear to move substantially and breaks the reader's spatial memory.
 When one series needs precise comparison, place it on the shared baseline or
 give it a separate aligned view.
 
-The prepared rows should retain original values for tooltips and selection,
-even when marks consume `y1` and `y2` interval channels. See
-[Data and Channels](../concepts/data-and-channels.md).
+The original value remains available to tooltips and selection while the mark
+derives its stack endpoints.
 
 ## Compare proportional mix
 
@@ -72,8 +80,8 @@ Format the quantitative guide as a percentage and state the denominator. Keep
 raw totals available in a tooltip, table, or companion view when the reader may
 otherwise mistake stable share for stable volume.
 
-Normalize within each x group before rendering. Do not normalize the complete
-dataset once and then divide it into time slices.
+Use `stackY({ offset: 'normalize' }, channels)`. Normalization is resolved
+independently at each x position.
 
 ## Emphasize changing shape
 
@@ -90,9 +98,10 @@ but the displaced baseline makes precise values and totals difficult to read.
   style="width:100%;height:420px;border:0;"
 ></iframe>
 
-Treat offset and layer order as analytical parameters. Keep them deterministic
-across revisions, preserve stable series colors, and provide exact values
-through [Tooltips and Focus](../guides/tooltips-and-focus.md).
+Use `offset: 'center'` or `offset: 'wiggle'` and an explicit order when the
+composition depends on them. Keep those values stable across revisions,
+preserve series colors, and provide exact values through
+[Tooltips and Focus](../guides/tooltips-and-focus.md).
 
 Use an ordinary stacked area when totals or baselines are part of the question.
 
diff --git a/docs/framework/octane/adapter.md b/docs/framework/octane/adapter.md
index c8d1eac..e43766a 100644
--- a/docs/framework/octane/adapter.md
+++ b/docs/framework/octane/adapter.md
@@ -58,7 +58,7 @@ The default Node target renders the complete `.ts-chart-host`,
 `.ts-chart-surface`, and accessible SVG at `initialWidth`. The browser target
 hydrates the same structure before mounting the host.
 
-The Canvas entry renders a deterministic named root and two `aria-hidden`
+The Canvas entry renders a deterministic named root and three `aria-hidden`
 canvases on the server. It paints no server pixels. The browser adopts the
 elements, paints after mount, and attaches the same focus, keyboard, tooltip,
 and selection host.
diff --git a/docs/framework/octane/quick-start.md b/docs/framework/octane/quick-start.md
index 410df5e..f649710 100644
--- a/docs/framework/octane/quick-start.md
+++ b/docs/framework/octane/quick-start.md
@@ -56,9 +56,11 @@ const letterFrequencyChart = defineChart({
   y: {
     scale: scaleLinear,
     nice: true,
-    label: 'Frequency',
-    format: (value) => percent.format(value),
     grid: true,
+    axis: {
+      label: 'Frequency',
+      ticks: { format: (value) => percent.format(value) },
+    },
   },
   tooltip: true,
 })
diff --git a/docs/framework/react/adapter.md b/docs/framework/react/adapter.md
index 7e932a5..826014d 100644
--- a/docs/framework/react/adapter.md
+++ b/docs/framework/react/adapter.md
@@ -68,7 +68,7 @@ The client renders the same initial structure, then the layout effect adopts
 and reconciles that SVG. There is no placeholder-only server mode.
 
 The Canvas entry emits the same outer structure with a named Canvas root and
-two `aria-hidden` canvases. It does not paint pixels on the server. The client
+three `aria-hidden` canvases. It does not paint pixels on the server. The client
 adopts those elements, paints after mount, and attaches the same focus,
 keyboard, tooltip, and selection host.
 
diff --git a/docs/framework/react/quick-start.md b/docs/framework/react/quick-start.md
index 0d88e12..76b1f04 100644
--- a/docs/framework/react/quick-start.md
+++ b/docs/framework/react/quick-start.md
@@ -56,9 +56,11 @@ const letterFrequencyChart = defineChart({
   y: {
     scale: scaleLinear,
     nice: true,
-    label: 'Frequency',
-    format: (value) => percent.format(value),
     grid: true,
+    axis: {
+      label: 'Frequency',
+      ticks: { format: (value) => percent.format(value) },
+    },
   },
   tooltip: true,
 })
diff --git a/docs/guides/accessibility.md b/docs/guides/accessibility.md
index c3ed331..1ff0fb4 100644
--- a/docs/guides/accessibility.md
+++ b/docs/guides/accessibility.md
@@ -33,7 +33,7 @@ visible nearby:
 The SVG renderer emits an image role, a chart roledescription, and a `<desc>`
 when a description is supplied. The Canvas renderer places the same image role,
 name, roledescription, description, and tab index on its root while keeping its
-two paint canvases `aria-hidden`. Do not put instructions, conclusions, and all
+three paint canvases `aria-hidden`. Do not put instructions, conclusions, and all
 underlying data into one enormous accessible name.
 
 ## Preserve semantic context outside the surface
diff --git a/docs/guides/dynamic-data-and-animation.md b/docs/guides/dynamic-data-and-animation.md
index a755232..9500a93 100644
--- a/docs/guides/dynamic-data-and-animation.md
+++ b/docs/guides/dynamic-data-and-animation.md
@@ -27,7 +27,7 @@ function RankingChart({ rows, metric, accent }: Props) {
         x: {
           scale: scaleLinear,
           nice: true,
-          ticks: width < 420 ? 4 : 7,
+          axis: { ticks: { count: width < 420 ? 4 : 7 } },
         },
         y: {
           scale: () => scaleBand<string>().padding(0.1),
diff --git a/docs/guides/exporting.md b/docs/guides/exporting.md
index 08f12f2..fb2fbd0 100644
--- a/docs/guides/exporting.md
+++ b/docs/guides/exporting.md
@@ -91,12 +91,12 @@ coordinate system.
 Pass the Canvas root or an ancestor containing it to the same
 `renderChartImage` or `downloadChartImage` functions. The exporter draws the
 base scene layer at the requested dimensions and scale. Set
-`includeFocus: true` to composite the focus overlay; it is excluded by
+`includeFocus: true` to composite the focus layers; they are excluded by
 default.
 
-Canvas focus is painted on a separate overlay so pointer movement does not
-repaint the base scene. Applications that need only the raw base bitmap may
-also call `toBlob()` or `toDataURL()` on
+Canvas focus is painted on underlay and overlay canvases so pointer movement
+does not repaint the base scene. Applications that need only the raw base
+bitmap may also call `toBlob()` or `toDataURL()` on
 `CanvasChartSurface.canvas`. Unlike SVG serialization, Canvas export does not
 retain vector geometry, accessible markup, or independently styleable nodes.
 
@@ -129,7 +129,7 @@ needs embedded or inlined assets.
 - Fonts and external resources are portable.
 - Focus decoration is included only when meaningful.
 - Raster scale is chosen for the target medium.
-- A Canvas export intentionally includes or excludes the focus overlay.
+- A Canvas export intentionally includes or excludes focus layers.
 
 See [Rendering and Export](../reference/rendering-and-export.md) for every
 function and option.
diff --git a/docs/guides/migrating.md b/docs/guides/migrating.md
index ce3f47e..6954720 100644
--- a/docs/guides/migrating.md
+++ b/docs/guides/migrating.md
@@ -49,6 +49,16 @@ Map each visible layer independently:
 Then assign explicit scales and guides. Complex charts are usually several
 ordinary marks sharing a coordinate system, not one specialized chart type.
 
+For the current breaking API:
+
+- move axis presentation under `axis`;
+- use `axis: false` to hide one axis while retaining its scale;
+- move candidate count and formatting under `axis.ticks`;
+- move rotation and thinning under `axis.tickLabels`;
+- use a single bar/area value as stack length, explicit endpoints to opt out,
+  and `layout: group()` for side-by-side bars;
+- replace renderer-specific focus decoration with `whenFocused`.
+
 See [Marks and Layering](../concepts/marks-and-layering.md) and the
 [Example Gallery](../examples/index.md).
 
diff --git a/docs/guides/responsive-charts.md b/docs/guides/responsive-charts.md
index 516c703..7933e5d 100644
--- a/docs/guides/responsive-charts.md
+++ b/docs/guides/responsive-charts.md
@@ -70,7 +70,7 @@ const definition = defineChart({
   x: {
     scale: scaleLinear,
     nice: true,
-    label: 'Weekly downloads',
+    axis: { label: 'Weekly downloads' },
   },
   y: {
     scale: () => scaleBand<string>().padding(0.1),
@@ -87,9 +87,9 @@ margin: {
 ```
 
 `margin: 0` locks every side and is appropriate for guide-free sparklines.
-Automatic margins guarantee containment, not collision-free labels. Use
-`ticks`, `tickRotate`, or a different representation when labels compete for
-the same axis space.
+Axis labels thin automatically after candidate generation and optional
+rotation. Use `axis.ticks.spacing`, `axis.tickLabels.rotate`, hard-kept labels,
+or a different representation when labels compete for the same axis space.
 
 <iframe
   src="https://tanstack.com/charts/catalog/embed/44-framed-scatter/?theme=system&height=320"
diff --git a/docs/guides/tooltips-and-focus.md b/docs/guides/tooltips-and-focus.md
index 30b7a98..4391684 100644
--- a/docs/guides/tooltips-and-focus.md
+++ b/docs/guides/tooltips-and-focus.md
@@ -31,6 +31,39 @@ The default focus strategy resolves one nearest point in two dimensions.
 `maxFocusDistance` defaults to 48 scene pixels. Empty space farther from any
 point clears transient focus.
 
+## Focus presentation
+
+The default focus marker is an implicit focus-filtered mark. Replace it by
+filtering any ordinary mark with `whenFocused`:
+
+```ts
+import { bandX, whenFocused } from '@tanstack/charts'
+
+const definition = defineChart({
+  focus: 'group-x',
+  marks: [
+    whenFocused(
+      bandX(rows, {
+        x: 'date',
+        fill: '#64748b',
+        fillOpacity: 0.14,
+        inset: -6,
+      }),
+      { match: 'x' },
+    ),
+    lineY(rows, { x: 'date', y: 'value', color: 'series' }),
+  ],
+})
+```
+
+The mark before the line paints below it; moving it after the line paints
+above it. Focus marks contribute channels to scale inference but do not add hit
+targets. Their scene nodes update from the centralized focus state without
+rebuilding the scene or repainting base Canvas geometry.
+
+`match` accepts `primary`, `group`, `key`, `x`, `y`, or `series`. The same
+focused group drives tooltips and every filtered mark.
+
 ## Axis focus modes
 
 | Mode        | Result                                     |
@@ -180,23 +213,39 @@ const definition = defineChart({
 })
 ```
 
+Axis coordinates can be selected independently. This keeps a grouped tooltip
+centered over the plot while fixing it to the top edge:
+
+```ts
+const tooltip = {
+  anchor: { x: 'plot-center', y: 'plot-top' },
+  placement: 'bottom',
+}
+```
+
+X accepts `point`, `pointer`, `value`, `group-center`, `plot-left`,
+`plot-center`, and `plot-right`. Y accepts `point`, `pointer`, `value`,
+`group-center`, `plot-top`, `plot-center`, and `plot-bottom`. Pointer
+coordinates fall back to the focused value for keyboard focus.
+
 A custom resolver covers event ranges, maps, and application-specific
 reference positions:
 
 ```ts
 const tooltip = {
-  anchor: (_points, { chart }) => ({
-    x: chart.x + chart.width,
-    y: chart.y,
+  anchor: (_points, { focus, pointer, plot, surface, scales }) => ({
+    x: plot.x + plot.width,
+    y: plot.y,
   }),
   placement: 'bottom-left',
 }
 ```
 
-Resolvers and placement use scene pixels. A nullish or non-finite custom
-anchor falls back to the primary point. A placement list uses the first fit,
-then the least-overflowing candidate. Every result shifts inside the chart
-surface.
+The callback receives the complete focus state, current pointer or `null`,
+plot bounds, surface size, and resolved scales. Resolvers and placement use
+scene pixels. A nullish or non-finite custom anchor falls back to the primary
+point. A placement list uses the first fit, then the least-overflowing
+candidate. Every result shifts inside the chart surface.
 
 ## Escaping clipped containers
 
diff --git a/docs/overview.md b/docs/overview.md
index 0981382..b5c03b0 100644
--- a/docs/overview.md
+++ b/docs/overview.md
@@ -82,13 +82,13 @@ const closingPriceChart = defineChart({
   x: {
     scale: scaleUtc,
     nice: true,
-    label: 'Date',
+    axis: { label: 'Date' },
   },
   y: {
     scale: scaleLinear,
     nice: true,
-    label: 'Close (USD)',
     grid: true,
+    axis: { label: 'Close (USD)' },
   },
 })
 ```
diff --git a/docs/quick-start.md b/docs/quick-start.md
index 05b1613..e3ce86d 100644
--- a/docs/quick-start.md
+++ b/docs/quick-start.md
@@ -50,13 +50,13 @@ const closingPriceChart = defineChart({
   x: {
     scale: scaleUtc,
     nice: true,
-    label: 'Date',
+    axis: { label: 'Date' },
   },
   y: {
     scale: scaleLinear,
     nice: true,
-    label: 'Close (USD)',
     grid: true,
+    axis: { label: 'Close (USD)' },
   },
   tooltip: true,
 })
diff --git a/docs/reference/chart-definitions.md b/docs/reference/chart-definitions.md
index 0a16263..8622fd6 100644
--- a/docs/reference/chart-definitions.md
+++ b/docs/reference/chart-definitions.md
@@ -62,7 +62,7 @@ const definition = defineChart({
     y: {
       scale: scaleLinear,
       nice: true,
-      ticks: width < 480 ? 4 : 7,
+      axis: { ticks: { count: width < 480 ? 4 : 7 } },
       grid: true,
     },
   }),
@@ -109,7 +109,7 @@ const definition = useMemo(() => {
     x: {
       scale: scaleLinear,
       nice: true,
-      ticks: width < 480 ? 4 : 7,
+      axis: { ticks: { count: width < 480 ? 4 : 7 } },
     },
     y: {
       scale: () => scaleBand().padding(0.1),
diff --git a/docs/reference/chart-spec.md b/docs/reference/chart-spec.md
index 829f190..05822f8 100644
--- a/docs/reference/chart-spec.md
+++ b/docs/reference/chart-spec.md
@@ -96,14 +96,14 @@ const horizontalThresholds = defineChart({
 })
 ```
 
-`guide: false` hides an axis but does not remove its scale. Scene compilation
+`axis: false` hides an axis but does not remove its scale. Scene compilation
 still guards untyped consumers that omit or null an axis used by a mark.
 
 ## Guides and margins
 
 Guide visibility and geometry are separate:
 
-- `x.guide: false` or `y.guide: false` hides one guide.
+- `x.axis: false` or `y.axis: false` hides one axis.
 - `guides: false` hides all guides and removes their implicit margin.
 - Omitted `margin` sides are measured from ticks, rotation, titles, edge
   overhang, color legends, and Cartesian `text` marks.
diff --git a/docs/reference/focus-and-interaction.md b/docs/reference/focus-and-interaction.md
index 221c283..2875226 100644
--- a/docs/reference/focus-and-interaction.md
+++ b/docs/reference/focus-and-interaction.md
@@ -21,7 +21,7 @@ With no custom focus strategy:
 - `Enter` and Space toggle an enabled sticky tooltip and call `onSelect` for
   the focused point
 - a click focuses and selects the nearest point, or selects `null`
-- the renderer's focus ring follows the primary point
+- the default focus-filtered marker follows the primary point
 
 `maxFocusDistance` defaults to `48` scene pixels. Set `tabIndex` to control
 normal tab-order participation while keeping keyboard handling enabled. Set
@@ -53,6 +53,43 @@ The equivalent `focusX`, `focusY`, `focusNearestX`, and `focusNearestY`
 strategy objects remain available from `@tanstack/charts/focus` for composition
 or direct strategy use.
 
+## Focus-filtered marks
+
+`whenFocused(mark, { match })` turns an ordinary mark into transient focus
+presentation. It uses the chart's existing focus state and never participates
+in pointer hit testing.
+
+```ts
+import { bandX, lineY, whenFocused } from '@tanstack/charts'
+
+const marks = [
+  whenFocused(
+    bandX(rows, {
+      x: 'date',
+      fill: '#64748b',
+      fillOpacity: 0.14,
+      inset: -6,
+    }),
+    { match: 'x' },
+  ),
+  lineY(rows, { x: 'date', y: 'value', color: 'series' }),
+]
+```
+
+| Match     | Visible rows                                     |
+| --------- | ------------------------------------------------ |
+| `primary` | The primary focused datum                        |
+| `group`   | Datums represented by the complete focused group |
+| `key`     | The primary point's stable key                   |
+| `x`       | Rows sharing the primary semantic x value        |
+| `y`       | Rows sharing the primary semantic y value        |
+| `series`  | Rows sharing the primary series/group identity   |
+
+Mark order controls layering. A leading filtered mark paints below ordinary
+marks; a later one paints above them. Supplying any custom focus-filtered mark
+replaces the implicit default marker. SVG toggles matching scene nodes; Canvas
+repaints only its focus layers.
+
 ## Disabling chart-owned focus
 
 ```ts
@@ -136,7 +173,7 @@ interface ChartTooltipOptions<
 | `portal`      | `false`        | Escapes clipping through top-layer or fixed positioning |
 | `items`       | Automatic x/y  | Ordered rows for a single focused point                 |
 | `sort`        | `color-domain` | Grouped row order                                       |
-| `anchor`      | `point`        | Point, pointer, group center, or coordinate resolver    |
+| `anchor`      | `point`        | Preset, per-axis coordinates, or coordinate resolver    |
 | `placement`   | `auto`         | Fixed or ordered fallback box placements                |
 | `offset`      | `10`           | Scene-pixel gap between anchor and box                  |
 | `content`     | Automatic rows | Returns a safe title and structured rows                |
@@ -195,9 +232,11 @@ grouped structure belongs in `content`.
 - `pointer` follows the current pointer and falls back to the point for
   keyboard focus.
 - `group-center` uses the center of the focused points' bounding box.
-- A resolver receives the focused points plus pointer, chart bounds, width,
-  and height, and returns scene coordinates. A nullish or non-finite result
-  falls back to the primary point.
+- `{ x, y }` selects each coordinate independently from the point, pointer,
+  focused value, group center, or a plot edge/center.
+- A resolver receives the focused points plus `{ focus, pointer, plot,
+surface, scales }` and returns scene coordinates. A nullish or non-finite
+  result falls back to the primary point.
 
 `placement` accepts `auto`, one placement, or an ordered fallback list. The
 placements are `top`, `top-right`, `right`, `bottom-right`, `bottom`,
@@ -208,7 +247,7 @@ it uses the least-overflowing candidate and shifts it inside. `auto` uses
 
 ```ts
 const tooltip = {
-  anchor: 'group-center',
+  anchor: { x: 'plot-center', y: 'plot-top' },
   placement: ['top', 'right', 'left', 'bottom'],
   offset: 12,
 }
diff --git a/docs/reference/index.md b/docs/reference/index.md
index ef59e59..c83a68e 100644
--- a/docs/reference/index.md
+++ b/docs/reference/index.md
@@ -68,6 +68,7 @@ capabilities and individual marks independently tree-shakeable.
 | `@tanstack/charts/area`              | `areaY`                                                                                                                                                                        |
 | `@tanstack/charts/area-x`            | `areaX`                                                                                                                                                                        |
 | `@tanstack/charts/arrow`             | `arrow`                                                                                                                                                                        |
+| `@tanstack/charts/band`              | `bandX`, `bandY`                                                                                                                                                               |
 | `@tanstack/charts/bar`               | `barX`, `barY`                                                                                                                                                                 |
 | `@tanstack/charts/canvas`            | `mountCanvasChart`, `canvasChartRenderer`, `createCanvasChartRenderer`, and Canvas host/surface types                                                                          |
 | `@tanstack/charts/d3/area-x`         | `d3AreaXCurve`                                                                                                                                                                 |
@@ -78,8 +79,10 @@ capabilities and individual marks independently tree-shakeable.
 | `@tanstack/charts/facet`             | `facet`, `facetChart`                                                                                                                                                          |
 | `@tanstack/charts/focus`             | `focusX`, `focusY`, `focusNearestX`, `focusNearestY`                                                                                                                           |
 | `@tanstack/charts/focus/disabled`    | `focusDisabled`                                                                                                                                                                |
+| `@tanstack/charts/focus/mark`        | `whenFocused`                                                                                                                                                                  |
 | `@tanstack/charts/frame`             | `frame`                                                                                                                                                                        |
 | `@tanstack/charts/geo`               | `geoShape` and geographic projection types                                                                                                                                     |
+| `@tanstack/charts/group`             | `group`, `GroupLayout`, `GroupOptions`                                                                                                                                         |
 | `@tanstack/charts/hexagon`           | `hexagon`                                                                                                                                                                      |
 | `@tanstack/charts/legend`            | `colorLegend`, `colorGradientLegend`                                                                                                                                           |
 | `@tanstack/charts/line`              | `lineY`                                                                                                                                                                        |
@@ -95,6 +98,7 @@ capabilities and individual marks independently tree-shakeable.
 | `@tanstack/charts/svg`               | `renderChartSvg`                                                                                                                                                               |
 | `@tanstack/charts/svg/renderer`      | `createSvgChartRenderer`, `svgChartRenderer`                                                                                                                                   |
 | `@tanstack/charts/svg/resources`     | `renderChartSvgWithResources`                                                                                                                                                  |
+| `@tanstack/charts/stack`             | `stackY`, `StackOptions`, `StackOrder`, `StackOffset`, `StackYChannels`                                                                                                        |
 | `@tanstack/charts/text`              | `text`                                                                                                                                                                         |
 | `@tanstack/charts/tick`              | `tickX`, `tickY`                                                                                                                                                               |
 | `@tanstack/charts/vector`            | `vector`                                                                                                                                                                       |
diff --git a/docs/reference/marks/bar-and-rect.md b/docs/reference/marks/bar-and-rect.md
index b82fc31..6f964b6 100644
--- a/docs/reference/marks/bar-and-rect.md
+++ b/docs/reference/marks/bar-and-rect.md
@@ -9,7 +9,7 @@ primitive for heatmaps, interval blocks, and cells.
 
 ```ts
 import { scaleBand } from 'd3-scale'
-import { barX, barY, cell, rect } from '@tanstack/charts'
+import { barX, barY, cell, group, rect, stackY } from '@tanstack/charts'
 ```
 
 ## `barY`
@@ -32,21 +32,21 @@ function barY<TDatum>(
 
 ### Options
 
-| Option        | Type                                 | Default                        | Meaning                                         |
-| ------------- | ------------------------------------ | ------------------------------ | ----------------------------------------------- |
-| `id`          | `string`                             | Layer-derived                  | Stable mark ID                                  |
-| `x`           | `Channel<TDatum, ChartValue?>`       | Row index                      | Bar category or center                          |
-| `y`           | `Channel<TDatum, number?>`           | Numeric datum                  | Value endpoint when `y2` is absent              |
-| `y1`          | `number \| Channel<TDatum, number?>` | `0`                            | Baseline endpoint                               |
-| `y2`          | `number \| Channel<TDatum, number?>` | `y`                            | Value endpoint; takes precedence over `y`       |
-| `z`           | `Channel<TDatum, ChartKey?>`         | No group                       | Group identity; color fallback when omitted     |
-| `color`       | `Channel<TDatum, ChartKey?>`         | `z`                            | Independent value sent to the chart color scale |
-| `key`         | `Channel<TDatum, ChartKey>`          | Top/nested `id`, x, then index | Stable scene and interaction identity           |
-| `fill`        | `VisualChannel<TDatum, string>`      | Resolved `color`               | Final bar paint override                        |
-| `fillOpacity` | `number`                             | SVG default                    | Fill opacity                                    |
-| `groupScale`  | `ConfiguredScaleLike`                | None                           | Positions `z`, or `color` without `z`, in x     |
-| `inset`       | `number`                             | `0`                            | Pixels removed from both categorical edges      |
-| `radius`      | `number`                             | None                           | SVG rectangle corner radius                     |
+| Option        | Type                                 | Default                        | Meaning                                          |
+| ------------- | ------------------------------------ | ------------------------------ | ------------------------------------------------ |
+| `id`          | `string`                             | Layer-derived                  | Stable mark ID                                   |
+| `x`           | `Channel<TDatum, ChartValue?>`       | Row index                      | Bar category or center                           |
+| `y`           | `Channel<TDatum, number?>`           | Numeric datum                  | Length; implicitly stacked at each x             |
+| `y1`          | `number \| Channel<TDatum, number?>` | Implicit stack start           | Explicit baseline endpoint                       |
+| `y2`          | `number \| Channel<TDatum, number?>` | Implicit stack end             | Explicit value endpoint; takes precedence over y |
+| `z`           | `Channel<TDatum, ChartKey?>`         | No group                       | Group identity; color fallback when omitted      |
+| `color`       | `Channel<TDatum, ChartKey?>`         | `z`                            | Independent value sent to the chart color scale  |
+| `key`         | `Channel<TDatum, ChartKey>`          | Top/nested `id`, x, then index | Stable scene and interaction identity            |
+| `fill`        | `VisualChannel<TDatum, string>`      | Resolved `color`               | Final bar paint override                         |
+| `fillOpacity` | `number`                             | SVG default                    | Fill opacity                                     |
+| `layout`      | `GroupLayout`                        | Stacked                        | `group()` opts into side-by-side subgroup slots  |
+| `inset`       | `number`                             | `0`                            | Pixels removed from both categorical edges       |
+| `radius`      | `number`                             | None                           | SVG rectangle corner radius                      |
 
 The interaction point is at the group-band center and the `y2`/`y` endpoint.
 Its semantic `xValue` is x and its `yValue` is the value endpoint.
@@ -74,16 +74,16 @@ Its options transpose `barY`:
 | Option        | Type                                 | Default                        | Meaning                                     |
 | ------------- | ------------------------------------ | ------------------------------ | ------------------------------------------- |
 | `id`          | `string`                             | Layer-derived                  | Stable mark ID                              |
-| `x`           | `Channel<TDatum, number?>`           | Numeric datum                  | Value endpoint when `x2` is absent          |
-| `x1`          | `number \| Channel<TDatum, number?>` | `0`                            | Baseline endpoint                           |
-| `x2`          | `number \| Channel<TDatum, number?>` | `x`                            | Value endpoint; takes precedence over `x`   |
+| `x`           | `Channel<TDatum, number?>`           | Numeric datum                  | Length; implicitly stacked at each y        |
+| `x1`          | `number \| Channel<TDatum, number?>` | Implicit stack start           | Explicit baseline endpoint                  |
+| `x2`          | `number \| Channel<TDatum, number?>` | Implicit stack end             | Explicit value endpoint; takes precedence   |
 | `y`           | `Channel<TDatum, ChartValue?>`       | Row index                      | Bar category or center                      |
 | `z`           | `Channel<TDatum, ChartKey?>`         | No group                       | Group identity; color fallback when omitted |
 | `color`       | `Channel<TDatum, ChartKey?>`         | `z`                            | Independent color-scale value               |
 | `key`         | `Channel<TDatum, ChartKey>`          | Top/nested `id`, y, then index | Stable identity                             |
 | `fill`        | `VisualChannel<TDatum, string>`      | Resolved `color`               | Final bar paint override                    |
 | `fillOpacity` | `number`                             | SVG default                    | Fill opacity                                |
-| `groupScale`  | `ConfiguredScaleLike`                | None                           | Positions `z`, or `color` without `z`, in y |
+| `layout`      | `GroupLayout`                        | Stacked                        | `group()` opts into side-by-side slots      |
 | `inset`       | `number`                             | `0`                            | Pixels removed from both categorical edges  |
 | `radius`      | `number`                             | None                           | Corner radius                               |
 
@@ -106,25 +106,25 @@ rather than negative geometry.
 
 ## Grouped bars
 
-Pass a band-scale factory to infer its domain from the grouping channel:
+Grouping is explicit:
 
 ```ts
 barY(rows, {
   x: 'quarter',
   y: 'revenue',
   color: 'region',
-  groupScale: () => scaleBand<string>().padding(0.1),
+  layout: group(),
 })
 ```
 
-TanStack Charts creates the scale and assigns
-`[0, categoricalBandwidth]` as its range. Pass a configured scale instance
-when subgroup order is fixed independently of the rendered rows.
+`group()` creates a secondary band scale inside the primary categorical band.
+Use `group({ padding: 0.2 })` for the common spacing control, or pass
+`group({ scale })` when subgroup order is fixed application state.
 
-With `groupScale`, an explicit `z` supplies subgroup geometry. If `z` is
-omitted, `color` supplies both subgroup geometry and color semantics. When
-both are present, `z` controls placement and interaction grouping while
-`color` remains independent.
+An explicit `z` supplies subgroup identity. If `z` is omitted, a discrete
+`color` channel may supply identity after grouped geometry has been selected.
+When both are present, `z` controls placement and interaction grouping while
+`color` remains independent. A continuous color channel cannot infer series.
 
 The mark throws when:
 
@@ -132,18 +132,87 @@ The mark throws when:
 - a grouped row has a null effective group value
 - a group value is outside the group-scale domain or maps to a nonfinite position
 
-Without `groupScale`, neither `z` nor `color` invents side-by-side geometry.
+Color never chooses stacked versus grouped geometry.
+
+## Stacked bars
+
+The single value channel is a length. Repeated categorical positions stack
+automatically, with positive and negative values diverging from zero:
+
+```ts
+barY(rows, {
+  x: 'quarter',
+  y: 'revenue',
+  color: 'region',
+})
+```
+
+Use `z` when series identity differs from color. Wrap the channels in
+`stackY` to select order or offset:
+
+```ts
+barY(
+  rows,
+  stackY(
+    { order: ['Core', 'Services'], offset: 'normalize' },
+    { x: 'quarter', y: 'revenue', color: 'segment' },
+  ),
+)
+```
+
+`order` accepts input order, ascending or descending absolute totals, or an
+explicit series list. `reverse` reverses the resolved order. `offset` accepts
+`diverging` (default), `normalize`, `center`, or `wiggle`.
+
+```ts
+type StackOrder = 'input' | 'ascending' | 'descending' | readonly ChartKey[]
+type StackOffset = 'diverging' | 'normalize' | 'center' | 'wiggle'
+
+interface StackOptions {
+  order?: StackOrder
+  offset?: StackOffset
+  reverse?: boolean
+}
+
+type StackYChannels<TChannels extends object> = TChannels
+```
+
+Supplying `y1` or `y2` opts out of implicit stacking and treats the channels
+as authored endpoints. The same contract is transposed for `barX`.
 
 ## Bar baselines and invalid rows
 
-Omitting `y1` or `x1` uses zero and emits an `includeZero` scale hint. An
-explicit baseline, including a constant zero, removes the hint. The configured
-scale still owns its semantic domain.
+Implicit stacks include zero in inferred quantitative domains. Explicit
+endpoints contribute their authored bounds. The configured scale still owns
+its semantic domain.
 
 Rows are skipped when their category, baseline, or endpoint is invalid.
 Negative and reversed intervals are supported because geometry uses the
 minimum mapped endpoint and absolute length.
 
+## `bandX` and `bandY`
+
+`bandX` paints the complete plot height at each x value. `bandY` paints the
+complete plot width at each y value. They are ordinary marks used for
+categorical backgrounds and focus presentation:
+
+```ts
+whenFocused(
+  bandX(rows, {
+    x: 'category',
+    fill: '#64748b',
+    fillOpacity: 0.14,
+    inset: -6,
+  }),
+  { match: 'x' },
+)
+```
+
+`BandXOptions` and `BandYOptions` provide the positional channel, `z`, `color`,
+`key`, `fill`, `fillOpacity`, `inset`, and `radius`. A negative inset expands
+the resolved band. The helpers are also available from
+`@tanstack/charts/band`.
+
 ## `rect`
 
 `rect` draws one independent x/y interval per valid row:
diff --git a/docs/reference/marks/line-and-area.md b/docs/reference/marks/line-and-area.md
index 7d404f8..81d093d 100644
--- a/docs/reference/marks/line-and-area.md
+++ b/docs/reference/marks/line-and-area.md
@@ -9,7 +9,7 @@ undefined, invalid, or nonfinite create gaps instead of connecting across
 missing data.
 
 ```ts
-import { areaX, areaY, defineChart, lineY } from '@tanstack/charts'
+import { areaX, areaY, defineChart, lineY, stackY } from '@tanstack/charts'
 ```
 
 ## `lineY`
@@ -86,9 +86,9 @@ function areaY<TDatum>(
 | ------------- | ------------------------------------ | ------------------------------ | -------------------------------------------------------------- |
 | `id`          | `string`                             | Layer-derived                  | Stable mark ID                                                 |
 | `x`           | `Channel<TDatum, ChartValue?>`       | Row index                      | Shared horizontal position                                     |
-| `y`           | `Channel<TDatum, number?>`           | Numeric datum                  | Upper value when `y2` is absent                                |
-| `y1`          | `number \| Channel<TDatum, number?>` | `0`                            | Lower baseline                                                 |
-| `y2`          | `number \| Channel<TDatum, number?>` | `y`                            | Upper value; takes precedence over `y`                         |
+| `y`           | `Channel<TDatum, number?>`           | Numeric datum                  | Layer thickness; implicitly stacked at each x                  |
+| `y1`          | `number \| Channel<TDatum, number?>` | Implicit stack start           | Explicit lower boundary                                        |
+| `y2`          | `number \| Channel<TDatum, number?>` | Implicit stack end             | Explicit upper boundary; takes precedence over y               |
 | `z`           | `Channel<TDatum, ChartKey?>`         | No explicit group              | Area grouping; overrides color grouping                        |
 | `color`       | `Channel<TDatum, ChartKey?>`         | `z`                            | Color-scale value; groups when `z` is absent                   |
 | `key`         | `Channel<TDatum, ChartKey>`          | Top/nested `id`, x, then index | Stable interaction identity                                    |
@@ -98,9 +98,11 @@ function areaY<TDatum>(
 | `strokeWidth` | `number`                             | SVG default                    | Boundary stroke width                                          |
 | `curve`       | `ChartCurve`                         | Straight segments              | Optional path generator                                        |
 
-When `y1` is omitted, the y channel materialization carries an `includeZero`
-hint. The caller still owns the scale domain. Explicit `y1`, including a
-constant, removes that hint.
+Without explicit endpoints, repeated x positions stack by series. `z` defines
+series; a discrete `color` channel may infer it when `z` is absent. Use
+`stackY(options, channels)` for explicit order, reversal, normalization,
+centering, or wiggle offset. Supplying `y1` or `y2` opts out and preserves
+authored interval boundaries.
 
 Input order and null-gap behavior match `lineY`. Each valid row emits one point
 at the upper `y2`/`y` value, not at the lower baseline.
diff --git a/docs/reference/rendering-and-export.md b/docs/reference/rendering-and-export.md
index b664eb8..08ed444 100644
--- a/docs/reference/rendering-and-export.md
+++ b/docs/reference/rendering-and-export.md
@@ -79,8 +79,8 @@ and an overflow-visible display style. A nontransparent scene background
 renders as the first rect. All labels escape text and inherit the document
 font.
 
-The renderer includes one hidden focus circle controlled by the DOM host.
-Scene keys become `data-ts-key` attributes for reconciliation.
+Focus-filtered scene groups render hidden until the DOM host supplies focus
+state. Scene keys become `data-ts-key` attributes for reconciliation.
 
 ## Canvas renderer
 
@@ -97,9 +97,9 @@ const host = mountCanvasChart(container, {
 
 `mountCanvasChart` has the same definition, sizing, focus, spatial-index,
 keyboard, tooltip, selection, update, and destroy behavior as `mountChart`.
-The renderer paints the base scene and focus indicator on separate canvases,
-uses the browser device-pixel ratio by default, and maps pointer coordinates
-back into the scene.
+The renderer paints focus underlays, the base scene, and focus overlays on
+separate canvases, uses the browser device-pixel ratio by default, and maps
+pointer coordinates back into the scene.
 
 ```ts
 interface CanvasChartRendererOptions {
@@ -113,6 +113,7 @@ interface CanvasChartSurface<
 > extends ChartSurface<TDatum, TXValue, TYValue> {
   readonly element: HTMLDivElement
   readonly canvas: HTMLCanvasElement
+  readonly focusUnderCanvas: HTMLCanvasElement
   readonly focusCanvas: HTMLCanvasElement
 }
 
@@ -165,8 +166,9 @@ function mountCanvasChart<
 ```
 
 The surface's `element` is its accessible chart root. `canvas` holds the base
-scene; `focusCanvas` is a separate overlay, so focus changes do not repaint the
-base scene. A finite, positive `pixelRatio` fixes both backing stores at that
+scene; `focusUnderCanvas` and `focusCanvas` paint transient layers below and
+above it, so focus changes do not repaint the base scene. A finite, positive
+`pixelRatio` fixes every backing store at that
 ratio. An omitted value uses `devicePixelRatio`, then `1`; an invalid value
 uses `1`.
 
@@ -181,7 +183,7 @@ Use `canvasChartRenderer` for the shared default instance. Call
 an independently typed renderer instance.
 
 The server-facing `prerender` step emits a deterministic, named chart shell
-with two `aria-hidden` canvases. It does not attempt server-side pixel
+with three `aria-hidden` canvases. It does not attempt server-side pixel
 painting. The browser adopts that shell, sizes the backing stores, paints the
 scene, and attaches the shared interaction host. See
 [SSR and Hydration](../guides/ssr-and-hydration.md).
@@ -335,8 +337,8 @@ interface SerializeChartSvgOptions {
 ```
 
 `target` may be the SVG or an ancestor containing `svg.ts-chart`. The serializer
-clones the SVG, adds the XML namespace, removes the focus circle unless
-`includeFocus` is true, and resolves dimensions from options, then the
+clones the SVG, adds the XML namespace, removes focus-filtered scene layers
+unless `includeFocus` is true, and resolves dimensions from options, then the
 `viewBox`, then client dimensions.
 
 The serializer can inline computed `color`, fill, fill opacity, font family,
@@ -395,8 +397,8 @@ consistent with the selected MIME type.
 
 The raster helpers accept a mounted SVG or Canvas chart root, or an ancestor
 containing one. SVG is serialized, decoded, and drawn into the export canvas.
-Canvas uses its base scene layer directly and composites the separate focus
-layer only when `includeFocus` is true. `serializeChartSvg` and
+Canvas uses its base scene layer directly and composites focus underlays and
+overlays only when `includeFocus` is true. `serializeChartSvg` and
 `downloadChartSvg` remain SVG-only.
 
 ## Custom renderers
@@ -425,10 +427,7 @@ interface ChartSurface<
     clientX: number,
     clientY: number,
   ) => { x: number; y: number } | null
-  paintFocus: (
-    point: ChartPoint<TDatum, TXValue, TYValue> | null,
-    points: readonly ChartPoint<TDatum, TXValue, TYValue>[],
-  ) => void
+  paintFocus: (focus: ChartFocusState<TDatum, TXValue, TYValue> | null) => void
   destroy: () => void
 }
 
@@ -458,7 +457,7 @@ interface ChartRenderer<
 | `ChartSurface.element`  | Expose the accessible, focusable root used by shared keyboard and focus handling                           |
 | `render()`              | Paint the complete scene and apply accessible name, class, tab index, ID prefix, and optional animation    |
 | `clientToScene()`       | Convert viewport client coordinates to scene coordinates, or return `null` when conversion is unavailable  |
-| `paintFocus()`          | Paint or clear focus for the primary point; the full point array contains its resolved focus group         |
+| `paintFocus()`          | Paint or clear the complete focus state: primary, group, source, and pinned status                         |
 | `destroy()`             | Release renderer-owned animation, observers, listeners, and resources                                      |
 
 `requestRender()` asks the shared host to rebuild and repaint on its next
@@ -510,7 +509,7 @@ renderer should preserve:
 
 - an SVG root discoverable by the host
 - stable `data-ts-key` identities for reconciliation
-- a `[data-ts-chart-focus]` element when native focus paint is desired
+- focus-filtered scene groups when native focus paint is desired
 - the scene coordinate system and accessible name
 
 See [Custom extensions](./custom-extensions.md#custom-renderers) before
diff --git a/docs/reference/scales-guides-and-color.md b/docs/reference/scales-guides-and-color.md
index f0461fc..44afc17 100644
--- a/docs/reference/scales-guides-and-color.md
+++ b/docs/reference/scales-guides-and-color.md
@@ -22,14 +22,14 @@ import { scaleLinear, scaleUtc } from 'd3-scale'
 const x = {
   scale: scaleUtc,
   nice: true,
-  label: 'Date',
+  axis: { label: 'Date' },
 }
 
 const y = {
   scale: scaleLinear,
   nice: true,
-  label: 'Revenue',
   grid: true,
+  axis: { label: 'Revenue' },
 }
 ```
 
@@ -82,38 +82,85 @@ Scale copies make one configured scale safe to reuse across responsive scenes.
 interface ChartAxisOptions<TValue extends ChartValue> {
   scale: ChartScale | ConfiguredScaleLike<TValue> | ChartScaleFactory<TValue>
   nice?: boolean | number
-  guide?: boolean
-  ticks?: number
-  format?: (value: TValue) => string
-  grid?: boolean
-  label?: string
   reverse?: boolean
-  tickRotate?: number
-  labelOffset?: number
+  grid?: boolean
+  axis?:
+    | false
+    | {
+        line?: boolean
+        ticks?:
+          | false
+          | {
+              count?: number
+              spacing?: number
+              values?: readonly TValue[]
+              size?: number
+              padding?: number
+              format?: (value: TValue) => string
+            }
+        tickLabels?:
+          | false
+          | {
+              rotate?: number
+              thin?:
+                | boolean
+                | {
+                    minGap?: number
+                    priority?: 'ends'
+                    keep?: readonly TValue[]
+                  }
+            }
+        label?: string | { text: string; offset?: number | 'auto' }
+      }
 }
 ```
 
-| Option        | Default                                 | Meaning                                                                  |
-| ------------- | --------------------------------------- | ------------------------------------------------------------------------ |
-| `scale`       | Required                                | D3 factory, configured instance, or advanced `ChartScale`.               |
-| `nice`        | `false`                                 | Nice the resolved domain using the responsive or supplied tick count.    |
-| `guide`       | `true` for a non-null axis              | Renders the axis, ticks, title, and requested grid.                      |
-| `ticks`       | Responsive target                       | Suggested tick count passed to the scale. It is not a guaranteed count.  |
-| `format`      | Scale formatter, then string conversion | Formats tick values. Its value type is inferred from the marks.          |
-| `grid`        | `false` for x; `true` for y             | Draws grid rules at tick positions.                                      |
-| `label`       | None                                    | Axis title.                                                              |
-| `reverse`     | `false`                                 | Reverses the responsive pixel range without changing the caller's scale. |
-| `tickRotate`  | `0`                                     | Rotates tick labels in degrees.                                          |
-| `labelOffset` | Automatic                               | Overrides the title's distance from the axis.                            |
+| Option    | Default                     | Meaning                                                                  |
+| --------- | --------------------------- | ------------------------------------------------------------------------ |
+| `scale`   | Required                    | D3 factory, configured instance, or advanced `ChartScale`.               |
+| `nice`    | `false`                     | Nice the resolved domain using the responsive or supplied tick count.    |
+| `reverse` | `false`                     | Reverses the responsive pixel range without changing the caller's scale. |
+| `grid`    | `false` for x; `true` for y | Draws grid rules from semantic tick candidates.                          |
+| `axis`    | Inferred axis               | Axis line, tick candidates, labels, and title; `false` hides the axis.   |
 
 Set an axis to `null` only when no mark uses that positional scale. To keep the
-scale while hiding its guide, use `guide: false`.
+scale while hiding its axis, use `axis: false`. Grid visibility remains
+independent.
 
-Without an explicit `ticks`, the responsive target is
+Without an explicit `axis.ticks` policy, the responsive target is
 `clamp(2, floor(chart.width / 92), 8)` for x and
 `clamp(2, floor(chart.height / 48), 7)` for y. The configured scale may return
 a different number of ticks.
 
+`count`, `spacing`, and `values` are mutually exclusive candidate policies.
+`count` is a scale hint, `spacing` derives that hint from the final axis length,
+and `values` supplies exact semantic candidates. Grid lines and tick stubs use
+these candidates before label thinning.
+
+Tick labels are horizontal and collision-thinned by default. Rotation is
+explicit and independent:
+
+```ts
+const x = {
+  scale: scaleUtc,
+  axis: {
+    ticks: { spacing: 80, size: 0 },
+    tickLabels: {
+      rotate: -35,
+      thin: {
+        minGap: 8,
+        priority: 'ends',
+        keep: [launchDate],
+      },
+    },
+  },
+}
+```
+
+`thin: false` renders every candidate label. `keep` is a hard guarantee:
+kept values render even if they collide with one another. A kept value outside
+the candidate set adds only a label, not a tick stub or grid line.
+
 ## Automatic guide layout
 
 When a margin side is omitted, the scene compiler measures:
diff --git a/docs/reference/types.md b/docs/reference/types.md
index ae2b33a..29da917 100644
--- a/docs/reference/types.md
+++ b/docs/reference/types.md
@@ -151,33 +151,37 @@ See [Scene nodes](./runtime-and-scene.md#scene-nodes).
 
 ## Scale, guide, color, and theme types
 
-| Type                       | Purpose                                                      |
-| -------------------------- | ------------------------------------------------------------ |
-| `ChartAxisOptions`         | Required positional scale and optional guide behavior        |
-| `ChartAxisGuideOptions`    | Guide behavior without the scale field                       |
-| `ChartScaleFactory`        | Creates a positional scale with a mark-inferred domain       |
-| `ChartScaleInput`          | Factory or configured positional scale instance              |
-| `InferableScaleLike`       | Domain-configurable scale returned by a factory              |
-| `ConfiguredScaleLike`      | Callable, copyable positional scale contract                 |
-| `ChartNumericScale`        | Radius mapper, configured instance, or inferred factory spec |
-| `ChartNumericScaleOptions` | Inferred or configured radius scale with optional nicening   |
-| `ChartScale`               | Custom positional scale extension                            |
-| `ChartScaleResolveContext` | Values, responsive range, guide options, and hints           |
-| `ChartScaleResolver`       | Function form of custom scale resolution                     |
-| `ChartColorOptions`        | Factory, configured/custom color scale, hints, and legend    |
-| `ChartColorScaleFactory`   | Creates a color scale with a channel-inferred domain         |
-| `ConfiguredColorScaleLike` | Callable and copyable color scale contract                   |
-| `InferableColorScaleLike`  | Domain-configurable color scale returned by a factory        |
-| `ChartColorScale`          | Custom color scale extension                                 |
-| `ChartColorScaleContext`   | Observed values, hints, and theme                            |
-| `ResolvedColorScale`       | Resolved mapping and optional stepped legend boundaries      |
-| `ResolvedColorScaleKind`   | Categorical, continuous, quantile, quantize, or threshold    |
-| `ChartColorLegend`         | Legend layout and scene rendering                            |
-| `ChartColorLegendContext`  | Resolved colors, chart bounds, theme, and width              |
-| `ChartTheme`               | Foreground, muted, grid, background, and palette             |
-| `ChartLinearGradient`      | Named linear-gradient resource                               |
-| `ChartGradientStop`        | Gradient offset, color, and optional opacity                 |
-| `ChartCurve`               | Line and y-area path generation                              |
+| Type                            | Purpose                                                      |
+| ------------------------------- | ------------------------------------------------------------ |
+| `ChartAxisOptions`              | Required positional scale, grid, and optional nested axis    |
+| `ChartAxisPresentationOptions`  | Baseline, ticks, tick labels, and title presentation         |
+| `ChartAxisTickOptions`          | Candidate policy, stub size, padding, and formatting         |
+| `ChartAxisTickLabelOptions`     | Rotation and thinning policy                                 |
+| `ChartAxisTickLabelThinOptions` | Collision gap, end priority, and hard-kept values            |
+| `ChartAxisLabelOptions`         | Axis title text and automatic or numeric offset              |
+| `ChartScaleFactory`             | Creates a positional scale with a mark-inferred domain       |
+| `ChartScaleInput`               | Factory or configured positional scale instance              |
+| `InferableScaleLike`            | Domain-configurable scale returned by a factory              |
+| `ConfiguredScaleLike`           | Callable, copyable positional scale contract                 |
+| `ChartNumericScale`             | Radius mapper, configured instance, or inferred factory spec |
+| `ChartNumericScaleOptions`      | Inferred or configured radius scale with optional nicening   |
+| `ChartScale`                    | Custom positional scale extension                            |
+| `ChartScaleResolveContext`      | Values, responsive range, guide options, and hints           |
+| `ChartScaleResolver`            | Function form of custom scale resolution                     |
+| `ChartColorOptions`             | Factory, configured/custom color scale, hints, and legend    |
+| `ChartColorScaleFactory`        | Creates a color scale with a channel-inferred domain         |
+| `ConfiguredColorScaleLike`      | Callable and copyable color scale contract                   |
+| `InferableColorScaleLike`       | Domain-configurable color scale returned by a factory        |
+| `ChartColorScale`               | Custom color scale extension                                 |
+| `ChartColorScaleContext`        | Observed values, hints, and theme                            |
+| `ResolvedColorScale`            | Resolved mapping and optional stepped legend boundaries      |
+| `ResolvedColorScaleKind`        | Categorical, continuous, quantile, quantize, or threshold    |
+| `ChartColorLegend`              | Legend layout and scene rendering                            |
+| `ChartColorLegendContext`       | Resolved colors, chart bounds, theme, and width              |
+| `ChartTheme`                    | Foreground, muted, grid, background, and palette             |
+| `ChartLinearGradient`           | Named linear-gradient resource                               |
+| `ChartGradientStop`             | Gradient offset, color, and optional opacity                 |
+| `ChartCurve`                    | Line and y-area path generation                              |
 
 See [Scales, guides, and color](./scales-guides-and-color.md).
 
@@ -205,6 +209,10 @@ See [DOM host](./dom-host.md) and
 | `ChartFocusStrategy`         | Pointer resolution, grouping, and keyboard ordering      |
 | `ChartFocusPreset`           | Built-in nearest and grouped axis focus names            |
 | `ChartFocusMode`             | Focus preset or custom strategy                          |
+| `ChartFocusState`            | Primary, group, source, and pinned interaction state     |
+| `ChartFocusSource`           | Pointer, keyboard, programmatic, or restored source      |
+| `ChartFocusFilter`           | Focus-filtered mark matching configuration               |
+| `ChartFocusMatch`            | Primary, group, key, x, y, or series matching            |
 | `ChartSpatialIndex`          | Nearest-point query                                      |
 | `ChartSpatialIndexFactory`   | Builds an index from current scene points                |
 | `ChartTooltipOptions`        | Native tooltip content, ordering, anchoring, and pinning |
@@ -215,7 +223,10 @@ See [DOM host](./dom-host.md) and
 | `ChartTooltipDerivedItem`    | Row derived from the complete focused point              |
 | `ChartTooltipSort`           | Group row ordering                                       |
 | `ChartTooltipAnchor`         | Point, pointer, group-center, or custom scene anchor     |
-| `ChartTooltipAnchorContext`  | Pointer position, chart bounds, and surface size         |
+| `ChartTooltipAxisAnchor`     | Independent x/y anchor sources                           |
+| `ChartTooltipXAnchor`        | Point, pointer, value, group, or plot x source           |
+| `ChartTooltipYAnchor`        | Point, pointer, value, group, or plot y source           |
+| `ChartTooltipAnchorContext`  | Focus, pointer, plot, surface, and resolved scales       |
 | `ChartTooltipPlacement`      | Tooltip box placement around its anchor                  |
 | `ChartTooltipPosition`       | Scene-pixel x/y coordinate                               |
 | `ChartDefinitionOptions`     | Focus, tooltip, animation, keyboard, and spatial policy  |
@@ -258,6 +269,10 @@ their behavior:
   `RenderChartPngOptions`. See [SVG
   serialization](./rendering-and-export.md#svg-serialization) and [browser
   image export](./rendering-and-export.md#browser-image-export).
+- `@tanstack/charts/group`: `GroupLayout` and `GroupOptions`. See
+  [Grouped bars](./marks/bar-and-rect.md#grouped-bars).
+- `@tanstack/charts/stack`: `StackOptions`, `StackOrder`, `StackOffset`, and
+  `StackYChannels`. See [Stacked bars](./marks/bar-and-rect.md#stacked-bars).
 - `@tanstack/charts/geo`: `GeoProjectionContext`, `GeoProjectionDescriptor`,
   `GeoProjectionInput`, and `GeoShapeOptions`. See
   [Geo shape](./marks/geo.md).
@@ -275,7 +290,8 @@ Every built-in mark exports its options type from the root and its granular
 subpath:
 
 - `LineYOptions`, `AreaYOptions`, `AreaXOptions`, `AreaXCurve`
-- `BarYOptions`, `BarXOptions`
+- `BarYOptions`, `BarXOptions`, `GroupLayout`, `GroupOptions`
+- `BandXOptions`, `BandYOptions`
 - `DotOptions`, `HexagonOptions`
 - `RectOptions`, `CellOptions`
 - `RuleXOptions`, `RuleYOptions`
diff --git a/examples/charts-octane/src/charts.ts b/examples/charts-octane/src/charts.ts
index 46ce96b..1be92fa 100644
--- a/examples/charts-octane/src/charts.ts
+++ b/examples/charts-octane/src/charts.ts
@@ -108,20 +108,23 @@ export function createIndustryHistoryChart(
         zoomed && zoomStart && zoomEnd
           ? scaleUtc().domain([zoomStart, zoomEnd])
           : scaleUtc,
-      ticks: width < 520 ? 4 : 7,
-      label: 'Month',
+      axis: { ticks: { count: width < 520 ? 4 : 7 }, label: 'Month' },
     },
     y: {
       scale:
         mode === 'share' ? scaleLinear().domain([0, 1]).nice(5) : scaleLinear,
       nice: 5,
-      ticks: 5,
       grid: true,
-      label:
-        mode === 'share'
-          ? 'Share of selected industries'
-          : 'Unemployed (thousands)',
-      format: mode === 'share' ? formatPercent : formatNumber,
+      axis: {
+        ticks: {
+          count: 5,
+          format: mode === 'share' ? formatPercent : formatNumber,
+        },
+        label:
+          mode === 'share'
+            ? 'Share of selected industries'
+            : 'Unemployed (thousands)',
+      },
     },
     color: {
       scale: scaleOrdinal<string, string>()
@@ -163,14 +166,15 @@ export function createRankingChart(metric: RankingMetric, accent: string) {
       x: {
         scale: scaleLinear,
         nice: ticks,
-        ticks,
         grid: true,
-        label:
-          width < 420
-            ? undefined
-            : metric === 'economy (mpg)'
-              ? 'Fuel economy (mpg)'
-              : 'Power (hp)',
+        axis: {
+          label:
+            width < 420
+              ? undefined
+              : metric === 'economy (mpg)'
+                ? 'Fuel economy (mpg)'
+                : 'Power (hp)',
+        },
       },
       y: {
         scale: () => scaleBand<string>().paddingInner(0.24).paddingOuter(0.12),
diff --git a/examples/charts-react/src/charts.ts b/examples/charts-react/src/charts.ts
index 8bef769..38dcfb2 100644
--- a/examples/charts-react/src/charts.ts
+++ b/examples/charts-react/src/charts.ts
@@ -10,6 +10,7 @@ import {
   colorLegend,
   d3Curve,
   defineChart,
+  group as groupBars,
   lineY,
   rect,
   ruleX,
@@ -130,20 +131,23 @@ export function createIndustryHistoryChart(
         zoomed && zoomStart && zoomEnd
           ? scaleUtc().domain([zoomStart, zoomEnd])
           : scaleUtc,
-      ticks: width < 520 ? 4 : 7,
-      label: 'Month',
+      axis: { ticks: { count: width < 520 ? 4 : 7 }, label: 'Month' },
     },
     y: {
       scale:
         mode === 'share' ? scaleLinear().domain([0, 1]).nice(5) : scaleLinear,
       nice: 5,
-      ticks: 5,
       grid: true,
-      label:
-        mode === 'share'
-          ? 'Share of selected industries'
-          : 'Unemployed (thousands)',
-      format: mode === 'share' ? formatPercent : formatNumber,
+      axis: {
+        ticks: {
+          count: 5,
+          format: mode === 'share' ? formatPercent : formatNumber,
+        },
+        label:
+          mode === 'share'
+            ? 'Share of selected industries'
+            : 'Unemployed (thousands)',
+      },
     },
     color: {
       scale: scaleOrdinal<string, string>()
@@ -178,7 +182,7 @@ export function createPenguinChart(
             x: 'species',
             ...(stacked
               ? { y1: 'countStart', y2: 'countEnd' }
-              : { y: 'penguins', groupScale }),
+              : { y: 'penguins', layout: groupBars({ scale: groupScale }) }),
             color: 'sex',
             inset: 1,
             radius: stacked ? 0 : 2,
@@ -191,7 +195,7 @@ export function createPenguinChart(
             y: 'species',
             ...(stacked
               ? { x1: 'countStart', x2: 'countEnd' }
-              : { x: 'penguins', groupScale }),
+              : { x: 'penguins', layout: groupBars({ scale: groupScale }) }),
             color: 'sex',
             inset: 1,
             radius: stacked ? 0 : 2,
@@ -200,22 +204,20 @@ export function createPenguinChart(
     x: vertical
       ? {
           scale: categoryScale,
-          tickRotate: width < 620 ? -28 : 0,
+          axis: { tickLabels: { rotate: width < 620 ? -28 : 0 } },
         }
       : {
           scale: scaleLinear,
           nice: 5,
-          ticks: 5,
           grid: true,
-          label: 'Penguins',
+          axis: { ticks: { count: 5 }, label: 'Penguins' },
         },
     y: vertical
       ? {
           scale: scaleLinear,
           nice: 5,
-          ticks: 5,
           grid: true,
-          label: 'Penguins',
+          axis: { ticks: { count: 5 }, label: 'Penguins' },
         }
       : {
           scale: categoryScale,
@@ -239,16 +241,12 @@ export const downloadsChart = defineChart({
       stroke: 'var(--ts-chart-1, #2563eb)',
     }),
   ],
-  x: {
-    scale: scaleUtc,
-    ticks: 6,
-  },
+  x: { scale: scaleUtc, axis: { ticks: { count: 6 } } },
   y: {
     scale: scaleLinear,
     nice: 5,
-    label: 'Daily downloads',
-    ticks: 5,
     grid: true,
+    axis: { ticks: { count: 5 }, label: 'Daily downloads' },
   },
 })
 
@@ -271,16 +269,11 @@ export const downloadAreaChart = defineChart({
       stroke: 'var(--ts-chart-4, #8b5cf6)',
     }),
   ],
-  x: {
-    scale: scaleUtc,
-    nice: 7,
-    ticks: 7,
-  },
+  x: { scale: scaleUtc, nice: 7, axis: { ticks: { count: 7 } } },
   y: {
     scale: scaleLinear,
     nice: 5,
-    label: 'Daily downloads',
-    ticks: 5,
+    axis: { ticks: { count: 5 }, label: 'Daily downloads' },
   },
 })
 
@@ -304,16 +297,11 @@ export const horsepowerChart = defineChart({
       radius: 2,
     }),
   ],
-  x: {
-    scale: scaleLinear,
-    nice: 7,
-    label: 'Power (hp)',
-  },
+  x: { scale: scaleLinear, nice: 7, axis: { label: 'Power (hp)' } },
   y: {
     scale: scaleLinear,
     nice: 5,
-    label: 'Cars',
-    ticks: 5,
+    axis: { ticks: { count: 5 }, label: 'Cars' },
   },
   color: {
     scale: () =>
@@ -358,14 +346,15 @@ export function createRankingChart(metric: RankingMetric, accent: string) {
       x: {
         scale: scaleLinear,
         nice: ticks,
-        ticks,
         grid: true,
-        label:
-          width < 420
-            ? undefined
-            : metric === 'economy (mpg)'
-              ? 'Fuel economy (mpg)'
-              : 'Power (hp)',
+        axis: {
+          label:
+            width < 420
+              ? undefined
+              : metric === 'economy (mpg)'
+                ? 'Fuel economy (mpg)'
+                : 'Power (hp)',
+        },
       },
       y: {
         scale: () => scaleBand<string>().paddingInner(0.24).paddingOuter(0.12),
diff --git a/examples/sandbox/src/plots.ts b/examples/sandbox/src/plots.ts
index db8dd2e..2f27eac 100644
--- a/examples/sandbox/src/plots.ts
+++ b/examples/sandbox/src/plots.ts
@@ -81,16 +81,21 @@ export const createIndustryChart = (input: IndustryChartInput) =>
       ],
       x: {
         scale: scaleUtc,
-        ticks: width < 680 ? 4 : 7,
-        format: input.compactTime ? formatMonth : formatYear,
+        axis: {
+          ticks: {
+            count: width < 680 ? 4 : 7,
+            format: input.compactTime ? formatMonth : formatYear,
+          },
+        },
       },
       y: {
         scale: scaleLinear,
         nice: 4,
-        ticks: 4,
-        format: compactNumber,
         grid: true,
-        label: 'Unemployed (thousands)',
+        axis: {
+          ticks: { count: 4, format: compactNumber },
+          label: 'Unemployed (thousands)',
+        },
       },
       color: {
         domain: industryNames,
@@ -149,11 +154,8 @@ export const createSparklineChart = <TDatum>(input: SparkInput<TDatum>) => {
         r: 3.25,
       }),
     ],
-    x: { scale: scaleUtc, guide: false },
-    y: {
-      scale: scaleLinear,
-      guide: false,
-    },
+    x: { scale: scaleUtc },
+    y: { scale: scaleLinear },
     guides: false,
     gradients: [
       {
@@ -194,13 +196,21 @@ export const createRatingsHeatmap = (input: { rows: readonly SimpsonsRow[] }) =>
     ],
     x: {
       scale: () => scaleBand<number>().paddingInner(0.03),
-      format: (value) => (value % 5 === 0 ? `${value}` : ''),
-      label: 'Episode',
+      axis: {
+        ticks: {
+          format: (value: number) => (value % 5 === 0 ? `${value}` : ''),
+        },
+        label: 'Episode',
+      },
     },
     y: {
       scale: () => scaleBand<number>().paddingInner(0.03),
-      format: (value) => (value % 5 === 0 ? `${value}` : ''),
-      label: 'Season',
+      axis: {
+        ticks: {
+          format: (value: number) => (value % 5 === 0 ? `${value}` : ''),
+        },
+        label: 'Season',
+      },
     },
     color: {
       scale: scaleSequential<string>,
@@ -246,13 +256,16 @@ export const createCarEconomyChart = (input: {
       x: {
         scale: scaleLinear,
         nice: true,
-        ticks: 3,
-        format: (value) => `${value} mpg`,
         grid: true,
+        axis: {
+          ticks: { count: 3, format: (value: number) => `${value} mpg` },
+        },
       },
       y: {
         scale: () => scaleBand<number>().paddingInner(0.2),
-        format: (value) => `${value} cyl`,
+        axis: {
+          ticks: { format: (value: number) => `${value} cyl` },
+        },
       },
       color: {
         scale: scaleSequential<string>,
@@ -322,16 +335,14 @@ export const createPenguinChart = (input: PenguinChartInput) =>
       x: {
         scale: scaleLinear,
         nice: true,
-        ticks: 3,
         grid: true,
-        label: 'Bill length (mm)',
+        axis: { ticks: { count: 3 }, label: 'Bill length (mm)' },
       },
       y: {
         scale: scaleLinear,
         nice: true,
-        ticks: 3,
         grid: true,
-        label: 'Bill depth (mm)',
+        axis: { ticks: { count: 3 }, label: 'Bill depth (mm)' },
       },
       color: {
         range: ['#ff625a', '#8579ff', '#45d49c'],
@@ -362,9 +373,8 @@ export const createSurveyStackChart = (input: {
     },
     y: {
       scale: scaleLinear,
-      ticks: 3,
       grid: true,
-      label: 'Responses',
+      axis: { ticks: { count: 3 }, label: 'Responses' },
     },
     color: {
       domain: surveyResponses,
diff --git a/packages/charts-core/README.md b/packages/charts-core/README.md
index 4fbe663..ca7c0dd 100644
--- a/packages/charts-core/README.md
+++ b/packages/charts-core/README.md
@@ -69,8 +69,8 @@ const downloads = defineChart({
   y: {
     scale: scaleLinear,
     nice: true,
-    label: 'Weekly downloads',
     grid: true,
+    axis: { label: 'Weekly downloads' },
   },
   color: {
     scale: () =>
@@ -198,7 +198,7 @@ const chart = defineChart({
   x: {
     scale: scaleLinear,
     nice: true,
-    label: 'Weekly downloads',
+    axis: { label: 'Weekly downloads' },
   },
   y: {
     scale: () => scaleBand<string>().padding(0.1),
diff --git a/packages/charts-core/docs/comparison.md b/packages/charts-core/docs/comparison.md
index 81f1fb1..a928cfc 100644
--- a/packages/charts-core/docs/comparison.md
+++ b/packages/charts-core/docs/comparison.md
@@ -12,14 +12,14 @@ evidence without turning untested behavior into a checkmark.
 
 | Library                                                                                | Package              | Measured source     |
 | -------------------------------------------------------------------------------------- | -------------------- | ------------------- |
-| [TanStack Charts](./overview.md)                                                       | `@tanstack/charts`   | workspace `5c36a38` |
+| [TanStack Charts](./overview.md)                                                       | `@tanstack/charts`   | workspace `093f81c` |
 | [Chart.js](https://www.chartjs.org/docs/latest/)                                       | `chart.js`           | npm `4.5.1`         |
 | [Apache ECharts](https://echarts.apache.org/handbook/en/best-practices/canvas-vs-svg/) | `echarts`            | npm `6.1.0`         |
 | [Recharts](https://recharts.github.io/en-US/)                                          | `recharts`           | npm `3.10.1`        |
 | [Observable Plot](https://observablehq.com/plot/features/plots)                        | `@observablehq/plot` | npm `0.6.17`        |
 
 The competitor versions are exact package pins, not latest versions inferred
-at page render time. The measured TanStack workspace revision is `5c36a38`.
+at page render time. The measured TanStack workspace revision is `093f81c`.
 
 ## Capability matrix
 
@@ -59,7 +59,7 @@ that lane externalizes React and React DOM.
 
 | Library         | Full cold-page gzip | React externalized |
 | --------------- | ------------------: | -----------------: |
-| TanStack Charts |     24.20–28.22 KiB |                  — |
+| TanStack Charts |     26.12–31.04 KiB |                  — |
 | Chart.js        |     44.70–58.21 KiB |                  — |
 | Apache ECharts  |   153.10–173.18 KiB |                  — |
 | Recharts        |   153.08–168.27 KiB |   94.96–109.96 KiB |
diff --git a/packages/charts-core/docs/concepts/chart-definitions.md b/packages/charts-core/docs/concepts/chart-definitions.md
index 462a1a1..f22c872 100644
--- a/packages/charts-core/docs/concepts/chart-definitions.md
+++ b/packages/charts-core/docs/concepts/chart-definitions.md
@@ -38,8 +38,8 @@ const letterFrequencies = defineChart({
   y: {
     scale: scaleLinear,
     nice: true,
-    label: 'Frequency',
     grid: true,
+    axis: { label: 'Frequency' },
   },
 })
 ```
@@ -57,7 +57,7 @@ const productRanking = defineChart({
     x: {
       scale: scaleLinear,
       nice: true,
-      ticks: width < 480 ? 4 : 7,
+      axis: { ticks: { count: width < 480 ? 4 : 7 } },
     },
     y: {
       scale: () => scaleBand<string>().padding(0.1),
@@ -106,7 +106,7 @@ function ProductRanking({ rows, metric }: Props) {
         x: {
           scale: scaleLinear,
           nice: true,
-          ticks: width < 480 ? 4 : 7,
+          axis: { ticks: { count: width < 480 ? 4 : 7 } },
         },
         y: {
           scale: () => scaleBand<string>().padding(0.1),
diff --git a/packages/charts-core/docs/concepts/data-and-channels.md b/packages/charts-core/docs/concepts/data-and-channels.md
index b8370be..f5ca377 100644
--- a/packages/charts-core/docs/concepts/data-and-channels.md
+++ b/packages/charts-core/docs/concepts/data-and-channels.md
@@ -89,9 +89,9 @@ also supplies that path grouping. When both are present, `z` wins for geometry
 and interaction grouping while `color` remains an independent color-scale
 value. Omitting `color` reuses `z` for color.
 
-On bars, neither channel implicitly invents grouped-bar geometry. Supply a D3
-`groupScale` when multiple bars must occupy sub-bands within one category.
-The scale uses `z` when present, otherwise `color`. See
+Bars stack their length channel by default. Use `layout: group()` when multiple
+bars must occupy sub-bands within one category. Grouping uses `z` when present,
+otherwise a discrete `color` channel may infer series identity. See
 [Bars and Rankings](../examples/bars-and-rankings.md).
 
 ## Color channels and constants
@@ -365,13 +365,13 @@ const bubbleChart = defineChart({
   ],
   x: {
     scale: scaleLinear,
-    label: 'Bill length (mm)',
     grid: true,
+    axis: { label: 'Bill length (mm)' },
   },
   y: {
     scale: scaleLinear,
-    label: 'Bill depth (mm)',
     grid: true,
+    axis: { label: 'Bill depth (mm)' },
   },
   color: {
     scale: scaleOrdinal(species, ['#2563eb', '#f97316', '#10b981']),
diff --git a/packages/charts-core/docs/concepts/grammar-of-graphics.md b/packages/charts-core/docs/concepts/grammar-of-graphics.md
index badabd4..46ad2f6 100644
--- a/packages/charts-core/docs/concepts/grammar-of-graphics.md
+++ b/packages/charts-core/docs/concepts/grammar-of-graphics.md
@@ -137,13 +137,13 @@ const axes = {
   x: {
     scale: scaleUtc,
     nice: true,
-    label: 'Month',
+    axis: { label: 'Month' },
   },
   y: {
     scale: scaleLinear,
     nice: true,
-    label: 'Revenue',
     grid: true,
+    axis: { label: 'Revenue' },
   },
 }
 ```
@@ -159,10 +159,14 @@ Axis guide options live next to their scale:
 ```ts
 const y = {
   scale: revenueScale,
-  label: 'Monthly revenue',
-  format: (value: number) => `$${Math.round(value / 1_000)}k`,
-  ticks: 5,
   grid: true,
+  axis: {
+    label: 'Monthly revenue',
+    ticks: {
+      count: 5,
+      format: (value: number) => `$${Math.round(value / 1_000)}k`,
+    },
+  },
 }
 ```
 
@@ -272,7 +276,7 @@ const composedChart = defineChart({
   ],
   x: {
     scale: () => scaleBand<Date>().padding(0.12),
-    label: 'Date',
+    axis: { label: 'Date' },
   },
   y: {
     scale: scaleLinear,
diff --git a/packages/charts-core/docs/concepts/layout-axes-and-coordinates.md b/packages/charts-core/docs/concepts/layout-axes-and-coordinates.md
index 018bfa3..f5cd51d 100644
--- a/packages/charts-core/docs/concepts/layout-axes-and-coordinates.md
+++ b/packages/charts-core/docs/concepts/layout-axes-and-coordinates.md
@@ -63,12 +63,14 @@ const chart = defineChart(({ width }) => ({
   marks: [lineY(rows, { x: 'date', y: 'value' })],
   x: {
     scale: xScale,
-    ticks: width < 420 ? 4 : 8,
-    tickRotate: width < 520 ? -30 : undefined,
+    axis: {
+      ticks: { count: width < 420 ? 4 : 8 },
+      tickLabels: { rotate: width < 520 ? -30 : undefined },
+    },
   },
   y: {
     scale: yScale,
-    label: width < 480 ? undefined : 'Weekly downloads',
+    axis: { label: width < 480 ? undefined : 'Weekly downloads' },
   },
 }))
 ```
@@ -124,10 +126,9 @@ inherited font and relayout after web fonts load.
 
 Advanced renderers can supply `measureText`. Its metrics include painted x and y offsets relative to the requested anchor and baseline, not only width and height. This is necessary for correct containment of rotated and anchored labels.
 
-Automatic margins contain chart-owned guides and Cartesian `text` marks; they do
-not avoid collisions between adjacent labels. Use `ticks` to reduce density,
-`tickRotate` when guide labels overlap, and explicit text placement when data
-labels overlap one another.
+Automatic margins contain chart-owned guides and Cartesian `text` marks. Axis
+tick labels are thinned against their measured, optionally rotated bounds.
+Explicit text placement remains responsible for data-label collisions.
 
 ## Axis guide options
 
@@ -136,34 +137,61 @@ Each axis combines a required scale factory or instance with optional guide cont
 ```ts
 const x = {
   scale: xScale,
-  label: 'Month',
-  ticks: 6,
-  format: (date: Date) => monthFormatter.format(date),
-  tickRotate: -30,
-  labelOffset: 12,
   grid: false,
+  axis: {
+    ticks: {
+      count: 6,
+      format: (date: Date) => monthFormatter.format(date),
+    },
+    tickLabels: { rotate: -30 },
+    label: { text: 'Month', offset: 12 },
+  },
 }
 ```
 
-| Option        | Purpose                                            |
-| ------------- | -------------------------------------------------- |
-| `guide`       | Show or hide this axis, its title, ticks, and grid |
-| `ticks`       | Suggested tick count                               |
-| `format`      | Format a typed tick value                          |
-| `grid`        | Draw grid lines at ticks                           |
-| `label`       | Axis title                                         |
-| `reverse`     | Reverse the responsive range                       |
-| `tickRotate`  | Rotate tick labels in degrees                      |
-| `labelOffset` | Add distance between the axis and title            |
+| Option            | Purpose                                              |
+| ----------------- | ---------------------------------------------------- |
+| `axis`            | Configure the axis or hide it with `false`           |
+| `axis.line`       | Show or hide the baseline                            |
+| `axis.ticks`      | Configure candidates, stubs, padding, and formatting |
+| `axis.tickLabels` | Configure label rotation and collision thinning      |
+| `axis.label`      | Configure the axis title and offset                  |
+| `grid`            | Draw grid lines at semantic candidates               |
+| `reverse`         | Reverse the responsive range                         |
 
 The y grid defaults to visible and the x grid defaults to hidden when `grid` is omitted.
 
+Candidate generation and label layout are separate. Choose at most one of
+`axis.ticks.count`, `axis.ticks.spacing`, and `axis.ticks.values`. Grid lines
+and tick stubs use the generated candidates; label thinning does not remove
+either. `axis.ticks.size: 0` removes stubs while retaining labels and grid
+lines.
+
+Rotation and thinning are independent. Thinning is enabled by default and
+uses measured rotated bounds:
+
+```ts
+const x = {
+  scale: xScale,
+  axis: {
+    ticks: { spacing: 80 },
+    tickLabels: {
+      rotate: -35,
+      thin: { minGap: 8, priority: 'ends', keep: importantDates },
+    },
+  },
+}
+```
+
+Hard-kept labels are retained even when they collide. Values absent from the
+candidate set add labels only.
+
 Hide one guide without removing its scale:
 
 ```ts
 const x = {
   scale: xScale,
-  guide: false,
+  axis: false,
 }
 ```
 
@@ -247,7 +275,8 @@ barX(rows, {
 
 The D3 band scale’s `paddingInner` and `paddingOuter` determine category spacing. `inset` removes additional pixels from both bar edges after layout.
 
-For side-by-side bars, `groupScale` subdivides the primary bandwidth. See [Bars and Rankings](../examples/bars-and-rankings.md).
+For side-by-side bars, `layout: group()` subdivides the primary bandwidth. See
+[Bars and Rankings](../examples/bars-and-rankings.md).
 
 ## Scene and pointer coordinates
 
@@ -327,9 +356,11 @@ const rankingChart = defineChart({
   x: {
     scale: scaleLinear,
     nice: true,
-    label: '2015 population',
-    format: (value) => compact.format(value),
     grid: true,
+    axis: {
+      label: '2015 population',
+      ticks: { format: (value) => compact.format(value) },
+    },
   },
   y: {
     scale: () => scaleBand<string>().paddingInner(0.12).paddingOuter(0.06),
diff --git a/packages/charts-core/docs/concepts/marks-and-layering.md b/packages/charts-core/docs/concepts/marks-and-layering.md
index daa3203..15bf86d 100644
--- a/packages/charts-core/docs/concepts/marks-and-layering.md
+++ b/packages/charts-core/docs/concepts/marks-and-layering.md
@@ -92,11 +92,10 @@ rule. When `z` is omitted on a connected line or area, an authored `color`
 channel supplies the path groups as well as color semantics. Explicit `z`
 always wins when the two fields differ.
 
-Bars use the primary band by default. Supply a configured D3 `groupScale` for
-side-by-side bars; it groups by `z` when present and otherwise by `color`.
-When rows should stack, prepare explicit `y1` and `y2` or `x1` and `x2`
-intervals before the mark. TanStack Charts does not guess whether bars should
-dodge, stack, or overlap.
+Bars stack their single quantitative channel by default. Use
+`layout: group({ scale })` for side-by-side bars; it groups by `z` when present
+and otherwise by discrete `color`. Explicit `y1`/`y2` or `x1`/`x2` channels
+opt out of implicit stacking and preserve authored intervals.
 
 ## Line and area gaps
 
@@ -239,13 +238,13 @@ const temperatureChart = defineChart({
   ],
   x: {
     scale: scaleUtc,
-    label: 'Day',
+    axis: { label: 'Day' },
   },
   y: {
     scale: scaleLinear,
     nice: true,
-    label: 'Temperature (°F)',
     grid: true,
+    axis: { label: 'Temperature (°F)' },
   },
 })
 ```
diff --git a/packages/charts-core/docs/concepts/scales-and-d3.md b/packages/charts-core/docs/concepts/scales-and-d3.md
index 9230802..bffd6f9 100644
--- a/packages/charts-core/docs/concepts/scales-and-d3.md
+++ b/packages/charts-core/docs/concepts/scales-and-d3.md
@@ -168,7 +168,9 @@ const categoryScale = () =>
 
 TanStack Charts applies the plot range, reads the scale bandwidth, and treats the mapped value as the center of the band for mark and interaction coordinates. Bars use the primary bandwidth by default.
 
-For grouped bars, pass a second band scale as the mark’s `groupScale`. Its range is assigned within the primary band. Grouping is explicit because `z` alone cannot decide whether a chart should overlap, stack, dodge, or only color its rows.
+For grouped bars, use `layout: group({ scale })`. The supplied band scale is
+copied and its range is assigned within the primary band. Grouping is explicit;
+the default length-channel geometry is stacked.
 
 ## Color scales
 
@@ -348,13 +350,13 @@ const logChart = defineChart({
   ],
   x: {
     scale: scaleLog().domain([200, 30_000]),
-    label: 'Class size',
     grid: true,
+    axis: { label: 'Class size' },
   },
   y: {
     scale: scaleLinear,
-    label: 'Hierarchy depth',
     grid: true,
+    axis: { label: 'Hierarchy depth' },
   },
 })
 ```
diff --git a/packages/charts-core/docs/examples/interactive-charts.md b/packages/charts-core/docs/examples/interactive-charts.md
index 5852347..64aca10 100644
--- a/packages/charts-core/docs/examples/interactive-charts.md
+++ b/packages/charts-core/docs/examples/interactive-charts.md
@@ -16,6 +16,7 @@ selection, or product record.
 | Reader task                                                  | Start with                                     |
 | ------------------------------------------------------------ | ---------------------------------------------- |
 | Inspect one point or a same-x group                          | Native chart focus and tooltip                 |
+| Paint a band, rule, or mark only for the active datum/group  | `whenFocused` around an ordinary mark          |
 | Keep rich framework detail open, including another chart     | Pinned composed tooltip body                   |
 | Navigate a wide schedule without changing its semantic scale | Native horizontal scrolling                    |
 | Crop and pan a continuous domain                             | Controlled zoom and viewport state             |
diff --git a/packages/charts-core/docs/examples/stacked-and-composition.md b/packages/charts-core/docs/examples/stacked-and-composition.md
index a287d10..b803bc2 100644
--- a/packages/charts-core/docs/examples/stacked-and-composition.md
+++ b/packages/charts-core/docs/examples/stacked-and-composition.md
@@ -24,16 +24,25 @@ values remain available elsewhere.
 | Which subgroup values must be compared precisely across groups? | Grouped bars or aligned small multiples |
 | Do contributions extend in positive and negative directions?    | Diverging stack around an explicit zero |
 
-Prepare explicit interval endpoints for every stacked row. The application
-owns series order, offset, normalization, and the denominator behind every
-proportion. [Scales and D3](../concepts/scales-and-d3.md) defines that
-preparation boundary.
+Single-value bar and area channels stack implicitly. Use `stackY` when the
+order or offset must be explicit; supply interval endpoints when the
+application has already computed them.
 
 ## Preserve totals with a stacked area
 
-A stacked area combines a shared ordered x domain with explicit lower and upper
-boundaries for every series. The top boundary carries the total; the thickness
-of each layer carries its contribution.
+A stacked area combines a shared ordered x domain with one length per series.
+The top boundary carries the total; the thickness of each layer carries its
+contribution.
+
+```ts
+areaY(
+  rows,
+  stackY(
+    { order: ['Core', 'Services'] },
+    { x: 'date', y: 'value', color: 'series' },
+  ),
+)
+```
 
 <iframe
   src="https://tanstack.com/charts/catalog/embed/04-stacked-time-area/?theme=system&height=420"
@@ -49,9 +58,8 @@ values appear to move substantially and breaks the reader's spatial memory.
 When one series needs precise comparison, place it on the shared baseline or
 give it a separate aligned view.
 
-The prepared rows should retain original values for tooltips and selection,
-even when marks consume `y1` and `y2` interval channels. See
-[Data and Channels](../concepts/data-and-channels.md).
+The original value remains available to tooltips and selection while the mark
+derives its stack endpoints.
 
 ## Compare proportional mix
 
@@ -72,8 +80,8 @@ Format the quantitative guide as a percentage and state the denominator. Keep
 raw totals available in a tooltip, table, or companion view when the reader may
 otherwise mistake stable share for stable volume.
 
-Normalize within each x group before rendering. Do not normalize the complete
-dataset once and then divide it into time slices.
+Use `stackY({ offset: 'normalize' }, channels)`. Normalization is resolved
+independently at each x position.
 
 ## Emphasize changing shape
 
@@ -90,9 +98,10 @@ but the displaced baseline makes precise values and totals difficult to read.
   style="width:100%;height:420px;border:0;"
 ></iframe>
 
-Treat offset and layer order as analytical parameters. Keep them deterministic
-across revisions, preserve stable series colors, and provide exact values
-through [Tooltips and Focus](../guides/tooltips-and-focus.md).
+Use `offset: 'center'` or `offset: 'wiggle'` and an explicit order when the
+composition depends on them. Keep those values stable across revisions,
+preserve series colors, and provide exact values through
+[Tooltips and Focus](../guides/tooltips-and-focus.md).
 
 Use an ordinary stacked area when totals or baselines are part of the question.
 
diff --git a/packages/charts-core/docs/framework/octane/adapter.md b/packages/charts-core/docs/framework/octane/adapter.md
index c8d1eac..e43766a 100644
--- a/packages/charts-core/docs/framework/octane/adapter.md
+++ b/packages/charts-core/docs/framework/octane/adapter.md
@@ -58,7 +58,7 @@ The default Node target renders the complete `.ts-chart-host`,
 `.ts-chart-surface`, and accessible SVG at `initialWidth`. The browser target
 hydrates the same structure before mounting the host.
 
-The Canvas entry renders a deterministic named root and two `aria-hidden`
+The Canvas entry renders a deterministic named root and three `aria-hidden`
 canvases on the server. It paints no server pixels. The browser adopts the
 elements, paints after mount, and attaches the same focus, keyboard, tooltip,
 and selection host.
diff --git a/packages/charts-core/docs/framework/octane/quick-start.md b/packages/charts-core/docs/framework/octane/quick-start.md
index 410df5e..f649710 100644
--- a/packages/charts-core/docs/framework/octane/quick-start.md
+++ b/packages/charts-core/docs/framework/octane/quick-start.md
@@ -56,9 +56,11 @@ const letterFrequencyChart = defineChart({
   y: {
     scale: scaleLinear,
     nice: true,
-    label: 'Frequency',
-    format: (value) => percent.format(value),
     grid: true,
+    axis: {
+      label: 'Frequency',
+      ticks: { format: (value) => percent.format(value) },
+    },
   },
   tooltip: true,
 })
diff --git a/packages/charts-core/docs/framework/react/adapter.md b/packages/charts-core/docs/framework/react/adapter.md
index 7e932a5..826014d 100644
--- a/packages/charts-core/docs/framework/react/adapter.md
+++ b/packages/charts-core/docs/framework/react/adapter.md
@@ -68,7 +68,7 @@ The client renders the same initial structure, then the layout effect adopts
 and reconciles that SVG. There is no placeholder-only server mode.
 
 The Canvas entry emits the same outer structure with a named Canvas root and
-two `aria-hidden` canvases. It does not paint pixels on the server. The client
+three `aria-hidden` canvases. It does not paint pixels on the server. The client
 adopts those elements, paints after mount, and attaches the same focus,
 keyboard, tooltip, and selection host.
 
diff --git a/packages/charts-core/docs/framework/react/quick-start.md b/packages/charts-core/docs/framework/react/quick-start.md
index 0d88e12..76b1f04 100644
--- a/packages/charts-core/docs/framework/react/quick-start.md
+++ b/packages/charts-core/docs/framework/react/quick-start.md
@@ -56,9 +56,11 @@ const letterFrequencyChart = defineChart({
   y: {
     scale: scaleLinear,
     nice: true,
-    label: 'Frequency',
-    format: (value) => percent.format(value),
     grid: true,
+    axis: {
+      label: 'Frequency',
+      ticks: { format: (value) => percent.format(value) },
+    },
   },
   tooltip: true,
 })
diff --git a/packages/charts-core/docs/guides/accessibility.md b/packages/charts-core/docs/guides/accessibility.md
index c3ed331..1ff0fb4 100644
--- a/packages/charts-core/docs/guides/accessibility.md
+++ b/packages/charts-core/docs/guides/accessibility.md
@@ -33,7 +33,7 @@ visible nearby:
 The SVG renderer emits an image role, a chart roledescription, and a `<desc>`
 when a description is supplied. The Canvas renderer places the same image role,
 name, roledescription, description, and tab index on its root while keeping its
-two paint canvases `aria-hidden`. Do not put instructions, conclusions, and all
+three paint canvases `aria-hidden`. Do not put instructions, conclusions, and all
 underlying data into one enormous accessible name.
 
 ## Preserve semantic context outside the surface
diff --git a/packages/charts-core/docs/guides/dynamic-data-and-animation.md b/packages/charts-core/docs/guides/dynamic-data-and-animation.md
index a755232..9500a93 100644
--- a/packages/charts-core/docs/guides/dynamic-data-and-animation.md
+++ b/packages/charts-core/docs/guides/dynamic-data-and-animation.md
@@ -27,7 +27,7 @@ function RankingChart({ rows, metric, accent }: Props) {
         x: {
           scale: scaleLinear,
           nice: true,
-          ticks: width < 420 ? 4 : 7,
+          axis: { ticks: { count: width < 420 ? 4 : 7 } },
         },
         y: {
           scale: () => scaleBand<string>().padding(0.1),
diff --git a/packages/charts-core/docs/guides/exporting.md b/packages/charts-core/docs/guides/exporting.md
index 08f12f2..fb2fbd0 100644
--- a/packages/charts-core/docs/guides/exporting.md
+++ b/packages/charts-core/docs/guides/exporting.md
@@ -91,12 +91,12 @@ coordinate system.
 Pass the Canvas root or an ancestor containing it to the same
 `renderChartImage` or `downloadChartImage` functions. The exporter draws the
 base scene layer at the requested dimensions and scale. Set
-`includeFocus: true` to composite the focus overlay; it is excluded by
+`includeFocus: true` to composite the focus layers; they are excluded by
 default.
 
-Canvas focus is painted on a separate overlay so pointer movement does not
-repaint the base scene. Applications that need only the raw base bitmap may
-also call `toBlob()` or `toDataURL()` on
+Canvas focus is painted on underlay and overlay canvases so pointer movement
+does not repaint the base scene. Applications that need only the raw base
+bitmap may also call `toBlob()` or `toDataURL()` on
 `CanvasChartSurface.canvas`. Unlike SVG serialization, Canvas export does not
 retain vector geometry, accessible markup, or independently styleable nodes.
 
@@ -129,7 +129,7 @@ needs embedded or inlined assets.
 - Fonts and external resources are portable.
 - Focus decoration is included only when meaningful.
 - Raster scale is chosen for the target medium.
-- A Canvas export intentionally includes or excludes the focus overlay.
+- A Canvas export intentionally includes or excludes focus layers.
 
 See [Rendering and Export](../reference/rendering-and-export.md) for every
 function and option.
diff --git a/packages/charts-core/docs/guides/migrating.md b/packages/charts-core/docs/guides/migrating.md
index ce3f47e..6954720 100644
--- a/packages/charts-core/docs/guides/migrating.md
+++ b/packages/charts-core/docs/guides/migrating.md
@@ -49,6 +49,16 @@ Map each visible layer independently:
 Then assign explicit scales and guides. Complex charts are usually several
 ordinary marks sharing a coordinate system, not one specialized chart type.
 
+For the current breaking API:
+
+- move axis presentation under `axis`;
+- use `axis: false` to hide one axis while retaining its scale;
+- move candidate count and formatting under `axis.ticks`;
+- move rotation and thinning under `axis.tickLabels`;
+- use a single bar/area value as stack length, explicit endpoints to opt out,
+  and `layout: group()` for side-by-side bars;
+- replace renderer-specific focus decoration with `whenFocused`.
+
 See [Marks and Layering](../concepts/marks-and-layering.md) and the
 [Example Gallery](../examples/index.md).
 
diff --git a/packages/charts-core/docs/guides/responsive-charts.md b/packages/charts-core/docs/guides/responsive-charts.md
index 516c703..7933e5d 100644
--- a/packages/charts-core/docs/guides/responsive-charts.md
+++ b/packages/charts-core/docs/guides/responsive-charts.md
@@ -70,7 +70,7 @@ const definition = defineChart({
   x: {
     scale: scaleLinear,
     nice: true,
-    label: 'Weekly downloads',
+    axis: { label: 'Weekly downloads' },
   },
   y: {
     scale: () => scaleBand<string>().padding(0.1),
@@ -87,9 +87,9 @@ margin: {
 ```
 
 `margin: 0` locks every side and is appropriate for guide-free sparklines.
-Automatic margins guarantee containment, not collision-free labels. Use
-`ticks`, `tickRotate`, or a different representation when labels compete for
-the same axis space.
+Axis labels thin automatically after candidate generation and optional
+rotation. Use `axis.ticks.spacing`, `axis.tickLabels.rotate`, hard-kept labels,
+or a different representation when labels compete for the same axis space.
 
 <iframe
   src="https://tanstack.com/charts/catalog/embed/44-framed-scatter/?theme=system&height=320"
diff --git a/packages/charts-core/docs/guides/tooltips-and-focus.md b/packages/charts-core/docs/guides/tooltips-and-focus.md
index 30b7a98..4391684 100644
--- a/packages/charts-core/docs/guides/tooltips-and-focus.md
+++ b/packages/charts-core/docs/guides/tooltips-and-focus.md
@@ -31,6 +31,39 @@ The default focus strategy resolves one nearest point in two dimensions.
 `maxFocusDistance` defaults to 48 scene pixels. Empty space farther from any
 point clears transient focus.
 
+## Focus presentation
+
+The default focus marker is an implicit focus-filtered mark. Replace it by
+filtering any ordinary mark with `whenFocused`:
+
+```ts
+import { bandX, whenFocused } from '@tanstack/charts'
+
+const definition = defineChart({
+  focus: 'group-x',
+  marks: [
+    whenFocused(
+      bandX(rows, {
+        x: 'date',
+        fill: '#64748b',
+        fillOpacity: 0.14,
+        inset: -6,
+      }),
+      { match: 'x' },
+    ),
+    lineY(rows, { x: 'date', y: 'value', color: 'series' }),
+  ],
+})
+```
+
+The mark before the line paints below it; moving it after the line paints
+above it. Focus marks contribute channels to scale inference but do not add hit
+targets. Their scene nodes update from the centralized focus state without
+rebuilding the scene or repainting base Canvas geometry.
+
+`match` accepts `primary`, `group`, `key`, `x`, `y`, or `series`. The same
+focused group drives tooltips and every filtered mark.
+
 ## Axis focus modes
 
 | Mode        | Result                                     |
@@ -180,23 +213,39 @@ const definition = defineChart({
 })
 ```
 
+Axis coordinates can be selected independently. This keeps a grouped tooltip
+centered over the plot while fixing it to the top edge:
+
+```ts
+const tooltip = {
+  anchor: { x: 'plot-center', y: 'plot-top' },
+  placement: 'bottom',
+}
+```
+
+X accepts `point`, `pointer`, `value`, `group-center`, `plot-left`,
+`plot-center`, and `plot-right`. Y accepts `point`, `pointer`, `value`,
+`group-center`, `plot-top`, `plot-center`, and `plot-bottom`. Pointer
+coordinates fall back to the focused value for keyboard focus.
+
 A custom resolver covers event ranges, maps, and application-specific
 reference positions:
 
 ```ts
 const tooltip = {
-  anchor: (_points, { chart }) => ({
-    x: chart.x + chart.width,
-    y: chart.y,
+  anchor: (_points, { focus, pointer, plot, surface, scales }) => ({
+    x: plot.x + plot.width,
+    y: plot.y,
   }),
   placement: 'bottom-left',
 }
 ```
 
-Resolvers and placement use scene pixels. A nullish or non-finite custom
-anchor falls back to the primary point. A placement list uses the first fit,
-then the least-overflowing candidate. Every result shifts inside the chart
-surface.
+The callback receives the complete focus state, current pointer or `null`,
+plot bounds, surface size, and resolved scales. Resolvers and placement use
+scene pixels. A nullish or non-finite custom anchor falls back to the primary
+point. A placement list uses the first fit, then the least-overflowing
+candidate. Every result shifts inside the chart surface.
 
 ## Escaping clipped containers
 
diff --git a/packages/charts-core/docs/overview.md b/packages/charts-core/docs/overview.md
index 0981382..b5c03b0 100644
--- a/packages/charts-core/docs/overview.md
+++ b/packages/charts-core/docs/overview.md
@@ -82,13 +82,13 @@ const closingPriceChart = defineChart({
   x: {
     scale: scaleUtc,
     nice: true,
-    label: 'Date',
+    axis: { label: 'Date' },
   },
   y: {
     scale: scaleLinear,
     nice: true,
-    label: 'Close (USD)',
     grid: true,
+    axis: { label: 'Close (USD)' },
   },
 })
 ```
diff --git a/packages/charts-core/docs/quick-start.md b/packages/charts-core/docs/quick-start.md
index 05b1613..e3ce86d 100644
--- a/packages/charts-core/docs/quick-start.md
+++ b/packages/charts-core/docs/quick-start.md
@@ -50,13 +50,13 @@ const closingPriceChart = defineChart({
   x: {
     scale: scaleUtc,
     nice: true,
-    label: 'Date',
+    axis: { label: 'Date' },
   },
   y: {
     scale: scaleLinear,
     nice: true,
-    label: 'Close (USD)',
     grid: true,
+    axis: { label: 'Close (USD)' },
   },
   tooltip: true,
 })
diff --git a/packages/charts-core/docs/reference/chart-definitions.md b/packages/charts-core/docs/reference/chart-definitions.md
index 0a16263..8622fd6 100644
--- a/packages/charts-core/docs/reference/chart-definitions.md
+++ b/packages/charts-core/docs/reference/chart-definitions.md
@@ -62,7 +62,7 @@ const definition = defineChart({
     y: {
       scale: scaleLinear,
       nice: true,
-      ticks: width < 480 ? 4 : 7,
+      axis: { ticks: { count: width < 480 ? 4 : 7 } },
       grid: true,
     },
   }),
@@ -109,7 +109,7 @@ const definition = useMemo(() => {
     x: {
       scale: scaleLinear,
       nice: true,
-      ticks: width < 480 ? 4 : 7,
+      axis: { ticks: { count: width < 480 ? 4 : 7 } },
     },
     y: {
       scale: () => scaleBand().padding(0.1),
diff --git a/packages/charts-core/docs/reference/chart-spec.md b/packages/charts-core/docs/reference/chart-spec.md
index 829f190..05822f8 100644
--- a/packages/charts-core/docs/reference/chart-spec.md
+++ b/packages/charts-core/docs/reference/chart-spec.md
@@ -96,14 +96,14 @@ const horizontalThresholds = defineChart({
 })
 ```
 
-`guide: false` hides an axis but does not remove its scale. Scene compilation
+`axis: false` hides an axis but does not remove its scale. Scene compilation
 still guards untyped consumers that omit or null an axis used by a mark.
 
 ## Guides and margins
 
 Guide visibility and geometry are separate:
 
-- `x.guide: false` or `y.guide: false` hides one guide.
+- `x.axis: false` or `y.axis: false` hides one axis.
 - `guides: false` hides all guides and removes their implicit margin.
 - Omitted `margin` sides are measured from ticks, rotation, titles, edge
   overhang, color legends, and Cartesian `text` marks.
diff --git a/packages/charts-core/docs/reference/focus-and-interaction.md b/packages/charts-core/docs/reference/focus-and-interaction.md
index 221c283..2875226 100644
--- a/packages/charts-core/docs/reference/focus-and-interaction.md
+++ b/packages/charts-core/docs/reference/focus-and-interaction.md
@@ -21,7 +21,7 @@ With no custom focus strategy:
 - `Enter` and Space toggle an enabled sticky tooltip and call `onSelect` for
   the focused point
 - a click focuses and selects the nearest point, or selects `null`
-- the renderer's focus ring follows the primary point
+- the default focus-filtered marker follows the primary point
 
 `maxFocusDistance` defaults to `48` scene pixels. Set `tabIndex` to control
 normal tab-order participation while keeping keyboard handling enabled. Set
@@ -53,6 +53,43 @@ The equivalent `focusX`, `focusY`, `focusNearestX`, and `focusNearestY`
 strategy objects remain available from `@tanstack/charts/focus` for composition
 or direct strategy use.
 
+## Focus-filtered marks
+
+`whenFocused(mark, { match })` turns an ordinary mark into transient focus
+presentation. It uses the chart's existing focus state and never participates
+in pointer hit testing.
+
+```ts
+import { bandX, lineY, whenFocused } from '@tanstack/charts'
+
+const marks = [
+  whenFocused(
+    bandX(rows, {
+      x: 'date',
+      fill: '#64748b',
+      fillOpacity: 0.14,
+      inset: -6,
+    }),
+    { match: 'x' },
+  ),
+  lineY(rows, { x: 'date', y: 'value', color: 'series' }),
+]
+```
+
+| Match     | Visible rows                                     |
+| --------- | ------------------------------------------------ |
+| `primary` | The primary focused datum                        |
+| `group`   | Datums represented by the complete focused group |
+| `key`     | The primary point's stable key                   |
+| `x`       | Rows sharing the primary semantic x value        |
+| `y`       | Rows sharing the primary semantic y value        |
+| `series`  | Rows sharing the primary series/group identity   |
+
+Mark order controls layering. A leading filtered mark paints below ordinary
+marks; a later one paints above them. Supplying any custom focus-filtered mark
+replaces the implicit default marker. SVG toggles matching scene nodes; Canvas
+repaints only its focus layers.
+
 ## Disabling chart-owned focus
 
 ```ts
@@ -136,7 +173,7 @@ interface ChartTooltipOptions<
 | `portal`      | `false`        | Escapes clipping through top-layer or fixed positioning |
 | `items`       | Automatic x/y  | Ordered rows for a single focused point                 |
 | `sort`        | `color-domain` | Grouped row order                                       |
-| `anchor`      | `point`        | Point, pointer, group center, or coordinate resolver    |
+| `anchor`      | `point`        | Preset, per-axis coordinates, or coordinate resolver    |
 | `placement`   | `auto`         | Fixed or ordered fallback box placements                |
 | `offset`      | `10`           | Scene-pixel gap between anchor and box                  |
 | `content`     | Automatic rows | Returns a safe title and structured rows                |
@@ -195,9 +232,11 @@ grouped structure belongs in `content`.
 - `pointer` follows the current pointer and falls back to the point for
   keyboard focus.
 - `group-center` uses the center of the focused points' bounding box.
-- A resolver receives the focused points plus pointer, chart bounds, width,
-  and height, and returns scene coordinates. A nullish or non-finite result
-  falls back to the primary point.
+- `{ x, y }` selects each coordinate independently from the point, pointer,
+  focused value, group center, or a plot edge/center.
+- A resolver receives the focused points plus `{ focus, pointer, plot,
+surface, scales }` and returns scene coordinates. A nullish or non-finite
+  result falls back to the primary point.
 
 `placement` accepts `auto`, one placement, or an ordered fallback list. The
 placements are `top`, `top-right`, `right`, `bottom-right`, `bottom`,
@@ -208,7 +247,7 @@ it uses the least-overflowing candidate and shifts it inside. `auto` uses
 
 ```ts
 const tooltip = {
-  anchor: 'group-center',
+  anchor: { x: 'plot-center', y: 'plot-top' },
   placement: ['top', 'right', 'left', 'bottom'],
   offset: 12,
 }
diff --git a/packages/charts-core/docs/reference/index.md b/packages/charts-core/docs/reference/index.md
index ef59e59..c83a68e 100644
--- a/packages/charts-core/docs/reference/index.md
+++ b/packages/charts-core/docs/reference/index.md
@@ -68,6 +68,7 @@ capabilities and individual marks independently tree-shakeable.
 | `@tanstack/charts/area`              | `areaY`                                                                                                                                                                        |
 | `@tanstack/charts/area-x`            | `areaX`                                                                                                                                                                        |
 | `@tanstack/charts/arrow`             | `arrow`                                                                                                                                                                        |
+| `@tanstack/charts/band`              | `bandX`, `bandY`                                                                                                                                                               |
 | `@tanstack/charts/bar`               | `barX`, `barY`                                                                                                                                                                 |
 | `@tanstack/charts/canvas`            | `mountCanvasChart`, `canvasChartRenderer`, `createCanvasChartRenderer`, and Canvas host/surface types                                                                          |
 | `@tanstack/charts/d3/area-x`         | `d3AreaXCurve`                                                                                                                                                                 |
@@ -78,8 +79,10 @@ capabilities and individual marks independently tree-shakeable.
 | `@tanstack/charts/facet`             | `facet`, `facetChart`                                                                                                                                                          |
 | `@tanstack/charts/focus`             | `focusX`, `focusY`, `focusNearestX`, `focusNearestY`                                                                                                                           |
 | `@tanstack/charts/focus/disabled`    | `focusDisabled`                                                                                                                                                                |
+| `@tanstack/charts/focus/mark`        | `whenFocused`                                                                                                                                                                  |
 | `@tanstack/charts/frame`             | `frame`                                                                                                                                                                        |
 | `@tanstack/charts/geo`               | `geoShape` and geographic projection types                                                                                                                                     |
+| `@tanstack/charts/group`             | `group`, `GroupLayout`, `GroupOptions`                                                                                                                                         |
 | `@tanstack/charts/hexagon`           | `hexagon`                                                                                                                                                                      |
 | `@tanstack/charts/legend`            | `colorLegend`, `colorGradientLegend`                                                                                                                                           |
 | `@tanstack/charts/line`              | `lineY`                                                                                                                                                                        |
@@ -95,6 +98,7 @@ capabilities and individual marks independently tree-shakeable.
 | `@tanstack/charts/svg`               | `renderChartSvg`                                                                                                                                                               |
 | `@tanstack/charts/svg/renderer`      | `createSvgChartRenderer`, `svgChartRenderer`                                                                                                                                   |
 | `@tanstack/charts/svg/resources`     | `renderChartSvgWithResources`                                                                                                                                                  |
+| `@tanstack/charts/stack`             | `stackY`, `StackOptions`, `StackOrder`, `StackOffset`, `StackYChannels`                                                                                                        |
 | `@tanstack/charts/text`              | `text`                                                                                                                                                                         |
 | `@tanstack/charts/tick`              | `tickX`, `tickY`                                                                                                                                                               |
 | `@tanstack/charts/vector`            | `vector`                                                                                                                                                                       |
diff --git a/packages/charts-core/docs/reference/marks/bar-and-rect.md b/packages/charts-core/docs/reference/marks/bar-and-rect.md
index b82fc31..6f964b6 100644
--- a/packages/charts-core/docs/reference/marks/bar-and-rect.md
+++ b/packages/charts-core/docs/reference/marks/bar-and-rect.md
@@ -9,7 +9,7 @@ primitive for heatmaps, interval blocks, and cells.
 
 ```ts
 import { scaleBand } from 'd3-scale'
-import { barX, barY, cell, rect } from '@tanstack/charts'
+import { barX, barY, cell, group, rect, stackY } from '@tanstack/charts'
 ```
 
 ## `barY`
@@ -32,21 +32,21 @@ function barY<TDatum>(
 
 ### Options
 
-| Option        | Type                                 | Default                        | Meaning                                         |
-| ------------- | ------------------------------------ | ------------------------------ | ----------------------------------------------- |
-| `id`          | `string`                             | Layer-derived                  | Stable mark ID                                  |
-| `x`           | `Channel<TDatum, ChartValue?>`       | Row index                      | Bar category or center                          |
-| `y`           | `Channel<TDatum, number?>`           | Numeric datum                  | Value endpoint when `y2` is absent              |
-| `y1`          | `number \| Channel<TDatum, number?>` | `0`                            | Baseline endpoint                               |
-| `y2`          | `number \| Channel<TDatum, number?>` | `y`                            | Value endpoint; takes precedence over `y`       |
-| `z`           | `Channel<TDatum, ChartKey?>`         | No group                       | Group identity; color fallback when omitted     |
-| `color`       | `Channel<TDatum, ChartKey?>`         | `z`                            | Independent value sent to the chart color scale |
-| `key`         | `Channel<TDatum, ChartKey>`          | Top/nested `id`, x, then index | Stable scene and interaction identity           |
-| `fill`        | `VisualChannel<TDatum, string>`      | Resolved `color`               | Final bar paint override                        |
-| `fillOpacity` | `number`                             | SVG default                    | Fill opacity                                    |
-| `groupScale`  | `ConfiguredScaleLike`                | None                           | Positions `z`, or `color` without `z`, in x     |
-| `inset`       | `number`                             | `0`                            | Pixels removed from both categorical edges      |
-| `radius`      | `number`                             | None                           | SVG rectangle corner radius                     |
+| Option        | Type                                 | Default                        | Meaning                                          |
+| ------------- | ------------------------------------ | ------------------------------ | ------------------------------------------------ |
+| `id`          | `string`                             | Layer-derived                  | Stable mark ID                                   |
+| `x`           | `Channel<TDatum, ChartValue?>`       | Row index                      | Bar category or center                           |
+| `y`           | `Channel<TDatum, number?>`           | Numeric datum                  | Length; implicitly stacked at each x             |
+| `y1`          | `number \| Channel<TDatum, number?>` | Implicit stack start           | Explicit baseline endpoint                       |
+| `y2`          | `number \| Channel<TDatum, number?>` | Implicit stack end             | Explicit value endpoint; takes precedence over y |
+| `z`           | `Channel<TDatum, ChartKey?>`         | No group                       | Group identity; color fallback when omitted      |
+| `color`       | `Channel<TDatum, ChartKey?>`         | `z`                            | Independent value sent to the chart color scale  |
+| `key`         | `Channel<TDatum, ChartKey>`          | Top/nested `id`, x, then index | Stable scene and interaction identity            |
+| `fill`        | `VisualChannel<TDatum, string>`      | Resolved `color`               | Final bar paint override                         |
+| `fillOpacity` | `number`                             | SVG default                    | Fill opacity                                     |
+| `layout`      | `GroupLayout`                        | Stacked                        | `group()` opts into side-by-side subgroup slots  |
+| `inset`       | `number`                             | `0`                            | Pixels removed from both categorical edges       |
+| `radius`      | `number`                             | None                           | SVG rectangle corner radius                      |
 
 The interaction point is at the group-band center and the `y2`/`y` endpoint.
 Its semantic `xValue` is x and its `yValue` is the value endpoint.
@@ -74,16 +74,16 @@ Its options transpose `barY`:
 | Option        | Type                                 | Default                        | Meaning                                     |
 | ------------- | ------------------------------------ | ------------------------------ | ------------------------------------------- |
 | `id`          | `string`                             | Layer-derived                  | Stable mark ID                              |
-| `x`           | `Channel<TDatum, number?>`           | Numeric datum                  | Value endpoint when `x2` is absent          |
-| `x1`          | `number \| Channel<TDatum, number?>` | `0`                            | Baseline endpoint                           |
-| `x2`          | `number \| Channel<TDatum, number?>` | `x`                            | Value endpoint; takes precedence over `x`   |
+| `x`           | `Channel<TDatum, number?>`           | Numeric datum                  | Length; implicitly stacked at each y        |
+| `x1`          | `number \| Channel<TDatum, number?>` | Implicit stack start           | Explicit baseline endpoint                  |
+| `x2`          | `number \| Channel<TDatum, number?>` | Implicit stack end             | Explicit value endpoint; takes precedence   |
 | `y`           | `Channel<TDatum, ChartValue?>`       | Row index                      | Bar category or center                      |
 | `z`           | `Channel<TDatum, ChartKey?>`         | No group                       | Group identity; color fallback when omitted |
 | `color`       | `Channel<TDatum, ChartKey?>`         | `z`                            | Independent color-scale value               |
 | `key`         | `Channel<TDatum, ChartKey>`          | Top/nested `id`, y, then index | Stable identity                             |
 | `fill`        | `VisualChannel<TDatum, string>`      | Resolved `color`               | Final bar paint override                    |
 | `fillOpacity` | `number`                             | SVG default                    | Fill opacity                                |
-| `groupScale`  | `ConfiguredScaleLike`                | None                           | Positions `z`, or `color` without `z`, in y |
+| `layout`      | `GroupLayout`                        | Stacked                        | `group()` opts into side-by-side slots      |
 | `inset`       | `number`                             | `0`                            | Pixels removed from both categorical edges  |
 | `radius`      | `number`                             | None                           | Corner radius                               |
 
@@ -106,25 +106,25 @@ rather than negative geometry.
 
 ## Grouped bars
 
-Pass a band-scale factory to infer its domain from the grouping channel:
+Grouping is explicit:
 
 ```ts
 barY(rows, {
   x: 'quarter',
   y: 'revenue',
   color: 'region',
-  groupScale: () => scaleBand<string>().padding(0.1),
+  layout: group(),
 })
 ```
 
-TanStack Charts creates the scale and assigns
-`[0, categoricalBandwidth]` as its range. Pass a configured scale instance
-when subgroup order is fixed independently of the rendered rows.
+`group()` creates a secondary band scale inside the primary categorical band.
+Use `group({ padding: 0.2 })` for the common spacing control, or pass
+`group({ scale })` when subgroup order is fixed application state.
 
-With `groupScale`, an explicit `z` supplies subgroup geometry. If `z` is
-omitted, `color` supplies both subgroup geometry and color semantics. When
-both are present, `z` controls placement and interaction grouping while
-`color` remains independent.
+An explicit `z` supplies subgroup identity. If `z` is omitted, a discrete
+`color` channel may supply identity after grouped geometry has been selected.
+When both are present, `z` controls placement and interaction grouping while
+`color` remains independent. A continuous color channel cannot infer series.
 
 The mark throws when:
 
@@ -132,18 +132,87 @@ The mark throws when:
 - a grouped row has a null effective group value
 - a group value is outside the group-scale domain or maps to a nonfinite position
 
-Without `groupScale`, neither `z` nor `color` invents side-by-side geometry.
+Color never chooses stacked versus grouped geometry.
+
+## Stacked bars
+
+The single value channel is a length. Repeated categorical positions stack
+automatically, with positive and negative values diverging from zero:
+
+```ts
+barY(rows, {
+  x: 'quarter',
+  y: 'revenue',
+  color: 'region',
+})
+```
+
+Use `z` when series identity differs from color. Wrap the channels in
+`stackY` to select order or offset:
+
+```ts
+barY(
+  rows,
+  stackY(
+    { order: ['Core', 'Services'], offset: 'normalize' },
+    { x: 'quarter', y: 'revenue', color: 'segment' },
+  ),
+)
+```
+
+`order` accepts input order, ascending or descending absolute totals, or an
+explicit series list. `reverse` reverses the resolved order. `offset` accepts
+`diverging` (default), `normalize`, `center`, or `wiggle`.
+
+```ts
+type StackOrder = 'input' | 'ascending' | 'descending' | readonly ChartKey[]
+type StackOffset = 'diverging' | 'normalize' | 'center' | 'wiggle'
+
+interface StackOptions {
+  order?: StackOrder
+  offset?: StackOffset
+  reverse?: boolean
+}
+
+type StackYChannels<TChannels extends object> = TChannels
+```
+
+Supplying `y1` or `y2` opts out of implicit stacking and treats the channels
+as authored endpoints. The same contract is transposed for `barX`.
 
 ## Bar baselines and invalid rows
 
-Omitting `y1` or `x1` uses zero and emits an `includeZero` scale hint. An
-explicit baseline, including a constant zero, removes the hint. The configured
-scale still owns its semantic domain.
+Implicit stacks include zero in inferred quantitative domains. Explicit
+endpoints contribute their authored bounds. The configured scale still owns
+its semantic domain.
 
 Rows are skipped when their category, baseline, or endpoint is invalid.
 Negative and reversed intervals are supported because geometry uses the
 minimum mapped endpoint and absolute length.
 
+## `bandX` and `bandY`
+
+`bandX` paints the complete plot height at each x value. `bandY` paints the
+complete plot width at each y value. They are ordinary marks used for
+categorical backgrounds and focus presentation:
+
+```ts
+whenFocused(
+  bandX(rows, {
+    x: 'category',
+    fill: '#64748b',
+    fillOpacity: 0.14,
+    inset: -6,
+  }),
+  { match: 'x' },
+)
+```
+
+`BandXOptions` and `BandYOptions` provide the positional channel, `z`, `color`,
+`key`, `fill`, `fillOpacity`, `inset`, and `radius`. A negative inset expands
+the resolved band. The helpers are also available from
+`@tanstack/charts/band`.
+
 ## `rect`
 
 `rect` draws one independent x/y interval per valid row:
diff --git a/packages/charts-core/docs/reference/marks/line-and-area.md b/packages/charts-core/docs/reference/marks/line-and-area.md
index 7d404f8..81d093d 100644
--- a/packages/charts-core/docs/reference/marks/line-and-area.md
+++ b/packages/charts-core/docs/reference/marks/line-and-area.md
@@ -9,7 +9,7 @@ undefined, invalid, or nonfinite create gaps instead of connecting across
 missing data.
 
 ```ts
-import { areaX, areaY, defineChart, lineY } from '@tanstack/charts'
+import { areaX, areaY, defineChart, lineY, stackY } from '@tanstack/charts'
 ```
 
 ## `lineY`
@@ -86,9 +86,9 @@ function areaY<TDatum>(
 | ------------- | ------------------------------------ | ------------------------------ | -------------------------------------------------------------- |
 | `id`          | `string`                             | Layer-derived                  | Stable mark ID                                                 |
 | `x`           | `Channel<TDatum, ChartValue?>`       | Row index                      | Shared horizontal position                                     |
-| `y`           | `Channel<TDatum, number?>`           | Numeric datum                  | Upper value when `y2` is absent                                |
-| `y1`          | `number \| Channel<TDatum, number?>` | `0`                            | Lower baseline                                                 |
-| `y2`          | `number \| Channel<TDatum, number?>` | `y`                            | Upper value; takes precedence over `y`                         |
+| `y`           | `Channel<TDatum, number?>`           | Numeric datum                  | Layer thickness; implicitly stacked at each x                  |
+| `y1`          | `number \| Channel<TDatum, number?>` | Implicit stack start           | Explicit lower boundary                                        |
+| `y2`          | `number \| Channel<TDatum, number?>` | Implicit stack end             | Explicit upper boundary; takes precedence over y               |
 | `z`           | `Channel<TDatum, ChartKey?>`         | No explicit group              | Area grouping; overrides color grouping                        |
 | `color`       | `Channel<TDatum, ChartKey?>`         | `z`                            | Color-scale value; groups when `z` is absent                   |
 | `key`         | `Channel<TDatum, ChartKey>`          | Top/nested `id`, x, then index | Stable interaction identity                                    |
@@ -98,9 +98,11 @@ function areaY<TDatum>(
 | `strokeWidth` | `number`                             | SVG default                    | Boundary stroke width                                          |
 | `curve`       | `ChartCurve`                         | Straight segments              | Optional path generator                                        |
 
-When `y1` is omitted, the y channel materialization carries an `includeZero`
-hint. The caller still owns the scale domain. Explicit `y1`, including a
-constant, removes that hint.
+Without explicit endpoints, repeated x positions stack by series. `z` defines
+series; a discrete `color` channel may infer it when `z` is absent. Use
+`stackY(options, channels)` for explicit order, reversal, normalization,
+centering, or wiggle offset. Supplying `y1` or `y2` opts out and preserves
+authored interval boundaries.
 
 Input order and null-gap behavior match `lineY`. Each valid row emits one point
 at the upper `y2`/`y` value, not at the lower baseline.
diff --git a/packages/charts-core/docs/reference/rendering-and-export.md b/packages/charts-core/docs/reference/rendering-and-export.md
index b664eb8..08ed444 100644
--- a/packages/charts-core/docs/reference/rendering-and-export.md
+++ b/packages/charts-core/docs/reference/rendering-and-export.md
@@ -79,8 +79,8 @@ and an overflow-visible display style. A nontransparent scene background
 renders as the first rect. All labels escape text and inherit the document
 font.
 
-The renderer includes one hidden focus circle controlled by the DOM host.
-Scene keys become `data-ts-key` attributes for reconciliation.
+Focus-filtered scene groups render hidden until the DOM host supplies focus
+state. Scene keys become `data-ts-key` attributes for reconciliation.
 
 ## Canvas renderer
 
@@ -97,9 +97,9 @@ const host = mountCanvasChart(container, {
 
 `mountCanvasChart` has the same definition, sizing, focus, spatial-index,
 keyboard, tooltip, selection, update, and destroy behavior as `mountChart`.
-The renderer paints the base scene and focus indicator on separate canvases,
-uses the browser device-pixel ratio by default, and maps pointer coordinates
-back into the scene.
+The renderer paints focus underlays, the base scene, and focus overlays on
+separate canvases, uses the browser device-pixel ratio by default, and maps
+pointer coordinates back into the scene.
 
 ```ts
 interface CanvasChartRendererOptions {
@@ -113,6 +113,7 @@ interface CanvasChartSurface<
 > extends ChartSurface<TDatum, TXValue, TYValue> {
   readonly element: HTMLDivElement
   readonly canvas: HTMLCanvasElement
+  readonly focusUnderCanvas: HTMLCanvasElement
   readonly focusCanvas: HTMLCanvasElement
 }
 
@@ -165,8 +166,9 @@ function mountCanvasChart<
 ```
 
 The surface's `element` is its accessible chart root. `canvas` holds the base
-scene; `focusCanvas` is a separate overlay, so focus changes do not repaint the
-base scene. A finite, positive `pixelRatio` fixes both backing stores at that
+scene; `focusUnderCanvas` and `focusCanvas` paint transient layers below and
+above it, so focus changes do not repaint the base scene. A finite, positive
+`pixelRatio` fixes every backing store at that
 ratio. An omitted value uses `devicePixelRatio`, then `1`; an invalid value
 uses `1`.
 
@@ -181,7 +183,7 @@ Use `canvasChartRenderer` for the shared default instance. Call
 an independently typed renderer instance.
 
 The server-facing `prerender` step emits a deterministic, named chart shell
-with two `aria-hidden` canvases. It does not attempt server-side pixel
+with three `aria-hidden` canvases. It does not attempt server-side pixel
 painting. The browser adopts that shell, sizes the backing stores, paints the
 scene, and attaches the shared interaction host. See
 [SSR and Hydration](../guides/ssr-and-hydration.md).
@@ -335,8 +337,8 @@ interface SerializeChartSvgOptions {
 ```
 
 `target` may be the SVG or an ancestor containing `svg.ts-chart`. The serializer
-clones the SVG, adds the XML namespace, removes the focus circle unless
-`includeFocus` is true, and resolves dimensions from options, then the
+clones the SVG, adds the XML namespace, removes focus-filtered scene layers
+unless `includeFocus` is true, and resolves dimensions from options, then the
 `viewBox`, then client dimensions.
 
 The serializer can inline computed `color`, fill, fill opacity, font family,
@@ -395,8 +397,8 @@ consistent with the selected MIME type.
 
 The raster helpers accept a mounted SVG or Canvas chart root, or an ancestor
 containing one. SVG is serialized, decoded, and drawn into the export canvas.
-Canvas uses its base scene layer directly and composites the separate focus
-layer only when `includeFocus` is true. `serializeChartSvg` and
+Canvas uses its base scene layer directly and composites focus underlays and
+overlays only when `includeFocus` is true. `serializeChartSvg` and
 `downloadChartSvg` remain SVG-only.
 
 ## Custom renderers
@@ -425,10 +427,7 @@ interface ChartSurface<
     clientX: number,
     clientY: number,
   ) => { x: number; y: number } | null
-  paintFocus: (
-    point: ChartPoint<TDatum, TXValue, TYValue> | null,
-    points: readonly ChartPoint<TDatum, TXValue, TYValue>[],
-  ) => void
+  paintFocus: (focus: ChartFocusState<TDatum, TXValue, TYValue> | null) => void
   destroy: () => void
 }
 
@@ -458,7 +457,7 @@ interface ChartRenderer<
 | `ChartSurface.element`  | Expose the accessible, focusable root used by shared keyboard and focus handling                           |
 | `render()`              | Paint the complete scene and apply accessible name, class, tab index, ID prefix, and optional animation    |
 | `clientToScene()`       | Convert viewport client coordinates to scene coordinates, or return `null` when conversion is unavailable  |
-| `paintFocus()`          | Paint or clear focus for the primary point; the full point array contains its resolved focus group         |
+| `paintFocus()`          | Paint or clear the complete focus state: primary, group, source, and pinned status                         |
 | `destroy()`             | Release renderer-owned animation, observers, listeners, and resources                                      |
 
 `requestRender()` asks the shared host to rebuild and repaint on its next
@@ -510,7 +509,7 @@ renderer should preserve:
 
 - an SVG root discoverable by the host
 - stable `data-ts-key` identities for reconciliation
-- a `[data-ts-chart-focus]` element when native focus paint is desired
+- focus-filtered scene groups when native focus paint is desired
 - the scene coordinate system and accessible name
 
 See [Custom extensions](./custom-extensions.md#custom-renderers) before
diff --git a/packages/charts-core/docs/reference/scales-guides-and-color.md b/packages/charts-core/docs/reference/scales-guides-and-color.md
index f0461fc..44afc17 100644
--- a/packages/charts-core/docs/reference/scales-guides-and-color.md
+++ b/packages/charts-core/docs/reference/scales-guides-and-color.md
@@ -22,14 +22,14 @@ import { scaleLinear, scaleUtc } from 'd3-scale'
 const x = {
   scale: scaleUtc,
   nice: true,
-  label: 'Date',
+  axis: { label: 'Date' },
 }
 
 const y = {
   scale: scaleLinear,
   nice: true,
-  label: 'Revenue',
   grid: true,
+  axis: { label: 'Revenue' },
 }
 ```
 
@@ -82,38 +82,85 @@ Scale copies make one configured scale safe to reuse across responsive scenes.
 interface ChartAxisOptions<TValue extends ChartValue> {
   scale: ChartScale | ConfiguredScaleLike<TValue> | ChartScaleFactory<TValue>
   nice?: boolean | number
-  guide?: boolean
-  ticks?: number
-  format?: (value: TValue) => string
-  grid?: boolean
-  label?: string
   reverse?: boolean
-  tickRotate?: number
-  labelOffset?: number
+  grid?: boolean
+  axis?:
+    | false
+    | {
+        line?: boolean
+        ticks?:
+          | false
+          | {
+              count?: number
+              spacing?: number
+              values?: readonly TValue[]
+              size?: number
+              padding?: number
+              format?: (value: TValue) => string
+            }
+        tickLabels?:
+          | false
+          | {
+              rotate?: number
+              thin?:
+                | boolean
+                | {
+                    minGap?: number
+                    priority?: 'ends'
+                    keep?: readonly TValue[]
+                  }
+            }
+        label?: string | { text: string; offset?: number | 'auto' }
+      }
 }
 ```
 
-| Option        | Default                                 | Meaning                                                                  |
-| ------------- | --------------------------------------- | ------------------------------------------------------------------------ |
-| `scale`       | Required                                | D3 factory, configured instance, or advanced `ChartScale`.               |
-| `nice`        | `false`                                 | Nice the resolved domain using the responsive or supplied tick count.    |
-| `guide`       | `true` for a non-null axis              | Renders the axis, ticks, title, and requested grid.                      |
-| `ticks`       | Responsive target                       | Suggested tick count passed to the scale. It is not a guaranteed count.  |
-| `format`      | Scale formatter, then string conversion | Formats tick values. Its value type is inferred from the marks.          |
-| `grid`        | `false` for x; `true` for y             | Draws grid rules at tick positions.                                      |
-| `label`       | None                                    | Axis title.                                                              |
-| `reverse`     | `false`                                 | Reverses the responsive pixel range without changing the caller's scale. |
-| `tickRotate`  | `0`                                     | Rotates tick labels in degrees.                                          |
-| `labelOffset` | Automatic                               | Overrides the title's distance from the axis.                            |
+| Option    | Default                     | Meaning                                                                  |
+| --------- | --------------------------- | ------------------------------------------------------------------------ |
+| `scale`   | Required                    | D3 factory, configured instance, or advanced `ChartScale`.               |
+| `nice`    | `false`                     | Nice the resolved domain using the responsive or supplied tick count.    |
+| `reverse` | `false`                     | Reverses the responsive pixel range without changing the caller's scale. |
+| `grid`    | `false` for x; `true` for y | Draws grid rules from semantic tick candidates.                          |
+| `axis`    | Inferred axis               | Axis line, tick candidates, labels, and title; `false` hides the axis.   |
 
 Set an axis to `null` only when no mark uses that positional scale. To keep the
-scale while hiding its guide, use `guide: false`.
+scale while hiding its axis, use `axis: false`. Grid visibility remains
+independent.
 
-Without an explicit `ticks`, the responsive target is
+Without an explicit `axis.ticks` policy, the responsive target is
 `clamp(2, floor(chart.width / 92), 8)` for x and
 `clamp(2, floor(chart.height / 48), 7)` for y. The configured scale may return
 a different number of ticks.
 
+`count`, `spacing`, and `values` are mutually exclusive candidate policies.
+`count` is a scale hint, `spacing` derives that hint from the final axis length,
+and `values` supplies exact semantic candidates. Grid lines and tick stubs use
+these candidates before label thinning.
+
+Tick labels are horizontal and collision-thinned by default. Rotation is
+explicit and independent:
+
+```ts
+const x = {
+  scale: scaleUtc,
+  axis: {
+    ticks: { spacing: 80, size: 0 },
+    tickLabels: {
+      rotate: -35,
+      thin: {
+        minGap: 8,
+        priority: 'ends',
+        keep: [launchDate],
+      },
+    },
+  },
+}
+```
+
+`thin: false` renders every candidate label. `keep` is a hard guarantee:
+kept values render even if they collide with one another. A kept value outside
+the candidate set adds only a label, not a tick stub or grid line.
+
 ## Automatic guide layout
 
 When a margin side is omitted, the scene compiler measures:
diff --git a/packages/charts-core/docs/reference/types.md b/packages/charts-core/docs/reference/types.md
index ae2b33a..29da917 100644
--- a/packages/charts-core/docs/reference/types.md
+++ b/packages/charts-core/docs/reference/types.md
@@ -151,33 +151,37 @@ See [Scene nodes](./runtime-and-scene.md#scene-nodes).
 
 ## Scale, guide, color, and theme types
 
-| Type                       | Purpose                                                      |
-| -------------------------- | ------------------------------------------------------------ |
-| `ChartAxisOptions`         | Required positional scale and optional guide behavior        |
-| `ChartAxisGuideOptions`    | Guide behavior without the scale field                       |
-| `ChartScaleFactory`        | Creates a positional scale with a mark-inferred domain       |
-| `ChartScaleInput`          | Factory or configured positional scale instance              |
-| `InferableScaleLike`       | Domain-configurable scale returned by a factory              |
-| `ConfiguredScaleLike`      | Callable, copyable positional scale contract                 |
-| `ChartNumericScale`        | Radius mapper, configured instance, or inferred factory spec |
-| `ChartNumericScaleOptions` | Inferred or configured radius scale with optional nicening   |
-| `ChartScale`               | Custom positional scale extension                            |
-| `ChartScaleResolveContext` | Values, responsive range, guide options, and hints           |
-| `ChartScaleResolver`       | Function form of custom scale resolution                     |
-| `ChartColorOptions`        | Factory, configured/custom color scale, hints, and legend    |
-| `ChartColorScaleFactory`   | Creates a color scale with a channel-inferred domain         |
-| `ConfiguredColorScaleLike` | Callable and copyable color scale contract                   |
-| `InferableColorScaleLike`  | Domain-configurable color scale returned by a factory        |
-| `ChartColorScale`          | Custom color scale extension                                 |
-| `ChartColorScaleContext`   | Observed values, hints, and theme                            |
-| `ResolvedColorScale`       | Resolved mapping and optional stepped legend boundaries      |
-| `ResolvedColorScaleKind`   | Categorical, continuous, quantile, quantize, or threshold    |
-| `ChartColorLegend`         | Legend layout and scene rendering                            |
-| `ChartColorLegendContext`  | Resolved colors, chart bounds, theme, and width              |
-| `ChartTheme`               | Foreground, muted, grid, background, and palette             |
-| `ChartLinearGradient`      | Named linear-gradient resource                               |
-| `ChartGradientStop`        | Gradient offset, color, and optional opacity                 |
-| `ChartCurve`               | Line and y-area path generation                              |
+| Type                            | Purpose                                                      |
+| ------------------------------- | ------------------------------------------------------------ |
+| `ChartAxisOptions`              | Required positional scale, grid, and optional nested axis    |
+| `ChartAxisPresentationOptions`  | Baseline, ticks, tick labels, and title presentation         |
+| `ChartAxisTickOptions`          | Candidate policy, stub size, padding, and formatting         |
+| `ChartAxisTickLabelOptions`     | Rotation and thinning policy                                 |
+| `ChartAxisTickLabelThinOptions` | Collision gap, end priority, and hard-kept values            |
+| `ChartAxisLabelOptions`         | Axis title text and automatic or numeric offset              |
+| `ChartScaleFactory`             | Creates a positional scale with a mark-inferred domain       |
+| `ChartScaleInput`               | Factory or configured positional scale instance              |
+| `InferableScaleLike`            | Domain-configurable scale returned by a factory              |
+| `ConfiguredScaleLike`           | Callable, copyable positional scale contract                 |
+| `ChartNumericScale`             | Radius mapper, configured instance, or inferred factory spec |
+| `ChartNumericScaleOptions`      | Inferred or configured radius scale with optional nicening   |
+| `ChartScale`                    | Custom positional scale extension                            |
+| `ChartScaleResolveContext`      | Values, responsive range, guide options, and hints           |
+| `ChartScaleResolver`            | Function form of custom scale resolution                     |
+| `ChartColorOptions`             | Factory, configured/custom color scale, hints, and legend    |
+| `ChartColorScaleFactory`        | Creates a color scale with a channel-inferred domain         |
+| `ConfiguredColorScaleLike`      | Callable and copyable color scale contract                   |
+| `InferableColorScaleLike`       | Domain-configurable color scale returned by a factory        |
+| `ChartColorScale`               | Custom color scale extension                                 |
+| `ChartColorScaleContext`        | Observed values, hints, and theme                            |
+| `ResolvedColorScale`            | Resolved mapping and optional stepped legend boundaries      |
+| `ResolvedColorScaleKind`        | Categorical, continuous, quantile, quantize, or threshold    |
+| `ChartColorLegend`              | Legend layout and scene rendering                            |
+| `ChartColorLegendContext`       | Resolved colors, chart bounds, theme, and width              |
+| `ChartTheme`                    | Foreground, muted, grid, background, and palette             |
+| `ChartLinearGradient`           | Named linear-gradient resource                               |
+| `ChartGradientStop`             | Gradient offset, color, and optional opacity                 |
+| `ChartCurve`                    | Line and y-area path generation                              |
 
 See [Scales, guides, and color](./scales-guides-and-color.md).
 
@@ -205,6 +209,10 @@ See [DOM host](./dom-host.md) and
 | `ChartFocusStrategy`         | Pointer resolution, grouping, and keyboard ordering      |
 | `ChartFocusPreset`           | Built-in nearest and grouped axis focus names            |
 | `ChartFocusMode`             | Focus preset or custom strategy                          |
+| `ChartFocusState`            | Primary, group, source, and pinned interaction state     |
+| `ChartFocusSource`           | Pointer, keyboard, programmatic, or restored source      |
+| `ChartFocusFilter`           | Focus-filtered mark matching configuration               |
+| `ChartFocusMatch`            | Primary, group, key, x, y, or series matching            |
 | `ChartSpatialIndex`          | Nearest-point query                                      |
 | `ChartSpatialIndexFactory`   | Builds an index from current scene points                |
 | `ChartTooltipOptions`        | Native tooltip content, ordering, anchoring, and pinning |
@@ -215,7 +223,10 @@ See [DOM host](./dom-host.md) and
 | `ChartTooltipDerivedItem`    | Row derived from the complete focused point              |
 | `ChartTooltipSort`           | Group row ordering                                       |
 | `ChartTooltipAnchor`         | Point, pointer, group-center, or custom scene anchor     |
-| `ChartTooltipAnchorContext`  | Pointer position, chart bounds, and surface size         |
+| `ChartTooltipAxisAnchor`     | Independent x/y anchor sources                           |
+| `ChartTooltipXAnchor`        | Point, pointer, value, group, or plot x source           |
+| `ChartTooltipYAnchor`        | Point, pointer, value, group, or plot y source           |
+| `ChartTooltipAnchorContext`  | Focus, pointer, plot, surface, and resolved scales       |
 | `ChartTooltipPlacement`      | Tooltip box placement around its anchor                  |
 | `ChartTooltipPosition`       | Scene-pixel x/y coordinate                               |
 | `ChartDefinitionOptions`     | Focus, tooltip, animation, keyboard, and spatial policy  |
@@ -258,6 +269,10 @@ their behavior:
   `RenderChartPngOptions`. See [SVG
   serialization](./rendering-and-export.md#svg-serialization) and [browser
   image export](./rendering-and-export.md#browser-image-export).
+- `@tanstack/charts/group`: `GroupLayout` and `GroupOptions`. See
+  [Grouped bars](./marks/bar-and-rect.md#grouped-bars).
+- `@tanstack/charts/stack`: `StackOptions`, `StackOrder`, `StackOffset`, and
+  `StackYChannels`. See [Stacked bars](./marks/bar-and-rect.md#stacked-bars).
 - `@tanstack/charts/geo`: `GeoProjectionContext`, `GeoProjectionDescriptor`,
   `GeoProjectionInput`, and `GeoShapeOptions`. See
   [Geo shape](./marks/geo.md).
@@ -275,7 +290,8 @@ Every built-in mark exports its options type from the root and its granular
 subpath:
 
 - `LineYOptions`, `AreaYOptions`, `AreaXOptions`, `AreaXCurve`
-- `BarYOptions`, `BarXOptions`
+- `BarYOptions`, `BarXOptions`, `GroupLayout`, `GroupOptions`
+- `BandXOptions`, `BandYOptions`
 - `DotOptions`, `HexagonOptions`
 - `RectOptions`, `CellOptions`
 - `RuleXOptions`, `RuleYOptions`
diff --git a/packages/charts-core/package.json b/packages/charts-core/package.json
index 4ce86ba..d2b20cc 100644
--- a/packages/charts-core/package.json
+++ b/packages/charts-core/package.json
@@ -37,6 +37,7 @@
     "./area-x": "./src/area-x.ts",
     "./arrow": "./src/arrow.ts",
     "./bar": "./src/bar.ts",
+    "./band": "./src/band.ts",
     "./canvas": "./src/canvas.ts",
     "./d3/area-x": "./src/d3-area-x.ts",
     "./d3/shape": "./src/d3-shape.ts",
@@ -45,8 +46,10 @@
     "./export": "./src/export.ts",
     "./facet": "./src/facet.ts",
     "./focus": "./src/focus.ts",
+    "./focus/mark": "./src/focus-mark.ts",
     "./focus/disabled": "./src/focus-disabled.ts",
     "./frame": "./src/frame.ts",
+    "./group": "./src/group.ts",
     "./geo": "./src/geo.ts",
     "./hexagon": "./src/hexagon.ts",
     "./legend": "./src/legend.ts",
@@ -63,6 +66,7 @@
     "./svg": "./src/svg.ts",
     "./svg/renderer": "./src/svg-surface.ts",
     "./svg/resources": "./src/svg-resources.ts",
+    "./stack": "./src/stack.ts",
     "./text": "./src/text.ts",
     "./tick": "./src/tick.ts",
     "./vector": "./src/vector.ts"
@@ -99,6 +103,10 @@
         "types": "./dist/bar.d.ts",
         "import": "./dist/bar.js"
       },
+      "./band": {
+        "types": "./dist/band.d.ts",
+        "import": "./dist/band.js"
+      },
       "./canvas": {
         "types": "./dist/canvas.d.ts",
         "import": "./dist/canvas.js"
@@ -131,6 +139,10 @@
         "types": "./dist/focus.d.ts",
         "import": "./dist/focus.js"
       },
+      "./focus/mark": {
+        "types": "./dist/focus-mark.d.ts",
+        "import": "./dist/focus-mark.js"
+      },
       "./focus/disabled": {
         "types": "./dist/focus-disabled.d.ts",
         "import": "./dist/focus-disabled.js"
@@ -139,6 +151,10 @@
         "types": "./dist/frame.d.ts",
         "import": "./dist/frame.js"
       },
+      "./group": {
+        "types": "./dist/group.d.ts",
+        "import": "./dist/group.js"
+      },
       "./geo": {
         "types": "./dist/geo.d.ts",
         "import": "./dist/geo.js"
@@ -203,6 +219,10 @@
         "types": "./dist/svg-resources.d.ts",
         "import": "./dist/svg-resources.js"
       },
+      "./stack": {
+        "types": "./dist/stack.d.ts",
+        "import": "./dist/stack.js"
+      },
       "./text": {
         "types": "./dist/text.d.ts",
         "import": "./dist/text.js"
diff --git a/packages/charts-core/src/area.ts b/packages/charts-core/src/area.ts
index 6458f8a..afdb5d9 100644
--- a/packages/charts-core/src/area.ts
+++ b/packages/charts-core/src/area.ts
@@ -8,6 +8,7 @@ import {
   visualValue,
 } from './mark'
 import { valueKey } from './scales'
+import { stackExtents, stackOptions } from './stack-internal'
 import type {
   Channel,
   ChartKey,
@@ -55,17 +56,13 @@ export function areaY<TDatum>(
   return createMark(({ markIndex }) => {
     const id = options.id ?? `area-y-${markIndex}`
     const xValues = channelValues(data, options.x, (_datum, index) => index)
-    const y2 = options.y2 ?? options.y
-    const yValues =
-      typeof y2 === 'number'
-        ? data.map(() => y2)
-        : channelValues(data, y2, (datum) =>
+    const rawY = options.y ?? options.y2
+    const rawYValues =
+      typeof rawY === 'number'
+        ? data.map(() => rawY)
+        : channelValues(data, rawY, (datum) =>
             typeof datum === 'number' ? datum : undefined,
           )
-    const y1Values =
-      typeof options.y1 === 'number'
-        ? data.map(() => options.y1 as number)
-        : channelValues(data, options.y1, () => 0)
     const zValues = channelValues(data, options.z, () => null)
     const colorValues =
       options.color === undefined
@@ -75,6 +72,20 @@ export function areaY<TDatum>(
       options.z === undefined && options.color !== undefined
         ? colorValues
         : zValues
+    const explicitExtent = options.y1 !== undefined || options.y2 !== undefined
+    const stacked = explicitExtent
+      ? undefined
+      : stackAreaValues(xValues, rawYValues, groupValues, options)
+    const y1Values = explicitExtent
+      ? typeof options.y1 === 'number'
+        ? data.map(() => options.y1 as number)
+        : channelValues(data, options.y1, () => 0)
+      : stacked!.starts
+    const y2Values = explicitExtent
+      ? typeof options.y2 === 'number'
+        ? data.map(() => options.y2 as number)
+        : channelValues(data, options.y2 ?? options.y, () => undefined)
+      : stacked!.ends
     const keys = inferredKeyValues(data, options.key, {
       groups: groupValues,
       candidates: [xValues],
@@ -91,12 +102,13 @@ export function areaY<TDatum>(
 
     return {
       id,
+      seriesFromColor: options.z === undefined && options.color !== undefined,
       channels: {
         x: { scale: 'x', values: xValues.filter(isChartValue) },
         y: {
           scale: 'y',
           values: [
-            ...yValues.filter(isFiniteNumber),
+            ...y2Values.filter(isFiniteNumber),
             ...y1Values.filter(isFiniteNumber),
           ],
           includeZero: options.y1 === undefined,
@@ -160,18 +172,20 @@ export function areaY<TDatum>(
 
           for (const datumIndex of indices) {
             const xValue = xValues[datumIndex]
-            const yValue = yValues[datumIndex]
+            const yValue = rawYValues[datumIndex]
             const y1Value = y1Values[datumIndex]
+            const y2Value = y2Values[datumIndex]
             if (
               !isChartValue(xValue) ||
               !isFiniteNumber(yValue) ||
-              !isFiniteNumber(y1Value)
+              !isFiniteNumber(y1Value) ||
+              !isFiniteNumber(y2Value)
             ) {
               flush()
               continue
             }
             const x = scales.x.map(xValue)
-            const y = scales.y.map(yValue)
+            const y = scales.y.map(y2Value)
             top.push([x, y])
             bottom.push([x, scales.y.map(y1Value)])
             const key = `${id}:${groupKey}:${valueKey(keys[datumIndex])}`
@@ -185,7 +199,7 @@ export function areaY<TDatum>(
               xValue,
               yValue,
               y1Value,
-              y2Value: yValue,
+              y2Value,
               yInterval: 'difference',
               x,
               y,
@@ -211,3 +225,38 @@ export function areaY<TDatum>(
     }
   })
 }
+
+function stackAreaValues(
+  positions: readonly unknown[],
+  values: readonly unknown[],
+  series: readonly unknown[],
+  options: object,
+) {
+  const input = positions.flatMap((position, index) => {
+    const value = values[index]
+    if (!isChartValue(position) || !isFiniteNumber(value)) return []
+    const seriesValue = series[index]
+    return [
+      {
+        index,
+        position,
+        value,
+        series: isChartKey(seriesValue) ? seriesValue : 'value',
+      },
+    ]
+  })
+  const extents = stackExtents(input, stackOptions(options))
+  const starts: (number | undefined)[] = Array.from(
+    { length: positions.length },
+    () => undefined,
+  )
+  const ends: (number | undefined)[] = Array.from(
+    { length: positions.length },
+    () => undefined,
+  )
+  for (const [index, extent] of extents) {
+    starts[index] = extent.start
+    ends[index] = extent.end
+  }
+  return { starts, ends }
+}
diff --git a/packages/charts-core/src/band.ts b/packages/charts-core/src/band.ts
new file mode 100644
index 0000000..3ac33bf
--- /dev/null
+++ b/packages/charts-core/src/band.ts
@@ -0,0 +1,254 @@
+import {
+  channelValues,
+  createMark,
+  inferredKeyValues,
+  isChartKey,
+  isChartValue,
+  visualValue,
+} from './mark'
+import { createMarkWithScaleValues } from './mark-with-scale-values'
+import { valueKey } from './scales'
+import type {
+  Channel,
+  ChartKey,
+  ChartMark,
+  ChartPoint,
+  ChartValue,
+  OptionChannelOutput,
+  ResolvedScale,
+  SceneNode,
+  VisualChannel,
+} from './types'
+
+export interface BandXOptions<TDatum> {
+  id?: string
+  x?: Channel<TDatum, ChartValue | null | undefined>
+  z?: Channel<TDatum, ChartKey | null | undefined>
+  color?: Channel<TDatum, ChartKey | null | undefined>
+  key?: Channel<TDatum, ChartKey>
+  fill?: VisualChannel<TDatum, string>
+  fillOpacity?: number
+  inset?: number
+  radius?: number
+}
+
+export interface BandYOptions<TDatum> {
+  id?: string
+  y?: Channel<TDatum, ChartValue | null | undefined>
+  z?: Channel<TDatum, ChartKey | null | undefined>
+  color?: Channel<TDatum, ChartKey | null | undefined>
+  key?: Channel<TDatum, ChartKey>
+  fill?: VisualChannel<TDatum, string>
+  fillOpacity?: number
+  inset?: number
+  radius?: number
+}
+
+export function bandX<
+  TDatum,
+  const TOptions extends BandXOptions<NoInfer<TDatum>> | undefined,
+>(
+  source: Iterable<TDatum>,
+  options?: TOptions,
+): ChartMark<
+  TDatum,
+  OptionChannelOutput<TDatum, TOptions, 'x', number>,
+  number,
+  OptionChannelOutput<TDatum, TOptions, 'x', number>,
+  never
+> {
+  const data = Array.isArray(source) ? source : Array.from(source)
+  const resolved = options ?? ({} as BandXOptions<NoInfer<TDatum>>)
+
+  return createMarkWithScaleValues(({ markIndex }) => {
+    const id = resolved.id ?? `band-x-${markIndex}`
+    const values = channelValues(data, resolved.x, (_datum, index) => index)
+    const zValues = channelValues(data, resolved.z, () => null)
+    const colorValues =
+      resolved.color === undefined
+        ? zValues
+        : channelValues(data, resolved.color, () => null)
+    const keys = inferredKeyValues(data, resolved.key, {
+      groups: zValues,
+      candidates: [values],
+      markId: id,
+      warningIdentity: resolved,
+    })
+
+    return {
+      id,
+      channels: {
+        x: { scale: 'x', values: values.filter(isChartValue) },
+        color: { scale: 'color', values: colorValues.filter(isChartKey) },
+      },
+      render: ({ chart, scales, color }) => {
+        const width =
+          scales.x.bandwidth ||
+          inferBandwidth(scales.x, values, chart.width, data.length)
+        const inset = Number.isFinite(resolved.inset) ? resolved.inset! : 0
+        const nodes: SceneNode[] = []
+        const points: ChartPoint<TDatum>[] = []
+        data.forEach((datum, index) => {
+          const xValue = values[index]
+          if (!isChartValue(xValue)) return
+          const x = scales.x.map(xValue)
+          const fill = visualValue(
+            resolved.fill,
+            datum,
+            index,
+            data,
+            color(colorValues[index]),
+          )
+          const group = zValues[index] ?? null
+          const key = `${id}:${valueKey(group)}:${valueKey(keys[index])}`
+          nodes.push({
+            kind: 'rect',
+            key,
+            x: x - width / 2 + inset,
+            y: chart.y,
+            width: Math.max(0, width - inset * 2),
+            height: chart.height,
+            radius: resolved.radius,
+            style: { fill, fillOpacity: resolved.fillOpacity },
+          })
+          points.push({
+            key,
+            markId: id,
+            group,
+            groupLabel: group == null ? id : String(group),
+            datum,
+            datumIndex: index,
+            xValue,
+            yValue: 0,
+            x,
+            y: chart.y + chart.height / 2,
+            color: fill,
+          })
+        })
+        return { nodes, points }
+      },
+    }
+  }) as ChartMark<
+    TDatum,
+    OptionChannelOutput<TDatum, TOptions, 'x', number>,
+    number,
+    OptionChannelOutput<TDatum, TOptions, 'x', number>,
+    never
+  >
+}
+
+export function bandY<
+  TDatum,
+  const TOptions extends BandYOptions<NoInfer<TDatum>> | undefined,
+>(
+  source: Iterable<TDatum>,
+  options?: TOptions,
+): ChartMark<
+  TDatum,
+  number,
+  OptionChannelOutput<TDatum, TOptions, 'y', number>,
+  never,
+  OptionChannelOutput<TDatum, TOptions, 'y', number>
+> {
+  const data = Array.isArray(source) ? source : Array.from(source)
+  const resolved = options ?? ({} as BandYOptions<NoInfer<TDatum>>)
+
+  return createMark(({ markIndex }) => {
+    const id = resolved.id ?? `band-y-${markIndex}`
+    const values = channelValues(data, resolved.y, (_datum, index) => index)
+    const zValues = channelValues(data, resolved.z, () => null)
+    const colorValues =
+      resolved.color === undefined
+        ? zValues
+        : channelValues(data, resolved.color, () => null)
+    const keys = inferredKeyValues(data, resolved.key, {
+      groups: zValues,
+      candidates: [values],
+      markId: id,
+      warningIdentity: resolved,
+    })
+
+    return {
+      id,
+      channels: {
+        y: { scale: 'y', values: values.filter(isChartValue) },
+        color: { scale: 'color', values: colorValues.filter(isChartKey) },
+      },
+      render: ({ chart, scales, color }) => {
+        const height =
+          scales.y.bandwidth ||
+          inferBandwidth(scales.y, values, chart.height, data.length)
+        const inset = Number.isFinite(resolved.inset) ? resolved.inset! : 0
+        const nodes: SceneNode[] = []
+        const points: ChartPoint<TDatum>[] = []
+        data.forEach((datum, index) => {
+          const yValue = values[index]
+          if (!isChartValue(yValue)) return
+          const y = scales.y.map(yValue)
+          const fill = visualValue(
+            resolved.fill,
+            datum,
+            index,
+            data,
+            color(colorValues[index]),
+          )
+          const group = zValues[index] ?? null
+          const key = `${id}:${valueKey(group)}:${valueKey(keys[index])}`
+          nodes.push({
+            kind: 'rect',
+            key,
+            x: chart.x,
+            y: y - height / 2 + inset,
+            width: chart.width,
+            height: Math.max(0, height - inset * 2),
+            radius: resolved.radius,
+            style: { fill, fillOpacity: resolved.fillOpacity },
+          })
+          points.push({
+            key,
+            markId: id,
+            group,
+            groupLabel: group == null ? id : String(group),
+            datum,
+            datumIndex: index,
+            xValue: 0,
+            yValue,
+            x: chart.x + chart.width / 2,
+            y,
+            color: fill,
+          })
+        })
+        return { nodes, points }
+      },
+    }
+  }) as ChartMark<
+    TDatum,
+    number,
+    OptionChannelOutput<TDatum, TOptions, 'y', number>,
+    never,
+    OptionChannelOutput<TDatum, TOptions, 'y', number>
+  >
+}
+
+function inferBandwidth(
+  scale: ResolvedScale,
+  values: readonly unknown[],
+  span: number,
+  count: number,
+): number {
+  const positions = [
+    ...new Set(
+      values
+        .filter(isChartValue)
+        .map(scale.map)
+        .filter((value) => Number.isFinite(value)),
+    ),
+  ].sort((left, right) => left - right)
+  let minimum = Infinity
+  for (let index = 1; index < positions.length; index += 1) {
+    minimum = Math.min(minimum, positions[index]! - positions[index - 1]!)
+  }
+  return Number.isFinite(minimum)
+    ? minimum * 0.8
+    : Math.min(48, (span / Math.max(2, count + 1)) * 0.8)
+}
diff --git a/packages/charts-core/src/bar.ts b/packages/charts-core/src/bar.ts
index 16b5e54..46afa66 100644
--- a/packages/charts-core/src/bar.ts
+++ b/packages/charts-core/src/bar.ts
@@ -1,3 +1,4 @@
+import { scaleBand } from 'd3-scale'
 import {
   channelValues,
   createMark,
@@ -9,18 +10,19 @@ import {
 } from './mark'
 import { resolveScaleInput } from './scale-input'
 import { valueKey } from './scales'
+import { stackExtents, stackOptions } from './stack-internal'
 import type {
   Channel,
   ChartKey,
   ChartMark,
   ChartPoint,
-  ChartScaleInput,
   ChartValue,
   OptionChannelOutput,
   ResolvedScale,
   SceneNode,
   VisualChannel,
 } from './types'
+import type { GroupLayout } from './group'
 
 export interface BarYOptions<TDatum> {
   id?: string
@@ -33,8 +35,7 @@ export interface BarYOptions<TDatum> {
   key?: Channel<TDatum, ChartKey>
   fill?: VisualChannel<TDatum, string>
   fillOpacity?: number
-  /** Optional D3 band scale that positions z, or color when z is omitted, within each x band. */
-  groupScale?: ChartScaleInput<any>
+  layout?: GroupLayout
   /** Pixels removed from both categorical edges after band layout. */
   inset?: number
   radius?: number
@@ -51,8 +52,7 @@ export interface BarXOptions<TDatum> {
   key?: Channel<TDatum, ChartKey>
   fill?: VisualChannel<TDatum, string>
   fillOpacity?: number
-  /** Optional D3 band scale that positions z, or color when z is omitted, within each y band. */
-  groupScale?: ChartScaleInput<any>
+  layout?: GroupLayout
   /** Pixels removed from both categorical edges after band layout. */
   inset?: number
   radius?: number
@@ -77,23 +77,39 @@ export function barY<TDatum>(
   return createMark(({ markIndex }) => {
     const id = options.id ?? `bar-y-${markIndex}`
     const xValues = channelValues(data, options.x, (_datum, index) => index)
-    const yValues = numericChannelValues(
+    const rawYValues = numericChannelValues(
       data,
-      options.y2 ?? options.y,
+      options.y ?? options.y2,
       (datum) => (typeof datum === 'number' ? datum : undefined),
     )
-    const y1Values = numericChannelValues(data, options.y1, () => 0)
     const zValues = channelValues(data, options.z, () => null)
     const colorValues =
       options.color === undefined
         ? zValues
         : channelValues(data, options.color, () => null)
-    const groupValues =
-      options.groupScale !== undefined &&
-      options.z === undefined &&
-      options.color !== undefined
+    const seriesValues =
+      options.z === undefined && options.color !== undefined
         ? colorValues
         : zValues
+    const explicitExtent = options.y1 !== undefined || options.y2 !== undefined
+    const grouped = options.layout?.type === 'group'
+    const stacked =
+      !explicitExtent && !grouped
+        ? stackYValues(xValues, rawYValues, seriesValues, options)
+        : undefined
+    const y1Values = explicitExtent
+      ? numericChannelValues(data, options.y1, () => 0)
+      : (stacked?.starts ?? data.map(() => 0))
+    const y2Values = explicitExtent
+      ? numericChannelValues(data, options.y2 ?? options.y, () => undefined)
+      : grouped
+        ? rawYValues
+        : stacked!.ends
+    const duplicatePositions = hasDuplicateValues(xValues)
+    const groupValues =
+      grouped || (!explicitExtent && duplicatePositions)
+        ? seriesValues
+        : zValues
     const keys = inferredKeyValues(data, options.key, {
       groups: groupValues,
       candidates: [xValues],
@@ -103,12 +119,16 @@ export function barY<TDatum>(
 
     return {
       id,
+      seriesFromColor:
+        options.z === undefined &&
+        options.color !== undefined &&
+        (grouped || duplicatePositions),
       channels: {
         x: { scale: 'x', values: xValues.filter(isChartValue) },
         y: {
           scale: 'y',
           values: [
-            ...yValues.filter(isFiniteNumber),
+            ...y2Values.filter(isFiniteNumber),
             ...y1Values.filter(isFiniteNumber),
           ],
           includeZero: options.y1 === undefined,
@@ -123,7 +143,7 @@ export function barY<TDatum>(
           scales.x.bandwidth ||
           inferBandwidth(scales.x, xValues, chart.width, data.length)
         const groupScale = resolveGroupScale(
-          options.groupScale,
+          options.layout,
           groupValues,
           totalBandwidth,
         )
@@ -134,12 +154,14 @@ export function barY<TDatum>(
 
         data.forEach((datum, datumIndex) => {
           const xValue = xValues[datumIndex]
-          const yValue = yValues[datumIndex]
+          const yValue = rawYValues[datumIndex]
           const y1Value = y1Values[datumIndex]
+          const y2Value = y2Values[datumIndex]
           if (
             !isChartValue(xValue) ||
             !isFiniteNumber(yValue) ||
-            !isFiniteNumber(y1Value)
+            !isFiniteNumber(y1Value) ||
+            !isFiniteNumber(y2Value)
           )
             return
           const group = groupValues[datumIndex] ?? null
@@ -154,7 +176,7 @@ export function barY<TDatum>(
           )
           const center = scales.x.map(xValue)
           const baselinePosition = scales.y.map(y1Value)
-          const valuePosition = scales.y.map(yValue)
+          const valuePosition = scales.y.map(y2Value)
           const x = center - totalBandwidth / 2 + groupOffset + inset
           const y = Math.min(baselinePosition, valuePosition)
           const key = `${id}:${valueKey(group)}:${valueKey(keys[datumIndex])}`
@@ -181,7 +203,7 @@ export function barY<TDatum>(
             xValue,
             yValue,
             y1Value,
-            y2Value: yValue,
+            y2Value,
             yInterval: 'difference',
             x: center - totalBandwidth / 2 + groupOffset + groupBandwidth / 2,
             y: valuePosition,
@@ -224,24 +246,40 @@ export function barX<TDatum>(
 
   return createMark(({ markIndex }) => {
     const id = options.id ?? `bar-x-${markIndex}`
-    const xValues = numericChannelValues(
+    const rawXValues = numericChannelValues(
       data,
-      options.x2 ?? options.x,
+      options.x ?? options.x2,
       (datum) => (typeof datum === 'number' ? datum : undefined),
     )
-    const x1Values = numericChannelValues(data, options.x1, () => 0)
     const yValues = channelValues(data, options.y, (_datum, index) => index)
     const zValues = channelValues(data, options.z, () => null)
     const colorValues =
       options.color === undefined
         ? zValues
         : channelValues(data, options.color, () => null)
-    const groupValues =
-      options.groupScale !== undefined &&
-      options.z === undefined &&
-      options.color !== undefined
+    const seriesValues =
+      options.z === undefined && options.color !== undefined
         ? colorValues
         : zValues
+    const explicitExtent = options.x1 !== undefined || options.x2 !== undefined
+    const grouped = options.layout?.type === 'group'
+    const stacked =
+      !explicitExtent && !grouped
+        ? stackXValues(yValues, rawXValues, seriesValues, options)
+        : undefined
+    const x1Values = explicitExtent
+      ? numericChannelValues(data, options.x1, () => 0)
+      : (stacked?.starts ?? data.map(() => 0))
+    const x2Values = explicitExtent
+      ? numericChannelValues(data, options.x2 ?? options.x, () => undefined)
+      : grouped
+        ? rawXValues
+        : stacked!.ends
+    const duplicatePositions = hasDuplicateValues(yValues)
+    const groupValues =
+      grouped || (!explicitExtent && duplicatePositions)
+        ? seriesValues
+        : zValues
     const keys = inferredKeyValues(data, options.key, {
       groups: groupValues,
       candidates: [yValues],
@@ -251,11 +289,15 @@ export function barX<TDatum>(
 
     return {
       id,
+      seriesFromColor:
+        options.z === undefined &&
+        options.color !== undefined &&
+        (grouped || duplicatePositions),
       channels: {
         x: {
           scale: 'x',
           values: [
-            ...xValues.filter(isFiniteNumber),
+            ...x2Values.filter(isFiniteNumber),
             ...x1Values.filter(isFiniteNumber),
           ],
           includeZero: options.x1 === undefined,
@@ -271,7 +313,7 @@ export function barX<TDatum>(
           scales.y.bandwidth ||
           inferBandwidth(scales.y, yValues, chart.height, data.length)
         const groupScale = resolveGroupScale(
-          options.groupScale,
+          options.layout,
           groupValues,
           totalBandwidth,
         )
@@ -281,12 +323,14 @@ export function barX<TDatum>(
         const points: ChartPoint<TDatum>[] = []
 
         data.forEach((datum, datumIndex) => {
-          const xValue = xValues[datumIndex]
+          const xValue = rawXValues[datumIndex]
           const x1Value = x1Values[datumIndex]
+          const x2Value = x2Values[datumIndex]
           const yValue = yValues[datumIndex]
           if (
             !isFiniteNumber(xValue) ||
             !isFiniteNumber(x1Value) ||
+            !isFiniteNumber(x2Value) ||
             !isChartValue(yValue)
           )
             return
@@ -301,7 +345,7 @@ export function barX<TDatum>(
             resolvedColor,
           )
           const baselinePosition = scales.x.map(x1Value)
-          const valuePosition = scales.x.map(xValue)
+          const valuePosition = scales.x.map(x2Value)
           const center = scales.y.map(yValue)
           const y = center - totalBandwidth / 2 + groupOffset + inset
           const key = `${id}:${valueKey(group)}:${valueKey(keys[datumIndex])}`
@@ -328,7 +372,7 @@ export function barX<TDatum>(
             xValue,
             yValue,
             x1Value,
-            x2Value: xValue,
+            x2Value,
             xInterval: 'difference',
             x: valuePosition,
             y: center - totalBandwidth / 2 + groupOffset + groupBandwidth / 2,
@@ -354,27 +398,36 @@ export function barX<TDatum>(
 }
 
 function resolveGroupScale(
-  source: ChartScaleInput<any> | undefined,
+  source: GroupLayout | undefined,
   values: readonly unknown[],
   bandwidth: number,
 ) {
   if (!source) return undefined
-  const scale = resolveScaleInput(source, { values })
+  const scale = resolveScaleInput(
+    source.scale ??
+      (() =>
+        scaleBand<ChartKey>().padding(
+          Number.isFinite(source.padding) ? Math.max(0, source.padding!) : 0.1,
+        )),
+    { values },
+  )
   scale.range([0, bandwidth])
   const groupBandwidth = scale.bandwidth?.()
   if (groupBandwidth === undefined) {
-    throw new TypeError('A bar groupScale must be a D3 band scale')
+    throw new TypeError('A grouped bar layout requires a D3 band scale')
   }
   return {
     bandwidth: groupBandwidth,
     map(value: ChartKey | null) {
       if (value === null) {
-        throw new TypeError('A bar with groupScale requires a z or color value')
+        throw new TypeError(
+          'A grouped bar requires an explicit z channel or a discrete color channel',
+        )
       }
       const position = scale(value)
       if (position === undefined || !Number.isFinite(position)) {
         throw new TypeError(
-          `Bar group value "${String(value)}" is outside the groupScale domain`,
+          `Bar group value "${String(value)}" is outside the group layout scale domain`,
         )
       }
       return position
@@ -382,6 +435,60 @@ function resolveGroupScale(
   }
 }
 
+function stackYValues(
+  positions: readonly unknown[],
+  values: readonly unknown[],
+  series: readonly unknown[],
+  options: object,
+) {
+  const input = positions.flatMap((position, index) => {
+    const value = values[index]
+    if (!isChartValue(position) || !isFiniteNumber(value)) return []
+    return [
+      {
+        index,
+        position,
+        value,
+        series: isChartKey(series[index]) ? series[index] : index,
+      },
+    ]
+  })
+  const extents = stackExtents(input, stackOptions(options))
+  const starts: (number | undefined)[] = Array.from(
+    { length: positions.length },
+    () => undefined,
+  )
+  const ends: (number | undefined)[] = Array.from(
+    { length: positions.length },
+    () => undefined,
+  )
+  for (const [index, extent] of extents) {
+    starts[index] = extent.start
+    ends[index] = extent.end
+  }
+  return { starts, ends }
+}
+
+function stackXValues(
+  positions: readonly unknown[],
+  values: readonly unknown[],
+  series: readonly unknown[],
+  options: object,
+) {
+  return stackYValues(positions, values, series, options)
+}
+
+function hasDuplicateValues(values: readonly unknown[]) {
+  const seen = new Set<string>()
+  for (const value of values) {
+    if (!isChartValue(value)) continue
+    const identity = valueKey(value)
+    if (seen.has(identity)) return true
+    seen.add(identity)
+  }
+  return false
+}
+
 function inferBandwidth(
   scale: ResolvedScale,
   values: readonly unknown[],
diff --git a/packages/charts-core/src/canvas.test.ts b/packages/charts-core/src/canvas.test.ts
index 721694f..135c67f 100644
--- a/packages/charts-core/src/canvas.test.ts
+++ b/packages/charts-core/src/canvas.test.ts
@@ -222,6 +222,19 @@ describe('Canvas renderer', () => {
     const container = document.createElement('div')
     const renderer = createCanvasChartRenderer({ pixelRatio: 2 })
     const surface = renderer.mount(container, () => {})
+    const point = {
+      key: 'focus:dot',
+      markId: 'focus',
+      group: null,
+      groupLabel: 'focus',
+      datum: { id: 'dot' },
+      datumIndex: 0,
+      xValue: 1,
+      yValue: 2,
+      x: 50,
+      y: 30,
+      color: '#ff0000',
+    }
     surface.render(
       scene([
         {
@@ -232,6 +245,29 @@ describe('Canvas renderer', () => {
           radius: 5,
           style: { fill: '#ff0000' },
         },
+        {
+          kind: 'group',
+          key: 'focus',
+          children: [
+            {
+              kind: 'dot',
+              key: point.key,
+              x: 50,
+              y: 30,
+              radius: 5,
+              style: {
+                fill: 'Canvas',
+                stroke: '#ff0000',
+                strokeWidth: 2.5,
+              },
+            },
+          ],
+          focus: {
+            match: 'primary',
+            points: [point],
+            placement: 'over',
+          },
+        },
       ]),
       renderOptions(),
     )
@@ -240,13 +276,13 @@ describe('Canvas renderer', () => {
     if (!base || !focus) throw new Error('Expected both contexts')
     const baseOperations = [...base.operations]
 
-    surface.paintFocus(
-      {
+    surface.paintFocus({
+      primary: {
         key: 'dot',
         markId: 'dots',
         group: null,
         groupLabel: 'dots',
-        datum: { id: 'dot' },
+        datum: point.datum,
         datumIndex: 0,
         xValue: 1,
         yValue: 2,
@@ -254,8 +290,10 @@ describe('Canvas renderer', () => {
         y: 30,
         color: '#ff0000',
       },
-      [],
-    )
+      group: [],
+      source: 'pointer',
+      pinned: false,
+    })
 
     expect(base.operations).toEqual(baseOperations)
     expect(focus.operations).toContain('clearRect:0,0,100,60')
@@ -266,6 +304,77 @@ describe('Canvas renderer', () => {
     surface.destroy()
   })
 
+  it('paints leading focus marks below the cached base scene', () => {
+    const container = document.createElement('div')
+    const surface = createCanvasChartRenderer().mount(container, () => {})
+    const datum = { id: 'band' }
+    const point = {
+      key: 'focus:band',
+      markId: 'focus',
+      group: null,
+      groupLabel: 'focus',
+      datum,
+      datumIndex: 0,
+      xValue: 'A',
+      yValue: 0,
+      x: 25,
+      y: 30,
+      color: '#94a3b8',
+    }
+    surface.render(
+      scene([
+        {
+          kind: 'group',
+          key: 'focus',
+          children: [
+            {
+              kind: 'rect',
+              key: point.key,
+              x: 10,
+              y: 0,
+              width: 30,
+              height: 60,
+              style: { fill: '#94a3b8', fillOpacity: 0.16 },
+            },
+          ],
+          focus: {
+            match: 'x',
+            points: [point],
+            placement: 'under',
+          },
+        },
+        {
+          kind: 'dot',
+          key: 'dot',
+          x: 25,
+          y: 30,
+          radius: 5,
+          style: { fill: '#ff0000' },
+        },
+      ]),
+      renderOptions(),
+    )
+    const base = contexts.get(surface.canvas)
+    const under = contexts.get(surface.focusUnderCanvas)
+    if (!base || !under) throw new Error('Expected base and underlay contexts')
+    const baseOperations = [...base.operations]
+
+    surface.paintFocus({
+      primary: {
+        ...point,
+        key: 'dot',
+        markId: 'dots',
+      },
+      group: [],
+      source: 'pointer',
+      pinned: false,
+    })
+
+    expect(base.operations).toEqual(baseOperations)
+    expect(under.operations).toContain('rect:10,0,30,60')
+    surface.destroy()
+  })
+
   it('batches adjacent dots with the same paint into one Canvas path', () => {
     const container = document.createElement('div')
     const surface = canvasChartRenderer.mount(container, () => {})
diff --git a/packages/charts-core/src/canvas.ts b/packages/charts-core/src/canvas.ts
index a386b1d..b69b30b 100644
--- a/packages/charts-core/src/canvas.ts
+++ b/packages/charts-core/src/canvas.ts
@@ -1,5 +1,6 @@
 import { mountChartRenderer } from './renderer'
 import { createChartRuntime } from './runtime'
+import { focusedSceneNodes } from './focus-layer'
 import type {
   ChartAnimationOptions,
   ChartBounds,
@@ -27,6 +28,7 @@ export interface CanvasChartSurface<
 > extends ChartSurface<TDatum, TXValue, TYValue> {
   readonly element: HTMLDivElement
   readonly canvas: HTMLCanvasElement
+  readonly focusUnderCanvas: HTMLCanvasElement
   readonly focusCanvas: HTMLCanvasElement
 }
 
@@ -122,6 +124,10 @@ export function createCanvasChartRenderer<
       const document = container.ownerDocument
       const view = document.defaultView
       const root = findOrCreateRoot(container)
+      const focusUnderCanvas = findOrCreateCanvas(
+        root,
+        'ts-chart-canvas__focus-under',
+      )
       const canvas = findOrCreateCanvas(root, 'ts-chart-canvas__scene')
       const focusCanvas = findOrCreateCanvas(root, 'ts-chart-canvas__focus')
       const resolver = new CanvasPaintResolver(root)
@@ -142,6 +148,7 @@ export function createCanvasChartRenderer<
         renderer,
         element: root,
         canvas,
+        focusUnderCanvas,
         focusCanvas,
         render(nextScene, options) {
           if (destroyed) return
@@ -161,10 +168,12 @@ export function createCanvasChartRenderer<
             pixelRatio === nextPixelRatio
           pixelRatio = nextPixelRatio
           sizeCanvas(canvas, nextScene, pixelRatio)
+          sizeCanvas(focusUnderCanvas, nextScene, pixelRatio)
           sizeCanvas(focusCanvas, nextScene, pixelRatio)
           root.dataset.tsChartWidth = String(nextScene.width)
           root.dataset.tsChartHeight = String(nextScene.height)
           root.dataset.tsChartPixelRatio = String(pixelRatio)
+          clearCanvas(focusUnderCanvas, nextScene, pixelRatio)
           clearCanvas(focusCanvas, nextScene, pixelRatio)
 
           if (canAnimate) {
@@ -189,21 +198,24 @@ export function createCanvasChartRenderer<
             y: ((clientY - bounds.top) / bounds.height) * currentScene.height,
           }
         },
-        paintFocus(point) {
+        paintFocus(focus) {
           if (!scene || destroyed) return
-          const context = requiredContext(focusCanvas)
-          resetContext(context, pixelRatio)
-          context.clearRect(0, 0, scene.width, scene.height)
-          if (!point) return
-          context.beginPath()
-          context.arc(point.x, point.y, 5, 0, Math.PI * 2)
-          context.fillStyle =
-            resolver.resolve('var(--ts-chart-focus-fill, Canvas)') ??
-            'transparent'
-          context.fill()
-          context.strokeStyle = resolver.resolve(point.color) ?? 'currentColor'
-          context.lineWidth = 2.5
-          context.stroke()
+          paintFocusCanvas(
+            focusUnderCanvas,
+            scene,
+            focusedSceneNodes(scene, focus, 'under'),
+            pixelRatio,
+            resolver,
+            root,
+          )
+          paintFocusCanvas(
+            focusCanvas,
+            scene,
+            focusedSceneNodes(scene, focus, 'over'),
+            pixelRatio,
+            resolver,
+            root,
+          )
         },
         destroy() {
           if (destroyed) return
@@ -271,7 +283,7 @@ function renderCanvasShell(
     : ''
   const width = integer(scene.width)
   const height = integer(scene.height)
-  return `<div class="${escapeAttribute(className)}" role="img" aria-roledescription="chart" aria-label="${escapeAttribute(options.ariaLabel)}"${description} tabindex="${integer(options.tabIndex ?? 0)}" data-ts-chart-width="${width}" data-ts-chart-height="${height}" data-ts-chart-pixel-ratio="1" style="display:block;position:relative;width:100%;height:100%;overflow:visible"><canvas class="ts-chart-canvas__scene" width="${width}" height="${height}" aria-hidden="true" style="display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none"></canvas><canvas class="ts-chart-canvas__focus" width="${width}" height="${height}" aria-hidden="true" style="display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none"></canvas></div>`
+  return `<div class="${escapeAttribute(className)}" role="img" aria-roledescription="chart" aria-label="${escapeAttribute(options.ariaLabel)}"${description} tabindex="${integer(options.tabIndex ?? 0)}" data-ts-chart-width="${width}" data-ts-chart-height="${height}" data-ts-chart-pixel-ratio="1" style="display:block;position:relative;width:100%;height:100%;overflow:visible"><canvas class="ts-chart-canvas__focus-under" width="${width}" height="${height}" aria-hidden="true" style="display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none"></canvas><canvas class="ts-chart-canvas__scene" width="${width}" height="${height}" aria-hidden="true" style="display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none"></canvas><canvas class="ts-chart-canvas__focus" width="${width}" height="${height}" aria-hidden="true" style="display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none"></canvas></div>`
 }
 
 function findOrCreateRoot(container: HTMLElement): HTMLDivElement {
@@ -477,6 +489,23 @@ function paintScene(
   paintNodes(painter, scene.nodes, defaultPaint)
 }
 
+function paintFocusCanvas(
+  canvas: HTMLCanvasElement,
+  scene: ChartScene,
+  nodes: readonly SceneNode[],
+  pixelRatio: number,
+  resolver: CanvasPaintResolver,
+  root: HTMLDivElement,
+) {
+  const context = requiredContext(canvas)
+  resetContext(context, pixelRatio)
+  context.clearRect(0, 0, scene.width, scene.height)
+  if (!nodes.length) return
+  const Path = root.ownerDocument.defaultView?.Path2D
+  const font = readFont(root)
+  paintNodes({ context, resolver, scene, Path, font }, nodes, defaultPaint)
+}
+
 function paintNodes(
   painter: ScenePainter,
   nodes: readonly SceneNode[],
@@ -505,6 +534,7 @@ function paintNode(
   try {
     switch (node.kind) {
       case 'group': {
+        if (node.focus) return
         context.translate(node.translateX ?? 0, node.translateY ?? 0)
         if (node.clip) {
           context.beginPath()
diff --git a/packages/charts-core/src/configured-scale.ts b/packages/charts-core/src/configured-scale.ts
index ffb84b7..6243117 100644
--- a/packages/charts-core/src/configured-scale.ts
+++ b/packages/charts-core/src/configured-scale.ts
@@ -26,7 +26,11 @@ export function resolveConfiguredScale<TValue extends ChartValue>(
     : naturalRange
   scale.range(range)
   const domain = scale.domain()
-  const tickValues = scale.ticks?.(context.tickCount) ?? domain
+  const tickOptions =
+    context.options?.axis === false ? undefined : context.options?.axis?.ticks
+  const configuredTicks = tickOptions === false ? undefined : tickOptions
+  const tickValues =
+    configuredTicks?.values ?? scale.ticks?.(context.tickCount) ?? domain
   const tickFormat = scale.tickFormat?.(context.tickCount)
   const bandwidth = scale.bandwidth?.() ?? 0
   const map = (value: unknown) => {
@@ -43,7 +47,7 @@ export function resolveConfiguredScale<TValue extends ChartValue>(
       value,
       position: map(value),
       label:
-        context.options?.format?.(value) ??
+        configuredTicks?.format?.(value) ??
         tickFormat?.(value) ??
         formatValue(value),
     })),
diff --git a/packages/charts-core/src/export.test.ts b/packages/charts-core/src/export.test.ts
index 45696d8..5a5206e 100644
--- a/packages/charts-core/src/export.test.ts
+++ b/packages/charts-core/src/export.test.ts
@@ -30,7 +30,7 @@ describe('optional export', () => {
     expect(result).toContain('width="480"')
     expect(result).toContain('height="260"')
     expect(result).toContain('aria-label="Exported chart"')
-    expect(result).not.toContain('data-ts-chart-focus')
+    expect(result).not.toContain('data-ts-focus-layer')
   })
 
   it('inlines computed presentation for gradient stops', () => {
@@ -88,7 +88,7 @@ describe('optional export', () => {
   it('exports Canvas scene and optional focus layers through the raster API', async () => {
     const container = document.createElement('div')
     container.innerHTML =
-      '<div class="ts-chart ts-chart-canvas" data-ts-chart-width="400" data-ts-chart-height="200" data-ts-chart-pixel-ratio="2"><canvas class="ts-chart-canvas__scene" width="800" height="400"></canvas><canvas class="ts-chart-canvas__focus" width="800" height="400"></canvas></div>'
+      '<div class="ts-chart ts-chart-canvas" data-ts-chart-width="400" data-ts-chart-height="200" data-ts-chart-pixel-ratio="2"><canvas class="ts-chart-canvas__focus-under" width="800" height="400"></canvas><canvas class="ts-chart-canvas__scene" width="800" height="400"></canvas><canvas class="ts-chart-canvas__focus" width="800" height="400"></canvas></div>'
     const drawImage = vi.fn()
     let output: HTMLCanvasElement | undefined
     const getContext = vi
@@ -115,11 +115,14 @@ describe('optional export', () => {
     expect(blob.type).toBe('image/png')
     expect(output?.width).toBe(600)
     expect(output?.height).toBe(300)
-    expect(drawImage).toHaveBeenCalledTimes(2)
+    expect(drawImage).toHaveBeenCalledTimes(3)
     expect(drawImage.mock.calls[0]?.[0]).toBe(
-      container.querySelector('.ts-chart-canvas__scene'),
+      container.querySelector('.ts-chart-canvas__focus-under'),
     )
     expect(drawImage.mock.calls[1]?.[0]).toBe(
+      container.querySelector('.ts-chart-canvas__scene'),
+    )
+    expect(drawImage.mock.calls[2]?.[0]).toBe(
       container.querySelector('.ts-chart-canvas__focus'),
     )
     getContext.mockRestore()
diff --git a/packages/charts-core/src/export.ts b/packages/charts-core/src/export.ts
index d892756..cb46ec3 100644
--- a/packages/charts-core/src/export.ts
+++ b/packages/charts-core/src/export.ts
@@ -35,8 +35,11 @@ export function serializeChartSvg(
   const clone = svg.cloneNode(true) as SVGSVGElement
   inlinePresentation(svg, clone)
   clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
-  if (!options.includeFocus)
-    clone.querySelector('[data-ts-chart-focus]')?.remove()
+  if (!options.includeFocus) {
+    clone
+      .querySelectorAll('[data-ts-focus-layer]')
+      .forEach((layer) => layer.remove())
+  }
   const dimensions = svgDimensions(svg)
   const width = options.width ?? (dimensions.width || svg.clientWidth)
   const height = options.height ?? (dimensions.height || svg.clientHeight)
@@ -110,10 +113,16 @@ export async function renderChartImage(
       view.URL.revokeObjectURL(url)
     }
   } else {
+    const focusUnder = canvasSurface!.querySelector<HTMLCanvasElement>(
+      '.ts-chart-canvas__focus-under',
+    )
     const scene = canvasSurface!.querySelector<HTMLCanvasElement>(
       '.ts-chart-canvas__scene',
     )
     if (!scene) throw new Error('Expected a Canvas chart scene layer')
+    if (options.includeFocus && focusUnder) {
+      context.drawImage(focusUnder, 0, 0, width, height)
+    }
     context.drawImage(scene, 0, 0, width, height)
     if (options.includeFocus) {
       const focus = canvasSurface!.querySelector<HTMLCanvasElement>(
diff --git a/packages/charts-core/src/facet.test.ts b/packages/charts-core/src/facet.test.ts
index a667519..bbff813 100644
--- a/packages/charts-core/src/facet.test.ts
+++ b/packages/charts-core/src/facet.test.ts
@@ -1,6 +1,7 @@
 import { describe, expect, it } from 'vitest'
 import { scaleLinear } from 'd3-scale'
 import { facet, facetChart } from './facet'
+import { measureSceneLabelBounds } from './guide-layout'
 import { lineY } from './line'
 import { createMark } from './mark'
 import { createChartScene } from './scene'
@@ -103,11 +104,11 @@ describe('facets', () => {
           marks: [lineY(group, { x: 'x', y: 'y' })],
           x: {
             scale: scaleLinear().domain([0, 1]),
-            label: 'Horizontal',
+            axis: { label: 'Horizontal' },
           },
           y: {
             scale: scaleLinear().domain([0, 6]),
-            label: 'Vertical',
+            axis: { label: 'Vertical' },
           },
         }),
       }),
@@ -160,11 +161,11 @@ describe('facets', () => {
           marks: [lineY(group, { x: 'x', y: 'y', key: 'id' })],
           x: {
             scale: scaleLinear().domain([0, 1]),
-            label: 'Horizontal',
+            axis: { label: 'Horizontal' },
           },
           y: {
             scale: scaleLinear().domain([0, 6]),
-            label: 'Vertical',
+            axis: { label: 'Vertical' },
           },
         }),
       }),
@@ -204,6 +205,66 @@ describe('facets', () => {
     expect(pointSpans.every((span) => span === pointSpans[0])).toBe(true)
   })
 
+  it('remeasures shared outer axes after responsive tick thinning', () => {
+    const data = ['A', 'B', 'C', 'D'].flatMap((group) => [
+      { group, x: 3, y: 2 },
+      { group, x: 20, y: 14 },
+    ])
+    const measureText = (
+      text: string,
+      options: { fontSize: number; anchor: 'start' | 'middle' | 'end' },
+    ) => {
+      const width = text.length * options.fontSize * 0.64
+      return {
+        x:
+          options.anchor === 'middle'
+            ? -width / 2
+            : options.anchor === 'end'
+              ? -width
+              : 0,
+        y: -options.fontSize * 0.8,
+        width,
+        height: options.fontSize,
+      }
+    }
+    const scene = createChartScene(
+      facetChart(data, {
+        by: 'group',
+        columns: 4,
+        gap: 12,
+        chart: (group) => ({
+          marks: [lineY(group, { x: 'x', y: 'y' })],
+          x: {
+            scale: scaleLinear().domain([3, 20]),
+            axis: { ticks: { count: 5 } },
+          },
+          y: {
+            scale: scaleLinear().domain([2, 14]),
+            axis: { ticks: { count: 4 } },
+          },
+        }),
+      }),
+      { width: 320, height: 360 },
+      { measureText },
+    )
+    const labels = translatedLabels(scene.nodes)
+      .filter(({ label }) => label.key.startsWith('x-tick-label:'))
+      .map(({ label, x, y }) =>
+        measureSceneLabelBounds(
+          { ...label, x: label.x + x, y: label.y + y },
+          measureText,
+        ),
+      )
+
+    expect(labels.length).toBeGreaterThan(0)
+    expect(
+      Math.min(...labels.map((bounds) => bounds.x)),
+    ).toBeGreaterThanOrEqual(0)
+    expect(
+      Math.max(...labels.map((bounds) => bounds.x + bounds.width)),
+    ).toBeLessThanOrEqual(320)
+  })
+
   it('composes nested facets with unique points and responsive outer flow', () => {
     const data = ['North', 'South'].flatMap((region) =>
       ['A', 'B'].flatMap((series, seriesIndex) => [
@@ -363,6 +424,26 @@ function flatten(nodes: readonly SceneNode[]): SceneNode[] {
   )
 }
 
+function translatedLabels(
+  nodes: readonly SceneNode[],
+  x = 0,
+  y = 0,
+): {
+  label: Extract<SceneNode, { kind: 'label' }>
+  x: number
+  y: number
+}[] {
+  return nodes.flatMap((node) => {
+    if (node.kind === 'label') return [{ label: node, x, y }]
+    if (node.kind !== 'group') return []
+    return translatedLabels(
+      node.children,
+      x + (node.translateX ?? 0),
+      y + (node.translateY ?? 0),
+    )
+  })
+}
+
 function directFacetCells(
   nodes: readonly SceneNode[],
   facetId: string,
diff --git a/packages/charts-core/src/facet.ts b/packages/charts-core/src/facet.ts
index 4d4bf97..9c3544f 100644
--- a/packages/charts-core/src/facet.ts
+++ b/packages/charts-core/src/facet.ts
@@ -1,5 +1,6 @@
 import { channelValues } from './mark'
 import { createMarkWithScaleValues } from './mark-with-scale-values'
+import { resolveGuideMargins } from './guide-layout'
 import { valueKey } from './scales'
 import { createChartScene } from './scene'
 import type {
@@ -127,6 +128,18 @@ export function facet<TDatum>(
           ),
         )
         assertOuterAxes(id, definitions, guideScenes)
+        const margin = resolveOuterMargin({
+          id,
+          entries,
+          definitions,
+          chart,
+          columns,
+          rows,
+          gap,
+          labelHeight,
+          initial: maxSceneMargins(guideScenes),
+          layout,
+        })
 
         return renderOuterAxes({
           id,
@@ -140,7 +153,7 @@ export function facet<TDatum>(
           showLabel,
           label: options.label,
           theme,
-          margin: maxSceneMargins(guideScenes),
+          margin,
           layout,
         })
       },
@@ -148,6 +161,77 @@ export function facet<TDatum>(
   })
 }
 
+function resolveOuterMargin<TDatum>(options: {
+  id: string
+  entries: readonly FacetEntry<TDatum>[]
+  definitions: readonly StaticChartDefinition<TDatum>[]
+  chart: ChartBounds
+  columns: number
+  rows: number
+  gap: number
+  labelHeight: number
+  initial: ChartMargin
+  layout: Parameters<typeof createChartScene>[2]
+}): ChartMargin {
+  const {
+    id,
+    entries,
+    definitions,
+    chart,
+    columns,
+    rows,
+    gap,
+    labelHeight,
+    layout,
+  } = options
+  let margin = options.initial
+
+  for (let pass = 0; pass < 4; pass += 1) {
+    const plotWidth = cellSize(
+      Math.max(1, chart.width - margin.left - margin.right),
+      gap,
+      columns,
+    )
+    const plotHeight = cellSize(
+      Math.max(
+        1,
+        chart.height - margin.top - margin.bottom - labelHeight * rows,
+      ),
+      gap,
+      rows,
+    )
+    const measured = entries.map((entry, index) => {
+      const scene = createFacetScene(
+        id,
+        entry,
+        {
+          ...definitions[index]!,
+          marks: definitions[index]!.marks.map(withoutMarkRendering),
+          margin: 0,
+        },
+        { width: plotWidth, height: plotHeight },
+        layout,
+      )
+      const axes = scene.nodes.find(
+        (node): node is SceneGroup =>
+          node.kind === 'group' && node.key === 'axes',
+      )
+      return axes
+        ? resolveGuideMargins(
+            axes,
+            { x: 0, y: 0, width: plotWidth, height: plotHeight },
+            { measureText: layout?.measureText },
+          )
+        : { top: 0, right: 0, bottom: 0, left: 0 }
+    })
+    const next = maxMargins([margin, ...measured])
+    if (sameMargin(margin, next)) return next
+    margin = next
+  }
+
+  return margin
+}
+
 interface CellRenderOptions<TDatum> {
   id: string
   entries: readonly FacetEntry<TDatum>[]
@@ -548,10 +632,67 @@ function sameAxis(
   right: StaticChartDefinition['x'],
 ): boolean {
   if (left === null || right === null) return left === right
+  const leftAxis = left?.axis
+  const rightAxis = right?.axis
+  if (leftAxis === false || rightAxis === false) return leftAxis === rightAxis
+  const leftTicks = leftAxis?.ticks
+  const rightTicks = rightAxis?.ticks
+  const leftLabels = leftAxis?.tickLabels
+  const rightLabels = rightAxis?.tickLabels
+  const leftLabel = leftAxis?.label
+  const rightLabel = rightAxis?.label
   return (
-    left?.label === right?.label &&
-    left?.labelOffset === right?.labelOffset &&
-    left?.tickRotate === right?.tickRotate
+    leftAxis?.line === rightAxis?.line &&
+    sameAxisTicks(leftTicks, rightTicks) &&
+    sameAxisTickLabels(leftLabels, rightLabels) &&
+    (typeof leftLabel === 'string' ? leftLabel : leftLabel?.text) ===
+      (typeof rightLabel === 'string' ? rightLabel : rightLabel?.text) &&
+    (typeof leftLabel === 'object' ? leftLabel.offset : undefined) ===
+      (typeof rightLabel === 'object' ? rightLabel.offset : undefined)
+  )
+}
+
+function sameAxisTicks(
+  left: Exclude<
+    NonNullable<NonNullable<StaticChartDefinition['x']>['axis']>,
+    false
+  >['ticks'],
+  right: Exclude<
+    NonNullable<NonNullable<StaticChartDefinition['x']>['axis']>,
+    false
+  >['ticks'],
+): boolean {
+  if (left === false || right === false) return left === right
+  return (
+    left?.count === right?.count &&
+    left?.spacing === right?.spacing &&
+    left?.size === right?.size &&
+    left?.padding === right?.padding &&
+    sameValues(left?.values ?? [], right?.values ?? [])
+  )
+}
+
+function sameAxisTickLabels(
+  left: Exclude<
+    NonNullable<NonNullable<StaticChartDefinition['x']>['axis']>,
+    false
+  >['tickLabels'],
+  right: Exclude<
+    NonNullable<NonNullable<StaticChartDefinition['x']>['axis']>,
+    false
+  >['tickLabels'],
+): boolean {
+  if (left === false || right === false) return left === right
+  if (left?.rotate !== right?.rotate) return false
+  const leftThin = left?.thin
+  const rightThin = right?.thin
+  if (typeof leftThin !== 'object' || typeof rightThin !== 'object') {
+    return leftThin === rightThin
+  }
+  return (
+    leftThin.minGap === rightThin.minGap &&
+    leftThin.priority === rightThin.priority &&
+    sameValues(leftThin.keep ?? [], rightThin.keep ?? [])
   )
 }
 
@@ -616,17 +757,30 @@ function offsetPoints<TDatum>(
 }
 
 function maxSceneMargins(scenes: readonly ChartScene[]): ChartMargin {
-  return scenes.reduce(
+  return maxMargins(scenes.map((scene) => scene.margin))
+}
+
+function maxMargins(margins: readonly ChartMargin[]): ChartMargin {
+  return margins.reduce(
     (margin, scene) => ({
-      top: Math.max(margin.top, scene.margin.top),
-      right: Math.max(margin.right, scene.margin.right),
-      bottom: Math.max(margin.bottom, scene.margin.bottom),
-      left: Math.max(margin.left, scene.margin.left),
+      top: Math.max(margin.top, scene.top),
+      right: Math.max(margin.right, scene.right),
+      bottom: Math.max(margin.bottom, scene.bottom),
+      left: Math.max(margin.left, scene.left),
     }),
     { top: 0, right: 0, bottom: 0, left: 0 },
   )
 }
 
+function sameMargin(left: ChartMargin, right: ChartMargin): boolean {
+  return (
+    Math.abs(left.top - right.top) < 0.25 &&
+    Math.abs(left.right - right.right) < 0.25 &&
+    Math.abs(left.bottom - right.bottom) < 0.25 &&
+    Math.abs(left.left - right.left) < 0.25
+  )
+}
+
 function cellSize(size: number, gap: number, count: number): number {
   return Math.max(1, (size - gap * (count - 1)) / count)
 }
diff --git a/packages/charts-core/src/focus-layer.ts b/packages/charts-core/src/focus-layer.ts
new file mode 100644
index 0000000..ecc4bb7
--- /dev/null
+++ b/packages/charts-core/src/focus-layer.ts
@@ -0,0 +1,133 @@
+import { valueKey } from './scales'
+import type {
+  ChartFocusState,
+  ChartPoint,
+  ChartScene,
+  SceneGroup,
+  SceneNode,
+} from './types'
+
+export function focusedSceneNodes(
+  scene: ChartScene,
+  focus: ChartFocusState | null,
+  placement: 'under' | 'over',
+): SceneNode[] {
+  if (!focus) return []
+  return collectFocusedNodes(scene.nodes, focus, placement)
+}
+
+export function focusedNodeKeys(
+  layer: SceneGroup,
+  focus: ChartFocusState | null,
+): Set<string> {
+  if (!layer.focus || !focus) return new Set()
+  const points = layer.focus.points.filter((point) =>
+    matchesFocusPoint(point, focus, layer.focus!.match),
+  )
+  const filtered = filterNodes(layer.children, points)
+  const keys = new Set<string>()
+  visitNodes(filtered, (node) => keys.add(node.key))
+  return keys
+}
+
+function collectFocusedNodes(
+  nodes: readonly SceneNode[],
+  focus: ChartFocusState,
+  placement: 'under' | 'over',
+): SceneNode[] {
+  const output: SceneNode[] = []
+  for (const node of nodes) {
+    if (node.kind !== 'group') continue
+    if (node.focus) {
+      if (node.focus.placement !== placement) continue
+      const points = node.focus.points.filter((point) =>
+        matchesFocusPoint(point, focus, node.focus!.match),
+      )
+      const children = filterNodes(node.children, points)
+      if (children.length) output.push({ ...node, focus: undefined, children })
+      continue
+    }
+    const children = collectFocusedNodes(node.children, focus, placement)
+    if (children.length) output.push({ ...node, children })
+  }
+  return output
+}
+
+function filterNodes(
+  nodes: readonly SceneNode[],
+  points: readonly ChartPoint[],
+): SceneNode[] {
+  const output: SceneNode[] = []
+  for (const node of nodes) {
+    if (node.kind !== 'group') {
+      if (points.some((point) => keysRelate(node.key, point.key))) {
+        output.push(node)
+      }
+      continue
+    }
+    const children = filterNodes(node.children, points)
+    if (children.length) {
+      output.push({ ...node, children })
+    } else if (points.some((point) => point.key.startsWith(`${node.key}:`))) {
+      output.push(node)
+    }
+  }
+  return output
+}
+
+function matchesFocusPoint(
+  candidate: ChartPoint,
+  focus: ChartFocusState,
+  match: NonNullable<SceneGroup['focus']>['match'],
+) {
+  if (match === 'x') {
+    return sameValue(candidate.xValue, focus.primary.xValue)
+  }
+  if (match === 'y') {
+    return sameValue(candidate.yValue, focus.primary.yValue)
+  }
+  if (match === 'series') {
+    return sameValue(candidate.group, focus.primary.group)
+  }
+  if (match === 'key') {
+    return (
+      candidate.key === focus.primary.key ||
+      candidate.datum === focus.primary.datum
+    )
+  }
+  if (match === 'group') {
+    return focus.group.some((point) => sameSemanticPoint(candidate, point))
+  }
+  return sameSemanticPoint(candidate, focus.primary)
+}
+
+function sameSemanticPoint(left: ChartPoint, right: ChartPoint) {
+  return (
+    left.datum === right.datum ||
+    (sameValue(left.xValue, right.xValue) &&
+      sameValue(left.yValue, right.yValue) &&
+      sameValue(left.group, right.group))
+  )
+}
+
+function sameValue(left: unknown, right: unknown) {
+  return valueKey(left) === valueKey(right)
+}
+
+function keysRelate(left: string, right: string) {
+  return (
+    left === right ||
+    left.startsWith(`${right}:`) ||
+    right.startsWith(`${left}:`)
+  )
+}
+
+function visitNodes(
+  nodes: readonly SceneNode[],
+  visit: (node: SceneNode) => void,
+) {
+  for (const node of nodes) {
+    visit(node)
+    if (node.kind === 'group') visitNodes(node.children, visit)
+  }
+}
diff --git a/packages/charts-core/src/focus-mark.test.ts b/packages/charts-core/src/focus-mark.test.ts
new file mode 100644
index 0000000..ff5c364
--- /dev/null
+++ b/packages/charts-core/src/focus-mark.test.ts
@@ -0,0 +1,103 @@
+import { scaleBand, scaleLinear } from 'd3-scale'
+import { describe, expect, it } from 'vitest'
+import { bandX } from './band'
+import { barY } from './bar'
+import { whenFocused } from './focus-mark'
+import { createChartScene, defineChart } from './scene'
+import { svgChartRenderer } from './svg-surface'
+
+describe('focus-filtered marks', () => {
+  const rows = [
+    { id: 'a:query', category: 'A', series: 'Query', value: 12 },
+    { id: 'a:router', category: 'A', series: 'Router', value: 8 },
+    { id: 'b:query', category: 'B', series: 'Query', value: 6 },
+  ]
+
+  function scene() {
+    const categories = [{ category: 'A' }, { category: 'B' }]
+    return createChartScene(
+      defineChart({
+        marks: [
+          whenFocused(
+            bandX(categories, {
+              x: 'category',
+              key: 'category',
+              fill: '#94a3b8',
+              fillOpacity: 0.16,
+              inset: -6,
+            }),
+            { match: 'x' },
+          ),
+          barY(rows, {
+            x: 'category',
+            y: 'value',
+            z: 'series',
+            color: 'series',
+            key: 'id',
+          }),
+        ],
+        x: {
+          scale: scaleBand<string>().domain(['A', 'B']).padding(0.1),
+        },
+        y: { scale: scaleLinear().domain([0, 20]) },
+      }),
+      { width: 480, height: 260 },
+    )
+  }
+
+  it('keeps focus effects out of hit testing and preserves mark order', () => {
+    const resolved = scene()
+    const marks = resolved.nodes.find((node) => node.key === 'marks')
+    if (marks?.kind !== 'group') throw new Error('Expected mark group')
+    const focus = marks.children[0]
+    if (focus?.kind !== 'group' || !focus.focus) {
+      throw new Error('Expected focus layer')
+    }
+
+    expect(focus.focus).toMatchObject({ match: 'x', placement: 'under' })
+    expect(focus.focus.points).toHaveLength(2)
+    expect(resolved.points).toHaveLength(rows.length)
+    expect(
+      resolved.points.every((point) => point.markId.startsWith('bar-y')),
+    ).toBe(true)
+    expect(
+      resolved.nodes.some(
+        (node) =>
+          node.kind === 'group' &&
+          node.className?.includes('focus-layer--default'),
+      ),
+    ).toBe(false)
+  })
+
+  it('shows only ordinary mark geometry matching the focused x value', () => {
+    const resolved = scene()
+    const container = document.createElement('div')
+    const surface = svgChartRenderer.mount(container, () => {})
+    surface.render(resolved, { ariaLabel: 'Focused bars' })
+
+    const primary = resolved.points[0]!
+    const group = resolved.points.filter(
+      (point) => point.xValue === primary.xValue,
+    )
+    surface.paintFocus({
+      primary,
+      group,
+      source: 'pointer',
+      pinned: false,
+    })
+
+    const layer = container.querySelector<SVGGElement>('[data-ts-focus-layer]')
+    expect(layer?.getAttribute('visibility')).toBe('visible')
+    const visibleRects = [...(layer?.querySelectorAll('rect') ?? [])].filter(
+      (rect) => rect.getAttribute('visibility') === 'visible',
+    )
+    expect(visibleRects).toHaveLength(1)
+    expect(
+      visibleRects.every((rect) => Number(rect.getAttribute('height')) > 0),
+    ).toBe(true)
+
+    surface.paintFocus(null)
+    expect(layer?.getAttribute('visibility')).toBe('hidden')
+    surface.destroy()
+  })
+})
diff --git a/packages/charts-core/src/focus-mark.ts b/packages/charts-core/src/focus-mark.ts
new file mode 100644
index 0000000..3e48c5a
--- /dev/null
+++ b/packages/charts-core/src/focus-mark.ts
@@ -0,0 +1,28 @@
+import type { ChartFocusFilter, ChartMark, ChartValue } from './types'
+
+export function whenFocused<
+  TDatum,
+  TXPointValue extends ChartValue,
+  TYPointValue extends ChartValue,
+  TXScaleValue extends ChartValue,
+  TYScaleValue extends ChartValue,
+>(
+  mark: ChartMark<
+    TDatum,
+    TXPointValue,
+    TYPointValue,
+    TXScaleValue,
+    TYScaleValue
+  >,
+  options: ChartFocusFilter = {},
+): ChartMark<TDatum, TXPointValue, TYPointValue, TXScaleValue, TYScaleValue> {
+  return {
+    ...mark,
+    initialize(context) {
+      return {
+        ...mark.initialize(context),
+        focus: options,
+      }
+    },
+  }
+}
diff --git a/packages/charts-core/src/group.ts b/packages/charts-core/src/group.ts
new file mode 100644
index 0000000..d2fa3c5
--- /dev/null
+++ b/packages/charts-core/src/group.ts
@@ -0,0 +1,16 @@
+import type { ChartScaleInput } from './types'
+
+export interface GroupOptions {
+  scale?: ChartScaleInput<any>
+  padding?: number
+}
+
+export interface GroupLayout {
+  readonly type: 'group'
+  readonly scale?: ChartScaleInput<any>
+  readonly padding?: number
+}
+
+export function group(options: GroupOptions = {}): GroupLayout {
+  return { type: 'group', ...options }
+}
diff --git a/packages/charts-core/src/index.ts b/packages/charts-core/src/index.ts
index 609d1e3..3c125d7 100644
--- a/packages/charts-core/src/index.ts
+++ b/packages/charts-core/src/index.ts
@@ -11,6 +11,8 @@ export type {
 } from './adapter'
 export { barX, barY } from './bar'
 export type { BarXOptions, BarYOptions } from './bar'
+export { bandX, bandY } from './band'
+export type { BandXOptions, BandYOptions } from './band'
 export { d3Curve } from './d3-shape'
 export { dot } from './dot'
 export type { DotOptions } from './dot'
@@ -18,6 +20,9 @@ export { facet, facetChart } from './facet'
 export type { FacetAxes, FacetOptions } from './facet'
 export { frame } from './frame'
 export type { FrameOptions } from './frame'
+export { whenFocused } from './focus-mark'
+export { group } from './group'
+export type { GroupLayout, GroupOptions } from './group'
 export { hexagon } from './hexagon'
 export type { HexagonOptions } from './hexagon'
 export { mountChart } from './dom'
@@ -38,6 +43,13 @@ export {
   findNearestPoint,
 } from './scene'
 export { renderChartSvg } from './svg'
+export { stackY } from './stack'
+export type {
+  StackOffset,
+  StackOptions,
+  StackOrder,
+  StackYChannels,
+} from './stack'
 export { ruleX, ruleY } from './rule'
 export type { RuleXOptions, RuleYOptions } from './rule'
 export { text } from './text'
@@ -58,7 +70,11 @@ export type {
   MarkScene,
   MaterializedChannel,
   ChartAxisOptions,
-  ChartAxisGuideOptions,
+  ChartAxisLabelOptions,
+  ChartAxisPresentationOptions,
+  ChartAxisTickLabelOptions,
+  ChartAxisTickLabelThinOptions,
+  ChartAxisTickOptions,
   ChartAxisValue,
   ChartAnimationOptions,
   ChartBounds,
@@ -76,7 +92,11 @@ export type {
   ChartDefinition,
   ChartDefinitionOptions,
   ChartFocusMode,
+  ChartFocusFilter,
+  ChartFocusMatch,
   ChartFocusPreset,
+  ChartFocusSource,
+  ChartFocusState,
   ChartFocusStrategy,
   ChartGradientStop,
   ChartHost,
@@ -129,6 +149,7 @@ export type {
   ChartTooltipContent,
   ChartTooltipContentContext,
   ChartTooltipAnchor,
+  ChartTooltipAxisAnchor,
   ChartTooltipAnchorContext,
   ChartTooltipChannelItem,
   ChartTooltipDatumItem,
@@ -138,6 +159,8 @@ export type {
   ChartTooltipOptions,
   ChartTooltipPlacement,
   ChartTooltipPosition,
+  ChartTooltipXAnchor,
+  ChartTooltipYAnchor,
   ChartTooltipRow,
   ChartTooltipSort,
   ChartValue,
diff --git a/packages/charts-core/src/line.ts b/packages/charts-core/src/line.ts
index 8bb4351..9611430 100644
--- a/packages/charts-core/src/line.ts
+++ b/packages/charts-core/src/line.ts
@@ -92,6 +92,7 @@ export function lineY<TDatum>(
 
     return {
       id,
+      seriesFromColor: options.z === undefined && options.color !== undefined,
       channels: {
         x: {
           scale: 'x',
diff --git a/packages/charts-core/src/marks.test.ts b/packages/charts-core/src/marks.test.ts
index b4e1da2..d359441 100644
--- a/packages/charts-core/src/marks.test.ts
+++ b/packages/charts-core/src/marks.test.ts
@@ -1,15 +1,17 @@
 import { describe, expect, expectTypeOf, it, vi } from 'vitest'
-import { scaleBand, scaleOrdinal, scaleRadial } from 'd3-scale'
+import { scaleBand, scaleLinear, scaleOrdinal, scaleRadial } from 'd3-scale'
 import { curveMonotoneX, curveStep } from 'd3-shape'
 import { areaY } from './area'
 import { barX, barY } from './bar'
 import { d3Curve } from './d3-shape'
 import { dot } from './dot'
+import { group } from './group'
 import { colorLegend } from './legend'
 import { lineY } from './line'
 import { cell } from './rect'
 import { ruleX, ruleY } from './rule'
 import { createChartScene, defineChart } from './scene'
+import { stackY } from './stack'
 import { renderChartSvg } from './svg'
 import { renderChartSvgWithResources } from './svg-resources'
 import { text } from './text'
@@ -275,7 +277,7 @@ describe('core marks and categorical scales', () => {
             x: 'category',
             y: 'value',
             z: 'series',
-            groupScale,
+            layout: group({ scale: groupScale }),
             key: 'id',
           }),
         ],
@@ -319,7 +321,7 @@ describe('core marks and categorical scales', () => {
             x: 'category',
             y: 'value',
             z: 'series',
-            groupScale: () => scaleBand<string>().padding(0.2),
+            layout: group({ scale: () => scaleBand<string>().padding(0.2) }),
             key: 'id',
           }),
         ],
@@ -336,7 +338,7 @@ describe('core marks and categorical scales', () => {
     )
   })
 
-  it('uses color as the subgroup channel when groupScale is explicit and z is omitted', () => {
+  it('uses color as the subgroup channel when grouped layout is explicit and z is omitted', () => {
     const data = [
       { id: 'a:query', category: 'A', series: 'Query', value: 12 },
       { id: 'a:router', category: 'A', series: 'Router', value: 8 },
@@ -352,7 +354,7 @@ describe('core marks and categorical scales', () => {
             x: 'category',
             y: 'value',
             color: 'series',
-            groupScale: () => scaleBand<string>().padding(0.2),
+            layout: group({ scale: () => scaleBand<string>().padding(0.2) }),
           }),
         ],
         ...bandXAxes(['A'], [0, 12]),
@@ -367,7 +369,7 @@ describe('core marks and categorical scales', () => {
             x: 'value',
             y: 'category',
             color: 'series',
-            groupScale: () => scaleBand<string>().padding(0.2),
+            layout: group({ scale: () => scaleBand<string>().padding(0.2) }),
           }),
         ],
         ...bandYAxes([0, 12], ['A']),
@@ -424,7 +426,9 @@ describe('core marks and categorical scales', () => {
             y: 'value',
             z: 'series',
             color: 'status',
-            groupScale: scaleBand<string>().domain(['Left', 'Right']),
+            layout: group({
+              scale: scaleBand<string>().domain(['Left', 'Right']),
+            }),
           }),
         ],
         ...bandXAxes(['A'], [0, 12]),
@@ -555,6 +559,138 @@ describe('core marks and categorical scales', () => {
     expect(horizontal.scales.x.domain).toEqual([0, 20])
   })
 
+  it('implicitly stacks bar lengths and preserves raw values with computed extents', () => {
+    const rows = [
+      { id: 'a:query', category: 'A', series: 'Query', value: 12 },
+      { id: 'a:router', category: 'A', series: 'Router', value: 8 },
+      { id: 'b:query', category: 'B', series: 'Query', value: -4 },
+      { id: 'b:router', category: 'B', series: 'Router', value: 6 },
+    ]
+    const scene = createChartScene(
+      defineChart({
+        marks: [
+          barY(rows, {
+            x: 'category',
+            y: 'value',
+            color: 'series',
+            key: 'id',
+          }),
+        ],
+        ...bandXAxes(['A', 'B'], [-4, 20]),
+      }),
+      { width: 480, height: 260 },
+    )
+
+    expect(
+      scene.points.map(({ group, yValue, y1Value, y2Value }) => ({
+        group,
+        yValue,
+        y1Value,
+        y2Value,
+      })),
+    ).toEqual([
+      { group: 'Query', yValue: 12, y1Value: 0, y2Value: 12 },
+      { group: 'Router', yValue: 8, y1Value: 12, y2Value: 20 },
+      { group: 'Query', yValue: -4, y1Value: -4, y2Value: 0 },
+      { group: 'Router', yValue: 6, y1Value: 0, y2Value: 6 },
+    ])
+    expect(scene.scales.y.domain).toEqual([-4, 20])
+  })
+
+  it('configures implicit stacks through the reusable stackY transform', () => {
+    const rows = [
+      { category: 'A', series: 'Query', value: 1 },
+      { category: 'A', series: 'Router', value: 3 },
+    ]
+    const scene = createChartScene(
+      defineChart({
+        marks: [
+          barY(
+            rows,
+            stackY(
+              { offset: 'normalize', order: 'descending' },
+              { x: 'category', y: 'value', z: 'series' },
+            ),
+          ),
+        ],
+        ...bandXAxes(['A'], [0, 1]),
+      }),
+      { width: 480, height: 260 },
+    )
+
+    expect(
+      scene.points.map(({ yValue, y1Value, y2Value }) => ({
+        yValue,
+        y1Value,
+        y2Value,
+      })),
+    ).toEqual([
+      { yValue: 1, y1Value: 0.75, y2Value: 1 },
+      { yValue: 3, y1Value: 0, y2Value: 0.75 },
+    ])
+  })
+
+  it('shares implicit stack semantics with areaY', () => {
+    const rows = [
+      { date: 1, series: 'Query', value: 2 },
+      { date: 2, series: 'Query', value: 3 },
+      { date: 1, series: 'Router', value: 4 },
+      { date: 2, series: 'Router', value: 5 },
+    ]
+    const scene = createChartScene(
+      defineChart({
+        marks: [
+          areaY(rows, {
+            x: 'date',
+            y: 'value',
+            z: 'series',
+            color: 'series',
+          }),
+        ],
+        ...linearAxes([1, 2], [0, 8]),
+      }),
+      { width: 480, height: 260 },
+    )
+
+    expect(
+      scene.points.map(({ yValue, y1Value, y2Value }) => ({
+        yValue,
+        y1Value,
+        y2Value,
+      })),
+    ).toEqual([
+      { yValue: 2, y1Value: 0, y2Value: 2 },
+      { yValue: 3, y1Value: 0, y2Value: 3 },
+      { yValue: 4, y1Value: 2, y2Value: 6 },
+      { yValue: 5, y1Value: 3, y2Value: 8 },
+    ])
+  })
+
+  it('rejects continuous color as inferred stack identity', () => {
+    const rows = [
+      { category: 'A', value: 1, intensity: 0.2 },
+      { category: 'A', value: 2, intensity: 0.8 },
+    ]
+    expect(() =>
+      createChartScene(
+        defineChart({
+          marks: [
+            barY(rows, {
+              x: 'category',
+              y: 'value',
+              color: 'intensity',
+            }),
+          ],
+          ...bandXAxes(['A'], [0, 3]),
+          color: {
+            scale: () => scaleLinear<string>().range(['white', 'black']),
+          },
+        }),
+        { width: 480, height: 260 },
+      ),
+    ).toThrow(/continuous color channel cannot infer series identity/)
+  })
+
   it('renders interval areas, visual accessors, gradients, and dashed lines', () => {
     const data = [
       {
@@ -673,8 +809,11 @@ describe('core marks and categorical scales', () => {
     const svg = renderChartSvg(scene, { ariaLabel: 'Composite chart' })
 
     expect(nodes.some((node) => node.kind === 'area')).toBe(true)
-    expect(nodes.filter((node) => node.kind === 'dot')).toHaveLength(2)
-    expect(nodes.filter((node) => node.kind === 'dot')).toMatchObject([
+    const baseDots = nodes.filter(
+      (node) => node.kind === 'dot' && !node.key.startsWith('default-focus:'),
+    )
+    expect(baseDots).toHaveLength(2)
+    expect(baseDots).toMatchObject([
       { style: { stroke: 'black', strokeOpacity: 0.28 } },
       { style: { stroke: 'black', strokeOpacity: 0.28 } },
     ])
diff --git a/packages/charts-core/src/point-color.test.ts b/packages/charts-core/src/point-color.test.ts
index 67fe3e4..22f9ebd 100644
--- a/packages/charts-core/src/point-color.test.ts
+++ b/packages/charts-core/src/point-color.test.ts
@@ -344,6 +344,10 @@ function ruleStrokes(nodes: readonly SceneNode[]): (string | undefined)[] {
 
 function flatten(nodes: readonly SceneNode[]): SceneNode[] {
   return nodes.flatMap((node) =>
-    node.kind === 'group' ? [node, ...flatten(node.children)] : [node],
+    node.kind === 'group'
+      ? node.focus
+        ? [node]
+        : [node, ...flatten(node.children)]
+      : [node],
   )
 }
diff --git a/packages/charts-core/src/polar.test.ts b/packages/charts-core/src/polar.test.ts
index 5a1561b..9afe9fd 100644
--- a/packages/charts-core/src/polar.test.ts
+++ b/packages/charts-core/src/polar.test.ts
@@ -681,7 +681,11 @@ describe('polar marks', () => {
 
 function flatten(nodes: readonly SceneNode[]): SceneNode[] {
   return nodes.flatMap((node) =>
-    node.kind === 'group' ? [node, ...flatten(node.children)] : [node],
+    node.kind === 'group'
+      ? node.focus
+        ? [node]
+        : [node, ...flatten(node.children)]
+      : [node],
   )
 }
 
diff --git a/packages/charts-core/src/reconcile.ts b/packages/charts-core/src/reconcile.ts
index a45be06..858fa17 100644
--- a/packages/charts-core/src/reconcile.ts
+++ b/packages/charts-core/src/reconcile.ts
@@ -262,9 +262,7 @@ function indexChildren(children: readonly Element[]) {
 function identities(children: readonly Element[]) {
   const counts = new Map<string, number>()
   return children.map((child) => {
-    const explicit =
-      child.getAttribute('data-ts-key') ??
-      (child.hasAttribute('data-ts-chart-focus') ? 'chart-focus' : undefined)
+    const explicit = child.getAttribute('data-ts-key')
     if (explicit) return `key:${explicit}`
     const count = counts.get(child.localName) ?? 0
     counts.set(child.localName, count + 1)
diff --git a/packages/charts-core/src/renderer.test.ts b/packages/charts-core/src/renderer.test.ts
index 869fff8..fbf46b0 100644
--- a/packages/charts-core/src/renderer.test.ts
+++ b/packages/charts-core/src/renderer.test.ts
@@ -8,6 +8,7 @@ import type {
   ChartScene,
   ChartSurface,
   ChartSurfaceRenderOptions,
+  ChartTooltipAnchorContext,
 } from './types'
 
 interface Datum {
@@ -88,7 +89,11 @@ describe('renderer-neutral chart host', () => {
       45,
     )
     expect(onFocusChange.mock.calls.at(-1)?.[0]?.datum).toBe(data[0])
-    expect(fake.paintFocus.mock.calls.at(-1)?.[0]?.datum).toBe(data[0])
+    expect(fake.paintFocus.mock.calls.at(-1)?.[0]?.primary.datum).toBe(data[0])
+    expect(fake.paintFocus.mock.calls.at(-1)?.[0]).toMatchObject({
+      source: 'pointer',
+      pinned: false,
+    })
     expect(
       container.querySelector<HTMLElement>('.ts-chart-tooltip')?.hidden,
     ).toBe(false)
@@ -122,6 +127,10 @@ describe('renderer-neutral chart host', () => {
       new KeyboardEvent('keydown', { bubbles: true, key: 'Enter' }),
     )
     expect(onSelect.mock.calls.at(-1)?.[0]?.datum).toBe(data[1])
+    expect(fake.paintFocus.mock.calls.at(-1)?.[0]).toMatchObject({
+      source: 'keyboard',
+      pinned: true,
+    })
 
     host.destroy()
     host.destroy()
@@ -201,6 +210,78 @@ describe('renderer-neutral chart host', () => {
     host.destroy()
   })
 
+  it('resolves tooltip coordinates independently and exposes complete anchor context', () => {
+    const fake = createFakeRenderer()
+    const container = document.createElement('div')
+    let anchorContext:
+      ChartTooltipAnchorContext<Datum, number, number> | undefined
+    const host = mountChartRenderer(container, {
+      definition: defineChart(definition, {
+        maxFocusDistance: 1_000,
+        tooltip: {
+          anchor: { x: 'plot-center', y: 'plot-top' },
+          placement: 'bottom',
+          offset: 12,
+        },
+      }),
+      renderer: fake.renderer,
+      width: 480,
+      height: 260,
+      ariaLabel: 'Axis-anchored tooltip',
+    })
+
+    fake.element.dispatchEvent(
+      new MouseEvent('pointermove', {
+        bubbles: true,
+        clientX: 20,
+        clientY: 20,
+      }),
+    )
+    const tooltip = container.querySelector<HTMLElement>('.ts-chart-tooltip')
+    if (!tooltip) throw new Error('Expected chart tooltip')
+    expect(tooltip.style.left).toBe('240px')
+    expect(tooltip.style.top).toBe('12px')
+
+    host.update({
+      definition: defineChart(definition, {
+        maxFocusDistance: 1_000,
+        tooltip: {
+          anchor(points, context) {
+            anchorContext = context
+            return {
+              x: context.scales.x.map(points[0]!.xValue),
+              y: context.plot.y,
+            }
+          },
+          placement: 'bottom',
+        },
+      }),
+      renderer: fake.renderer,
+      width: 480,
+      height: 260,
+      ariaLabel: 'Callback-anchored tooltip',
+    })
+    fake.element.dispatchEvent(
+      new MouseEvent('pointermove', {
+        bubbles: true,
+        clientX: 20,
+        clientY: 20,
+      }),
+    )
+
+    expect(anchorContext).toMatchObject({
+      plot: host.getScene().chart,
+      surface: { width: 480, height: 260 },
+      focus: {
+        source: 'pointer',
+        pinned: false,
+      },
+    })
+    expect(anchorContext?.focus.primary.datum).toBe(data[0])
+    expect(anchorContext?.focus.group).toHaveLength(1)
+    host.destroy()
+  })
+
   it('orders tooltip body and anchor points without reordering focus callbacks', () => {
     const fake = createFakeRenderer()
     const container = document.createElement('div')
@@ -715,7 +796,9 @@ describe('renderer-neutral chart host', () => {
     expect(second.mount).toHaveBeenCalledOnce()
     expect(second.render).toHaveBeenCalledOnce()
     expect(second.render.mock.calls[0]?.[1].animation).toBeUndefined()
-    expect(second.paintFocus.mock.calls.at(-1)?.[0]?.datum).toBe(data[0])
+    expect(second.paintFocus.mock.calls.at(-1)?.[0]?.primary.datum).toBe(
+      data[0],
+    )
     const nextTooltip =
       container.querySelector<HTMLElement>('.ts-chart-tooltip')
     expect(nextTooltip).not.toBe(previousTooltip)
diff --git a/packages/charts-core/src/renderer.ts b/packages/charts-core/src/renderer.ts
index c17956b..85c227e 100644
--- a/packages/charts-core/src/renderer.ts
+++ b/packages/charts-core/src/renderer.ts
@@ -5,6 +5,8 @@ import { focusNearestX, focusNearestY, focusX, focusY } from './focus'
 import type {
   ChartAnimationOptions,
   ChartFocusMode,
+  ChartFocusSource,
+  ChartFocusState,
   ChartFocusStrategy,
   ChartPoint,
   ChartRendererHost,
@@ -54,6 +56,7 @@ export function mountChartRenderer<
   let options = initialOptions
   let scene!: ChartScene<TDatum, TXValue, TYValue>
   let focusedPoint: ChartPoint<TDatum, TXValue, TYValue> | null = null
+  let focusSource: ChartFocusSource = 'pointer'
   let pointerPosition: ChartTooltipPosition | null = null
   let pinnedKey: string | null = null
   let observer: ResizeObserver | undefined
@@ -126,6 +129,7 @@ export function mountChartRenderer<
     focusedPoint = nextFocusedPoint
     if (!nextFocusedPoint) pinnedKey = null
     if (previousFocusedPoint) {
+      focusSource = 'restored'
       const nextFocusedPoints = nextFocusedPoint
         ? focusPointsForPoint(nextFocusedPoint)
         : []
@@ -251,7 +255,16 @@ export function mountChartRenderer<
     point: ChartPoint<TDatum, TXValue, TYValue> | null,
     points: readonly ChartPoint<TDatum, TXValue, TYValue>[],
   ) => {
-    surface?.paintFocus(point, points)
+    surface?.paintFocus(
+      point
+        ? {
+            primary: point,
+            group: points,
+            source: focusSource,
+            pinned: pinnedKey !== null,
+          }
+        : null,
+    )
     paintTooltip(point, points)
   }
 
@@ -264,6 +277,7 @@ export function mountChartRenderer<
   }
   const handlePointerMove = (event: PointerEvent) => {
     if (pinnedKey) return
+    focusSource = 'pointer'
     updateFocus(
       pointsAtPointer(event.clientX, event.clientY),
       tooltipTracksPointer() ||
@@ -288,6 +302,7 @@ export function mountChartRenderer<
       return
     }
     const points = pointsAtPointer(event.clientX, event.clientY)
+    focusSource = 'pointer'
     const point = points[0] ?? null
     let pinChanged = false
     if (tooltipIsSticky()) {
@@ -330,6 +345,7 @@ export function mountChartRenderer<
     if (point === undefined) return
     event.preventDefault()
     pointerPosition = null
+    focusSource = 'keyboard'
     updateFocus(point ? focusPointsForPoint(point) : [])
   }
   const handleFocus = (event: FocusEvent) => {
@@ -347,6 +363,7 @@ export function mountChartRenderer<
         ? focus.navigation(scene.points)[0]
         : pointFromSceneOrder(scene.points, null, 'Home')
       pointerPosition = null
+      focusSource = 'keyboard'
       updateFocus(point ? focusPointsForPoint(point) : [])
     }
   }
@@ -553,6 +570,12 @@ export function mountChartRenderer<
       scene,
       pointerPosition,
       tooltipOptions,
+      {
+        primary: point,
+        group: tooltipPoints,
+        source: focusSource,
+        pinned,
+      },
     )
     positionTooltip()
     tooltipElement.style.removeProperty('visibility')
@@ -1483,6 +1506,12 @@ function resolveTooltipAnchor(
   scene: ChartScene,
   pointer: ChartTooltipPosition | null,
   options?: ChartTooltipOptions<any, any, any>,
+  focus: ChartFocusState = {
+    primary: point,
+    group: points,
+    source: 'programmatic',
+    pinned: false,
+  },
 ): ChartTooltipPosition {
   const fallback = { x: point.x, y: point.y }
   const anchor = options?.anchor ?? 'point'
@@ -1501,17 +1530,81 @@ function resolveTooltipAnchor(
     }
     return { x: (x1 + x2) / 2, y: (y1 + y2) / 2 }
   }
+  if (typeof anchor === 'object') {
+    return {
+      x: resolveTooltipCoordinate(
+        'x',
+        anchor.x,
+        point,
+        points,
+        scene,
+        pointer,
+        fallback.x,
+      ),
+      y: resolveTooltipCoordinate(
+        'y',
+        anchor.y,
+        point,
+        points,
+        scene,
+        pointer,
+        fallback.y,
+      ),
+    }
+  }
   const resolved = anchor(points, {
+    focus,
     pointer,
-    chart: scene.chart,
-    width: scene.width,
-    height: scene.height,
+    plot: scene.chart,
+    surface: { width: scene.width, height: scene.height },
+    scales: scene.scales,
   })
   return resolved && Number.isFinite(resolved.x) && Number.isFinite(resolved.y)
     ? resolved
     : fallback
 }
 
+function resolveTooltipCoordinate(
+  axis: 'x' | 'y',
+  source: string,
+  point: ChartPoint,
+  points: readonly ChartPoint[],
+  scene: ChartScene,
+  pointer: ChartTooltipPosition | null,
+  fallback: number,
+): number {
+  if (source === 'point') return axis === 'x' ? point.x : point.y
+  if (source === 'pointer') return pointer?.[axis] ?? fallback
+  if (source === 'value') {
+    const value = axis === 'x' ? point.xValue : point.yValue
+    const position = scene.scales[axis]?.map(value)
+    return position !== undefined && Number.isFinite(position)
+      ? position
+      : fallback
+  }
+  if (source === 'group-center') {
+    let minimum = axis === 'x' ? point.x : point.y
+    let maximum = minimum
+    for (const candidate of points) {
+      const position = axis === 'x' ? candidate.x : candidate.y
+      minimum = Math.min(minimum, position)
+      maximum = Math.max(maximum, position)
+    }
+    return (minimum + maximum) / 2
+  }
+  const plot = scene.chart
+  if (axis === 'x') {
+    if (source === 'plot-left') return plot.x
+    if (source === 'plot-center') return plot.x + plot.width / 2
+    if (source === 'plot-right') return plot.x + plot.width
+  } else {
+    if (source === 'plot-top') return plot.y
+    if (source === 'plot-center') return plot.y + plot.height / 2
+    if (source === 'plot-bottom') return plot.y + plot.height
+  }
+  return fallback
+}
+
 function placeTooltip(
   tooltip: HTMLElement,
   anchorX: number,
diff --git a/packages/charts-core/src/runtime.test.ts b/packages/charts-core/src/runtime.test.ts
index 1aeac17..ca19de0 100644
--- a/packages/charts-core/src/runtime.test.ts
+++ b/packages/charts-core/src/runtime.test.ts
@@ -315,8 +315,12 @@ describe('dynamic chart runtime', () => {
     const first = host.getScene().points[0]
     expect(container.querySelector('.ts-chart-tooltip')?.textContent).toBe('c')
     expect(
-      container.querySelector('[data-ts-chart-focus]')?.getAttribute('cx'),
-    ).toBe(String(host.getScene().points.at(-1)?.x))
+      Number(
+        container
+          .querySelector('[data-ts-focus-layer] circle[visibility="visible"]')
+          ?.getAttribute('cx'),
+      ),
+    ).toBeCloseTo(host.getScene().points.at(-1)?.x ?? Number.NaN)
 
     if (!first) throw new Error('Expected first point')
     container
@@ -518,14 +522,13 @@ describe('dynamic chart runtime', () => {
             key: 'id',
           }),
         ],
-        x: {
-          ...bandXAxes(['A'], [0, 12]).x,
-          label: 'Period',
-        },
+        x: { ...bandXAxes(['A'], [0, 12]).x, axis: { label: 'Period' } },
         y: {
           ...linearAxes([0, 1], [0, 12]).y,
-          label: 'Downloads',
-          format: (value) => `${value}k`,
+          axis: {
+            ticks: { format: (value) => `${value}k` },
+            label: 'Downloads',
+          },
         },
         focus: 'group-x',
         tooltip: {
@@ -611,8 +614,10 @@ describe('dynamic chart runtime', () => {
         x: bandXAxes(['A'], [0, 20]).x,
         y: {
           ...linearAxes([0, 1], [0, 20]).y,
-          label: 'Change',
-          format: (value) => `${value} units`,
+          axis: {
+            ticks: { format: (value) => `${value} units` },
+            label: 'Change',
+          },
         },
         tooltip: true,
       }),
@@ -635,13 +640,10 @@ describe('dynamic chart runtime', () => {
     const container = document.createElement('div')
     const definition = defineChart({
       marks: [lineY([{ x: 0, y: 4, note: 'Released' }], { x: 'x', y: 'y' })],
-      x: {
-        ...linearAxes([0, 1], [0, 4]).x,
-        label: 'Week',
-      },
+      x: { ...linearAxes([0, 1], [0, 4]).x, axis: { label: 'Week' } },
       y: {
         ...linearAxes([0, 1], [0, 4]).y,
-        format: (value) => `${value}k`,
+        axis: { ticks: { format: (value) => `${value}k` } },
       },
     })
     const host = mountChart(container, {
@@ -1253,7 +1255,7 @@ describe('dynamic chart runtime', () => {
 
     expect(measureBounds).not.toHaveBeenCalled()
     expect(query).not.toHaveBeenCalledWith('svg.ts-chart')
-    expect(query).not.toHaveBeenCalledWith('[data-ts-chart-focus]')
+    expect(query).not.toHaveBeenCalledWith('[data-ts-focus-layer]')
     expect(readStyle).toHaveBeenCalledTimes(2)
 
     host.update({ ...options, width: 640 })
@@ -1269,11 +1271,13 @@ describe('dynamic chart runtime', () => {
     const spacious = textMeasurer(1.2)
     const definition = defineChart({
       marks: [lineY([1, 2, 3])],
-      x: { ...linearAxes([0, 2], [0, 3]).x, label: 'Release' },
+      x: { ...linearAxes([0, 2], [0, 3]).x, axis: { label: 'Release' } },
       y: {
         ...linearAxes([0, 2], [0, 3]).y,
-        label: 'Downloads',
-        format: () => 'Long formatted tick',
+        axis: {
+          ticks: { format: () => 'Long formatted tick' },
+          label: 'Downloads',
+        },
       },
     })
     const container = document.createElement('div')
diff --git a/packages/charts-core/src/scene-layout.test.ts b/packages/charts-core/src/scene-layout.test.ts
index dcaf664..bdbe93f 100644
--- a/packages/charts-core/src/scene-layout.test.ts
+++ b/packages/charts-core/src/scene-layout.test.ts
@@ -29,6 +29,142 @@ const measureText: ChartTextMeasurer = (text, options) => {
 }
 
 describe('automatic scene guide layout', () => {
+  it('keeps grid candidates when tick stubs are removed', () => {
+    const scene = createChartScene(
+      defineChart({
+        marks: [lineY([1, 2, 3])],
+        x: {
+          scale: scaleLinear().domain([0, 2]),
+          grid: true,
+          axis: { ticks: { count: 3, size: 0 } },
+        },
+        y: {
+          scale: scaleLinear().domain([0, 3]),
+          grid: true,
+          axis: { ticks: { count: 4, size: 0 } },
+        },
+      }),
+      { width: 480, height: 260 },
+      { measureText },
+    )
+    const keys = flatten(scene.nodes).map((node) => node.key)
+
+    expect(keys.some((key) => key.startsWith('x-grid:'))).toBe(true)
+    expect(keys.some((key) => key.startsWith('y-grid:'))).toBe(true)
+    expect(keys.some((key) => key.startsWith('x-tick-rule:'))).toBe(false)
+    expect(keys.some((key) => key.startsWith('y-tick-rule:'))).toBe(false)
+    expect(keys.some((key) => key.startsWith('x-tick-label:'))).toBe(true)
+    expect(keys.some((key) => key.startsWith('y-tick-label:'))).toBe(true)
+  })
+
+  it('thins colliding labels independently from rotation and explicit opt-out', () => {
+    const categories = Array.from(
+      { length: 12 },
+      (_value, index) => `Long category ${index + 1}`,
+    )
+    const definition = defineChart({
+      marks: [
+        lineY(
+          categories.map((category, value) => ({ category, value })),
+          { x: 'category', y: 'value' },
+        ),
+      ],
+      x: {
+        scale: scaleBand<string>().domain(categories),
+        axis: { tickLabels: { rotate: -30 } },
+      },
+      y: { scale: scaleLinear().domain([0, categories.length]) },
+    })
+    const narrow = createChartScene(
+      definition,
+      { width: 320, height: 260 },
+      { measureText },
+    )
+    const wide = createChartScene(
+      definition,
+      { width: 1_200, height: 260 },
+      { measureText },
+    )
+    const all = createChartScene(
+      {
+        ...definition,
+        x: {
+          ...definition.x,
+          axis: { tickLabels: { rotate: -30, thin: false } },
+        },
+      },
+      { width: 320, height: 260 },
+      { measureText },
+    )
+    const labels = (scene: ReturnType<typeof createChartScene>) =>
+      flatten(scene.nodes).filter(
+        (node): node is SceneLabel =>
+          node.kind === 'label' && node.key.startsWith('x-tick-label:'),
+      )
+
+    expect(labels(narrow).length).toBeLessThan(labels(wide).length)
+    expect(labels(all)).toHaveLength(categories.length)
+    expect(labels(narrow).every((label) => label.rotate === -30)).toBe(true)
+  })
+
+  it('hard-keeps exact labels without adding tick stubs or grid lines', () => {
+    const scene = createChartScene(
+      defineChart({
+        marks: [lineY([0, 10])],
+        x: {
+          scale: scaleLinear().domain([0, 10]),
+          grid: true,
+          axis: {
+            ticks: { values: [0, 10], size: 0 },
+            tickLabels: { thin: { keep: [5] } },
+          },
+        },
+        y: { scale: scaleLinear().domain([0, 10]), axis: false },
+      }),
+      { width: 320, height: 180 },
+      { measureText },
+    )
+    const keys = flatten(scene.nodes).map((node) => node.key)
+
+    expect(keys).toContain('x-tick-label:number:5')
+    expect(keys).not.toContain('x-tick-rule:number:5')
+    expect(keys).not.toContain('x-grid:number:5')
+    expect(keys.filter((key) => key.startsWith('x-grid:'))).toHaveLength(2)
+  })
+
+  it('uses axis length for spacing-based semantic candidates', () => {
+    const definition = defineChart({
+      marks: [lineY([0, 100])],
+      x: {
+        scale: scaleLinear().domain([0, 100]),
+        axis: { ticks: { spacing: 80 } },
+      },
+      y: { scale: scaleLinear().domain([0, 100]) },
+    })
+    const narrow = createChartScene(definition, { width: 240, height: 180 })
+    const wide = createChartScene(definition, { width: 960, height: 180 })
+
+    expect(narrow.scales.x.ticks.length).toBeLessThan(
+      wide.scales.x.ticks.length,
+    )
+  })
+
+  it('rejects competing semantic tick policies', () => {
+    expect(() =>
+      createChartScene(
+        defineChart({
+          marks: [lineY([0, 10])],
+          x: {
+            scale: scaleLinear().domain([0, 10]),
+            axis: { ticks: { count: 3, spacing: 80 } },
+          },
+          y: { scale: scaleLinear().domain([0, 10]) },
+        }),
+        { width: 320, height: 180 },
+      ),
+    ).toThrow(/only one candidate policy/)
+  })
+
   it('grows with guide content and stacks titles outside tick labels', () => {
     const short = sceneWithYFormat((value) => String(value))
     const long = sceneWithYFormat(
@@ -77,13 +213,9 @@ describe('automatic scene guide layout', () => {
       ],
       x: {
         scale: scaleBand().domain(domain).padding(0.1),
-        tickRotate: -35,
-        label: 'Package',
-      },
-      y: {
-        scale: scaleLinear().domain([0, 3]),
-        label: 'Downloads',
+        axis: { tickLabels: { rotate: -35 }, label: 'Package' },
       },
+      y: { scale: scaleLinear().domain([0, 3]), axis: { label: 'Downloads' } },
     })
     const narrow = createChartScene(
       definition,
@@ -126,7 +258,9 @@ describe('automatic scene guide layout', () => {
       marks: [lineY([1, 2, 3])],
       x: {
         scale: scaleLinear().domain([0, 2]),
-        label: '← more disagree · Number of responses · more agree →',
+        axis: {
+          label: '← more disagree · Number of responses · more agree →',
+        },
       },
       y: { scale: scaleLinear().domain([0, 3]) },
     })
@@ -221,11 +355,13 @@ describe('automatic scene guide layout', () => {
   it('treats numeric margin sides as locks', () => {
     const definition = defineChart({
       marks: [lineY([1, 2, 3])],
-      x: { scale: scaleLinear().domain([0, 2]), label: 'Index' },
+      x: { scale: scaleLinear().domain([0, 2]), axis: { label: 'Index' } },
       y: {
         scale: scaleLinear().domain([0, 3]),
-        label: 'Value',
-        format: () => 'A deliberately long tick label',
+        axis: {
+          ticks: { format: () => 'A deliberately long tick label' },
+          label: 'Value',
+        },
       },
       margin: { left: 7 },
     })
@@ -344,11 +480,11 @@ describe('automatic scene guide layout', () => {
       marks: [createMark(initialize)],
       x: {
         scale: scaleLinear().domain([0, 1]),
-        label: 'Horizontal axis',
+        axis: { label: 'Horizontal axis' },
       },
       y: {
         scale: scaleLinear().domain([0, 1]),
-        label: 'Vertical axis',
+        axis: { label: 'Vertical axis' },
       },
     })
 
@@ -461,22 +597,19 @@ describe('automatic scene guide layout', () => {
   it('controls x and y guide visibility independently', () => {
     const definition = defineChart({
       marks: [lineY([1, 2, 3])],
-      x: {
-        scale: scaleLinear().domain([0, 2]),
-        label: 'Horizontal',
-      },
+      x: { scale: scaleLinear().domain([0, 2]), axis: { label: 'Horizontal' } },
       y: {
         scale: scaleLinear().domain([0, 3]),
-        label: 'Vertical',
         grid: true,
+        axis: { label: 'Vertical' },
       },
     })
     const sceneFor = (x: boolean, y: boolean) =>
       createChartScene(
         {
           ...definition,
-          x: { ...definition.x, guide: x },
-          y: { ...definition.y, guide: y },
+          x: { ...definition.x, axis: x ? definition.x.axis : false },
+          y: { ...definition.y, axis: y ? definition.y.axis : false },
         },
         { width: 480, height: 260 },
         { measureText },
@@ -504,7 +637,7 @@ describe('automatic scene guide layout', () => {
       false,
     )
     expect(flatten(neither.nodes).some((node) => node.key === 'grid')).toBe(
-      false,
+      true,
     )
   })
 })
@@ -513,14 +646,10 @@ function sceneWithYFormat(format: (value: unknown) => string) {
   return createChartScene(
     defineChart({
       marks: [lineY([1, 2, 3])],
-      x: {
-        scale: scaleLinear().domain([0, 2]),
-        label: 'Release',
-      },
+      x: { scale: scaleLinear().domain([0, 2]), axis: { label: 'Release' } },
       y: {
         scale: scaleLinear().domain([0, 3]),
-        label: 'Downloads',
-        format,
+        axis: { ticks: { format }, label: 'Downloads' },
       },
     }),
     { width: 640, height: 320 },
diff --git a/packages/charts-core/src/scene.test.ts b/packages/charts-core/src/scene.test.ts
index ddf6128..f702923 100644
--- a/packages/charts-core/src/scene.test.ts
+++ b/packages/charts-core/src/scene.test.ts
@@ -90,7 +90,9 @@ describe('native mark and channel scene', () => {
     expect(scene.points.map((point) => point.datum)).toEqual(values)
     expect(scene.points.map((point) => point.xValue)).toEqual([0, 1, 2])
     expect(
-      flatten(scene.nodes).filter((node) => node.kind === 'dot'),
+      flatten(scene.nodes).filter(
+        (node) => node.kind === 'dot' && !node.key.startsWith('default-focus:'),
+      ),
     ).toHaveLength(3)
   })
 
@@ -217,7 +219,7 @@ describe('native mark and channel scene', () => {
     expect(svg).toContain('<path')
     expect(svg).toContain('aria-label="Revenue &lt;trend&gt;"')
     expect(svg).toContain('<desc>A &amp; B</desc>')
-    expect(svg).toContain('data-ts-chart-focus')
+    expect(svg).toContain('data-ts-focus-layer="over"')
   })
 
   it('inherits shared grid presentation attributes from one group', () => {
@@ -312,7 +314,7 @@ describe('native mark and channel scene', () => {
     expect(container.innerHTML).toContain('Updated revenue')
     expect(
       container
-        .querySelector('[data-ts-chart-focus]')
+        .querySelector('[data-ts-focus-layer]')
         ?.getAttribute('visibility'),
     ).toBe('visible')
     expect(onFocusChange.mock.calls.at(-1)?.[0]?.datum).toBe(firstDatum)
diff --git a/packages/charts-core/src/scene.ts b/packages/charts-core/src/scene.ts
index d99c1b6..7b4f47f 100644
--- a/packages/charts-core/src/scene.ts
+++ b/packages/charts-core/src/scene.ts
@@ -6,6 +6,8 @@ import type {
   DynamicChartDefinition,
   InitializedMark,
   ChartAxisOptions,
+  ChartAxisPresentationOptions,
+  ChartAxisTickLabelOptions,
   ChartBounds,
   ChartBuildContext,
   CheckedChartSpec,
@@ -30,6 +32,7 @@ import type {
   StaticChartDefinition,
   ChartTheme,
   ChartTextMeasurer,
+  ChartTick,
   ChartValue,
   SceneGroup,
   SceneLabel,
@@ -170,14 +173,22 @@ function createChartSceneWithScaleResolver<
   )
   const colorChannels = collectScaleChannels(initialized, 'color')
   const colors = createColorScale(colorChannels.values, definition.color, theme)
+  if (
+    colors.kind !== 'categorical' &&
+    initialized.some((mark) => mark.seriesFromColor)
+  ) {
+    throw new TypeError(
+      'A continuous color channel cannot infer series identity; supply z explicitly',
+    )
+  }
   const legend = colors.domain.length ? definition.color?.legend : undefined
   const xChannels = collectScaleChannels(initialized, 'x')
   const yChannels = collectScaleChannels(initialized, 'y')
-  const guides =
+  const axes =
     definition.guides === false
       ? 0
-      : +(definition.x?.guide ?? definition.x != null) |
-        (+(definition.y?.guide ?? definition.y != null) << 1)
+      : +(definition.x != null && definition.x.axis !== false) |
+        (+(definition.y != null && definition.y.axis !== false) << 1)
   const resolvedLayout = resolveSceneLayout(
     definition,
     initialized,
@@ -188,13 +199,15 @@ function createChartSceneWithScaleResolver<
     yChannels,
     colors,
     legend,
-    guides,
+    axes,
     resolveScale,
     layout,
   )
-  const { margin, chart, scales, axes } = resolvedLayout
+  const { margin, chart, scales, axes: axisNodes } = resolvedLayout
   const markNodes: SceneNode[] = []
   const points: ChartPoint<TDatum, TXValue, TYValue>[] = []
+  const firstBaseMarkIndex = initialized.findIndex((mark) => !mark.focus)
+  const hasFocusMarks = initialized.some((mark) => mark.focus)
 
   initialized.forEach((mark, markIndex) => {
     const rendered = mark.render({
@@ -203,15 +216,34 @@ function createChartSceneWithScaleResolver<
       scales,
       theme,
       color: colors.map,
+      colors,
       layout,
     })
-    for (const node of rendered.nodes) markNodes.push(node)
-    for (const point of (rendered.points ?? []) as readonly ChartPoint<
-      TDatum,
-      TXValue,
-      TYValue
-    >[]) {
-      points.push(point)
+    if (mark.focus) {
+      markNodes.push({
+        kind: 'group',
+        key: `focus:${mark.id}`,
+        className: 'ts-chart__focus-layer',
+        ariaHidden: true,
+        focus: {
+          match: mark.focus.match ?? 'primary',
+          points: rendered.points ?? [],
+          placement:
+            firstBaseMarkIndex < 0 || markIndex < firstBaseMarkIndex
+              ? 'under'
+              : 'over',
+        },
+        children: rendered.nodes,
+      })
+    } else {
+      for (const node of rendered.nodes) markNodes.push(node)
+      for (const point of (rendered.points ?? []) as readonly ChartPoint<
+        TDatum,
+        TXValue,
+        TYValue
+      >[]) {
+        points.push(point)
+      }
     }
   })
   const nodes: SceneNode[] = [
@@ -223,11 +255,46 @@ function createChartSceneWithScaleResolver<
       children: markNodes,
     },
   ]
-  if (guides) {
-    nodes.unshift(createGrid(chart, scales, definition, theme, guides))
-    nodes.push(axes)
+  if (
+    definition.guides !== false &&
+    (definition.x?.grid || definition.y?.grid)
+  ) {
+    nodes.unshift(createGrid(chart, scales, definition, theme))
+  }
+  if (axes) {
+    nodes.push(axisNodes)
   }
   if (legend) nodes.push(legend.render({ colors, chart, theme, width }))
+  if (!hasFocusMarks && points.length) {
+    const focusPoints = points.map((point) => ({
+      ...point,
+      key: `default-focus:${point.key}`,
+      markId: 'default-focus',
+    }))
+    nodes.push({
+      kind: 'group',
+      key: 'default-focus',
+      className: 'ts-chart__focus-layer ts-chart__focus-layer--default',
+      ariaHidden: true,
+      focus: {
+        match: 'primary',
+        points: focusPoints,
+        placement: 'over',
+      },
+      children: focusPoints.map((point) => ({
+        kind: 'dot',
+        key: point.key,
+        x: point.x,
+        y: point.y,
+        radius: 5,
+        style: {
+          fill: 'var(--ts-chart-focus-fill, Canvas)',
+          stroke: point.color,
+          strokeWidth: 2.5,
+        },
+      })),
+    })
+  }
 
   return {
     width,
@@ -307,12 +374,12 @@ function resolveSceneLayout(
   yChannels: CollectedScaleChannels,
   colors: ResolvedColorScale,
   legend: ChartColorLegend | undefined,
-  guides: number,
+  axes: number,
   resolveScale: ChartScaleResolver,
   layout: ChartLayoutOptions,
 ): ResolvedSceneLayout {
   const locks = resolveMarginLocks(definition.margin)
-  const inset = guides ? automaticGuideInset : 0
+  const inset = axes ? automaticGuideInset : 0
   let margin = mergeMarginLocks(uniformMargin(inset), locks)
   let safeMargin = margin
 
@@ -342,12 +409,8 @@ function resolveSceneLayout(
       width: Math.max(1, width - margin.left - margin.right),
       height: Math.max(1, height - margin.top - margin.bottom),
     }
-    const xTickCount =
-      definition.x?.ticks ??
-      Math.max(2, Math.min(8, Math.floor(chart.width / 92)))
-    const yTickCount =
-      definition.y?.ticks ??
-      Math.max(2, Math.min(7, Math.floor(chart.height / 48)))
+    const xTickCount = resolveTickCount(definition.x, chart.width, 92, 8)
+    const yTickCount = resolveTickCount(definition.y, chart.height, 48, 7)
     const scales = {
       x:
         definition.x == null
@@ -378,7 +441,7 @@ function resolveSceneLayout(
       definition,
       theme,
       width,
-      guides,
+      axes,
       layout.measureText,
     )
     return {
@@ -406,6 +469,7 @@ function resolveSceneLayout(
           scales: resolved.scales,
           theme,
           color: colors.map,
+          colors,
           layout,
         })
         for (const label of labels ?? []) {
@@ -516,11 +580,10 @@ function createGrid(
   scales: ChartScene['scales'],
   definition: StaticChartDefinition,
   theme: ChartTheme,
-  guides: number,
 ): SceneGroup {
   const children: SceneNode[] = []
 
-  if (guides & 2 && (definition.y?.grid ?? true)) {
+  if (definition.y?.grid) {
     for (const tick of scales.y.ticks) {
       children.push({
         kind: 'rule',
@@ -533,7 +596,7 @@ function createGrid(
     }
   }
 
-  if (guides & 1 && (definition.x?.grid ?? false)) {
+  if (definition.x?.grid) {
     for (const tick of scales.x.ticks) {
       children.push({
         kind: 'rule',
@@ -566,100 +629,139 @@ function createAxes(
   definition: StaticChartDefinition,
   theme: ChartTheme,
   width: number,
-  guides: number,
+  axes: number,
   measureText?: ChartTextMeasurer,
 ): ResolvedAxes {
-  const showX = guides & 1
-  const showY = guides & 2
-  const children: SceneNode[] = !showX
-    ? []
-    : [
-        {
-          kind: 'rule',
-          key: 'x-axis',
-          x1: chart.x,
-          x2: chart.x + chart.width,
-          y1: chart.y + chart.height,
-          y2: chart.y + chart.height,
-          style: {
-            stroke: theme.foreground,
-            strokeOpacity: 0.28,
+  const showX = axes & 1
+  const showY = axes & 2
+  const xAxis = axisPresentation(definition.x)
+  const yAxis = axisPresentation(definition.y)
+  const children: SceneNode[] =
+    !showX || xAxis?.line === false
+      ? []
+      : [
+          {
+            kind: 'rule',
+            key: 'x-axis',
+            x1: chart.x,
+            x2: chart.x + chart.width,
+            y1: chart.y + chart.height,
+            y2: chart.y + chart.height,
+            style: {
+              stroke: theme.foreground,
+              strokeOpacity: 0.28,
+            },
           },
-        },
-      ]
-  const xTickRotate = definition.x?.tickRotate
-  const xTickAnchor =
-    (xTickRotate ?? 0) < 0 ? 'end' : (xTickRotate ?? 0) > 0 ? 'start' : 'middle'
+        ]
+  if (showY && yAxis?.line !== false) {
+    children.push({
+      kind: 'rule',
+      key: 'y-axis',
+      x1: chart.x,
+      x2: chart.x,
+      y1: chart.y,
+      y2: chart.y + chart.height,
+      style: {
+        stroke: theme.foreground,
+        strokeOpacity: 0.28,
+      },
+    })
+  }
+  const xTickLabels = tickLabelPresentation(xAxis)
+  const yTickLabels = tickLabelPresentation(yAxis)
+  const xTickRotate = xTickLabels === false ? undefined : xTickLabels.rotate
   let xTickBottom = chart.y + chart.height
   let yTickLeft = chart.x
-  const inset = guides ? automaticGuideInset : 0
+  const inset = axes ? automaticGuideInset : 0
   const margin = uniformMargin(inset)
 
   const addLabel = (label: SceneLabel) =>
     includeLabelMargin(margin, chart, label, measureText)
 
-  for (const tick of showX ? scales.x.ticks : []) {
+  const xTicks = xAxis?.ticks === false ? [] : scales.x.ticks
+  const yTicks = yAxis?.ticks === false ? [] : scales.y.ticks
+  const xTickSize = finiteMargin(
+    xAxis?.ticks === false ? 0 : (xAxis?.ticks?.size ?? 4),
+  )
+  const yTickSize = finiteMargin(
+    yAxis?.ticks === false ? 0 : (yAxis?.ticks?.size ?? 4),
+  )
+  const xTickPadding = finiteMargin(
+    xAxis?.ticks === false ? 0 : (xAxis?.ticks?.padding ?? 4),
+  )
+  const yTickPadding = finiteMargin(
+    yAxis?.ticks === false ? 0 : (yAxis?.ticks?.padding ?? 4),
+  )
+  const xLabelCandidates =
+    xTickLabels === false
+      ? []
+      : createTickLabelCandidates(
+          'x',
+          withKeptTicks(scales.x, definition.x, xTickLabels),
+          chart,
+          xTickSize,
+          xTickPadding,
+          xTickRotate,
+          width,
+          theme,
+          measureText,
+        )
+  const yLabelCandidates =
+    yTickLabels === false
+      ? []
+      : createTickLabelCandidates(
+          'y',
+          withKeptTicks(scales.y, definition.y, yTickLabels),
+          chart,
+          yTickSize,
+          yTickPadding,
+          yTickLabels.rotate,
+          width,
+          theme,
+          measureText,
+        )
+  const visibleXLabels =
+    xTickLabels === false
+      ? []
+      : thinTickLabels(xLabelCandidates, xTickLabels, scales.x.type === 'band')
+  const visibleYLabels =
+    yTickLabels === false
+      ? []
+      : thinTickLabels(yLabelCandidates, yTickLabels, false)
+
+  for (const tick of showX ? xTicks : []) {
     const key = valueKey(tick.value)
-    const label: SceneLabel = {
-      kind: 'label',
-      key: `x-tick-label:${key}`,
-      x: tick.position,
-      y: chart.y + chart.height + 17,
-      text: tick.label,
-      anchor: xTickAnchor,
-      rotate: xTickRotate,
-      fontSize: width < 360 ? 10 : 11,
-      style: {
-        fill: theme.muted,
-        fillOpacity: 0.68,
-      },
-    }
-    const bounds = addLabel(label)
-    if (definition.x?.label && definition.x.labelOffset === undefined) {
-      xTickBottom = Math.max(xTickBottom, bounds.y + bounds.height)
-    }
-    children.push(
-      {
+    if (xTickSize > 0) {
+      children.push({
         kind: 'rule',
         key: `x-tick-rule:${key}`,
         x1: tick.position,
         x2: tick.position,
         y1: chart.y + chart.height,
-        y2: chart.y + chart.height + 4,
+        y2: chart.y + chart.height + xTickSize,
         style: {
           stroke: theme.foreground,
           strokeOpacity: 0.28,
         },
-      },
-      label,
-    )
+      })
+    }
   }
 
-  for (const tick of showY ? scales.y.ticks : []) {
-    const key = valueKey(tick.value)
-    const label: SceneLabel = {
-      kind: 'label',
-      key: `y-tick-label:${key}`,
-      x: chart.x - 8,
-      y: tick.position,
-      text: tick.label,
-      anchor: 'end',
-      baseline: 'middle',
-      fontSize: width < 360 ? 10 : 11,
-      style: {
-        fill: theme.muted,
-        fillOpacity: 0.68,
-      },
-    }
-    const bounds = addLabel(label)
-    if (definition.y?.label && definition.y.labelOffset === undefined) {
-      yTickLeft = Math.min(yTickLeft, bounds.x)
+  for (const candidate of showX ? visibleXLabels : []) {
+    const bounds = addLabel(candidate.label)
+    if (axisLabelText(xAxis) && axisLabelOffset(xAxis) === 'auto') {
+      xTickBottom = Math.max(xTickBottom, bounds.y + bounds.height)
     }
-    children.push(
-      {
+    children.push(candidate.label)
+  }
+
+  for (const tick of showY ? yTicks : []) {
+    const key = valueKey(tick.value)
+    if (yTickSize > 0) {
+      children.push({
         kind: 'rule',
         key: `y-tick-rule:${key}`,
-        x1: chart.x - 4,
+        x1: chart.x - yTickSize,
         x2: chart.x,
         y1: tick.position,
         y2: tick.position,
@@ -667,23 +769,30 @@ function createAxes(
           stroke: theme.foreground,
           strokeOpacity: 0.28,
         },
-      },
-      label,
-    )
+      })
+    }
+  }
+
+  for (const candidate of showY ? visibleYLabels : []) {
+    const bounds = addLabel(candidate.label)
+    if (axisLabelText(yAxis) && axisLabelOffset(yAxis) === 'auto') {
+      yTickLeft = Math.min(yTickLeft, bounds.x)
+    }
+    children.push(candidate.label)
   }
 
-  if (showX && definition.x?.label) {
-    const hasOffset = definition.x.labelOffset !== undefined
+  const xAxisLabel = axisLabelText(xAxis)
+  if (showX && xAxisLabel) {
+    const offset = axisLabelOffset(xAxis)
+    const hasOffset = offset !== 'auto'
     const label: SceneLabel = {
       kind: 'label',
       key: 'x-label',
       x: chart.x + chart.width / 2,
       y: hasOffset
-        ? chart.y +
-          chart.height +
-          Math.max(0, finiteMargin(definition.x.labelOffset))
+        ? chart.y + chart.height + Math.max(0, finiteMargin(offset))
         : xTickBottom + 8,
-      text: definition.x.label,
+      text: xAxisLabel,
       anchor: 'middle',
       baseline: hasOffset ? 'auto' : 'hanging',
       fontSize: width < 360 ? 10 : 11,
@@ -694,13 +803,14 @@ function createAxes(
     children.push(label)
   }
 
-  if (showY && definition.y?.label) {
+  const yAxisLabel = axisLabelText(yAxis)
+  if (showY && yAxisLabel) {
     const yLabel: SceneLabel = {
       kind: 'label',
       key: 'y-label',
       x: chart.x,
       y: chart.y + chart.height / 2,
-      text: definition.y.label,
+      text: yAxisLabel,
       anchor: 'middle',
       baseline: 'middle',
       rotate: -90,
@@ -708,8 +818,9 @@ function createAxes(
       fontWeight: 600,
       style: { fill: theme.foreground, fillOpacity: 0.76 },
     }
-    if (definition.y.labelOffset !== undefined) {
-      yLabel.x = chart.x - Math.max(0, finiteMargin(definition.y.labelOffset))
+    const offset = axisLabelOffset(yAxis)
+    if (offset !== 'auto') {
+      yLabel.x = chart.x - Math.max(0, finiteMargin(offset))
     } else {
       const localBounds = measureSceneLabelBounds(
         { ...yLabel, x: 0, y: 0 },
@@ -733,6 +844,234 @@ function createAxes(
   }
 }
 
+function resolveTickCount(
+  axis: ChartAxisOptions | null | undefined,
+  length: number,
+  defaultSpacing: number,
+  maximum: number,
+): number {
+  const ticks = axis?.axis === false ? undefined : axis?.axis?.ticks
+  if (ticks === false) {
+    return Math.max(2, Math.min(maximum, Math.floor(length / defaultSpacing)))
+  }
+  const configured = ticks ?? {}
+  const policies = [
+    configured.count !== undefined,
+    configured.spacing !== undefined,
+    configured.values !== undefined,
+  ].filter(Boolean).length
+  if (policies > 1) {
+    throw new TypeError(
+      'Axis ticks accept only one candidate policy: count, spacing, or values',
+    )
+  }
+  if (configured.values) return Math.max(1, configured.values.length)
+  if (configured.count !== undefined) {
+    return Math.max(1, Math.floor(finiteMargin(configured.count)))
+  }
+  if (configured.spacing !== undefined) {
+    const spacing = Math.max(1, finiteMargin(configured.spacing))
+    return Math.max(1, Math.floor(length / spacing))
+  }
+  return Math.max(2, Math.min(maximum, Math.floor(length / defaultSpacing)))
+}
+
+function axisPresentation(
+  axis: ChartAxisOptions | null | undefined,
+): ChartAxisPresentationOptions | undefined {
+  if (!axis || axis.axis === false) return undefined
+  return axis.axis ?? {}
+}
+
+function tickLabelPresentation(
+  axis: ChartAxisPresentationOptions | undefined,
+): false | ChartAxisTickLabelOptions {
+  if (axis?.ticks === false || axis?.tickLabels === false) return false
+  return axis?.tickLabels ?? {}
+}
+
+function axisLabelText(
+  axis: ChartAxisPresentationOptions | undefined,
+): string | undefined {
+  return typeof axis?.label === 'string' ? axis.label : axis?.label?.text
+}
+
+function axisLabelOffset(
+  axis: ChartAxisPresentationOptions | undefined,
+): number | 'auto' {
+  return typeof axis?.label === 'object'
+    ? (axis.label.offset ?? 'auto')
+    : 'auto'
+}
+
+interface TickLabelCandidate {
+  value: ChartValue
+  label: SceneLabel
+  bounds: ChartBounds
+  hard: boolean
+}
+
+function withKeptTicks(
+  scale: ChartScene['scales'][string],
+  axis: ChartAxisOptions | null | undefined,
+  labels: ChartAxisTickLabelOptions,
+): readonly (ChartTick & { hard?: boolean })[] {
+  const thin = typeof labels.thin === 'object' ? labels.thin : undefined
+  const keep = thin?.keep ?? []
+  if (!keep.length) return scale.ticks
+  const formatter =
+    axis?.axis === false || axis?.axis?.ticks === false
+      ? undefined
+      : axis?.axis?.ticks?.format
+  const ticks: (ChartTick & { hard?: boolean })[] = scale.ticks.map((tick) => ({
+    ...tick,
+    hard: keep.some((value) => valueKey(value) === valueKey(tick.value)),
+  }))
+  const seen = new Set(ticks.map((tick) => valueKey(tick.value)))
+  for (const value of keep) {
+    const position = scale.map(value)
+    if (seen.has(valueKey(value)) || !Number.isFinite(position)) continue
+    ticks.push({
+      value,
+      position,
+      label: formatter?.(value) ?? formatAxisValue(value),
+      hard: true,
+    })
+  }
+  return ticks
+}
+
+function createTickLabelCandidates(
+  axis: 'x' | 'y',
+  ticks: readonly (ChartTick & { hard?: boolean })[],
+  chart: ChartBounds,
+  size: number,
+  padding: number,
+  rotate: number | undefined,
+  width: number,
+  theme: ChartTheme,
+  measureText: ChartTextMeasurer | undefined,
+): TickLabelCandidate[] {
+  const fontSize = width < 360 ? 10 : 11
+  return ticks.map((tick) => {
+    const label: SceneLabel =
+      axis === 'x'
+        ? {
+            kind: 'label',
+            key: `x-tick-label:${valueKey(tick.value)}`,
+            x: tick.position,
+            y: chart.y + chart.height + size + padding + fontSize * 0.8,
+            text: tick.label,
+            anchor:
+              (rotate ?? 0) < 0
+                ? 'end'
+                : (rotate ?? 0) > 0
+                  ? 'start'
+                  : 'middle',
+            rotate,
+            fontSize,
+            style: {
+              fill: theme.muted,
+              fillOpacity: 0.68,
+            },
+          }
+        : {
+            kind: 'label',
+            key: `y-tick-label:${valueKey(tick.value)}`,
+            x: chart.x - size - padding,
+            y: tick.position,
+            text: tick.label,
+            anchor: 'end',
+            baseline: 'middle',
+            rotate,
+            fontSize,
+            style: {
+              fill: theme.muted,
+              fillOpacity: 0.68,
+            },
+          }
+    return {
+      value: tick.value,
+      label,
+      bounds: measureSceneLabelBounds(label, measureText),
+      hard: tick.hard ?? false,
+    }
+  })
+}
+
+function thinTickLabels(
+  candidates: readonly TickLabelCandidate[],
+  options: ChartAxisTickLabelOptions,
+  categoricalX: boolean,
+): TickLabelCandidate[] {
+  if (options.thin === false || candidates.length < 2) return [...candidates]
+  const thin = typeof options.thin === 'object' ? options.thin : {}
+  const minGap = Math.max(0, finiteMargin(thin.minGap ?? 4))
+  const selected: TickLabelCandidate[] = candidates.filter(
+    (candidate) => candidate.hard,
+  )
+  const soft = candidates.filter((candidate) => !candidate.hard)
+  const prioritizeEnds = thin.priority === 'ends' || categoricalX
+
+  if (prioritizeEnds && soft.length) {
+    const first = soft[0]!
+    const last = soft.at(-1)!
+    if (!collidesWithAny(first, selected, minGap)) selected.push(first)
+    if (last !== first && !collidesWithAny(last, selected, minGap)) {
+      selected.push(last)
+    }
+  }
+
+  const ordered = distributedCandidates(
+    soft.filter((candidate) => !selected.includes(candidate)),
+  )
+  for (const candidate of ordered) {
+    if (!collidesWithAny(candidate, selected, minGap)) selected.push(candidate)
+  }
+
+  const selectedSet = new Set(selected)
+  return candidates.filter((candidate) => selectedSet.has(candidate))
+}
+
+function distributedCandidates(
+  candidates: readonly TickLabelCandidate[],
+): TickLabelCandidate[] {
+  if (candidates.length < 3) return [...candidates]
+  const result: TickLabelCandidate[] = []
+  const queue: (readonly TickLabelCandidate[])[] = [candidates]
+  while (queue.length) {
+    const range = queue.shift()!
+    if (!range.length) continue
+    const middle = Math.floor(range.length / 2)
+    result.push(range[middle]!)
+    queue.push(range.slice(0, middle), range.slice(middle + 1))
+  }
+  return result
+}
+
+function collidesWithAny(
+  candidate: TickLabelCandidate,
+  selected: readonly TickLabelCandidate[],
+  gap: number,
+): boolean {
+  return selected.some((other) =>
+    boundsCollide(candidate.bounds, other.bounds, gap),
+  )
+}
+
+function boundsCollide(left: ChartBounds, right: ChartBounds, gap: number) {
+  return !(
+    left.x + left.width + gap <= right.x ||
+    right.x + right.width + gap <= left.x ||
+    left.y + left.height + gap <= right.y ||
+    right.y + right.height + gap <= left.y
+  )
+}
+
+function formatAxisValue(value: ChartValue): string {
+  return value instanceof Date ? value.toLocaleDateString() : String(value)
+}
+
 function finiteSize(value: number): number {
   return Number.isFinite(value) ? Math.max(1, value) : 1
 }
diff --git a/packages/charts-core/src/stack-internal.ts b/packages/charts-core/src/stack-internal.ts
new file mode 100644
index 0000000..b9f3bf4
--- /dev/null
+++ b/packages/charts-core/src/stack-internal.ts
@@ -0,0 +1,129 @@
+import {
+  stack as d3Stack,
+  stackOffsetDiverging,
+  stackOffsetExpand,
+  stackOffsetSilhouette,
+  stackOffsetWiggle,
+} from 'd3-shape'
+import { valueKey } from './scales'
+import type { StackOptions, StackOrder } from './stack'
+import type { ChartKey, ChartValue } from './types'
+
+const optionStore = new WeakMap<object, Readonly<StackOptions>>()
+
+export function registerStackOptions(
+  channels: object,
+  options: Readonly<StackOptions>,
+) {
+  optionStore.set(channels, options)
+}
+
+export function stackOptions(options: object): Readonly<StackOptions> {
+  return optionStore.get(options) ?? {}
+}
+
+interface StackInput {
+  index: number
+  position: ChartValue
+  value: number
+  series: ChartKey
+}
+
+interface StackExtent {
+  start: number
+  end: number
+}
+
+export function stackExtents(
+  input: readonly StackInput[],
+  options: Readonly<StackOptions> = {},
+): Map<number, StackExtent> {
+  const positions: ChartValue[] = []
+  const positionIndex = new Map<string, number>()
+  const seriesInput: ChartKey[] = []
+  const seriesSeen = new Set<string>()
+
+  for (const row of input) {
+    const positionIdentity = valueKey(row.position)
+    if (!positionIndex.has(positionIdentity)) {
+      positionIndex.set(positionIdentity, positions.length)
+      positions.push(row.position)
+    }
+    const seriesIdentity = valueKey(row.series)
+    if (!seriesSeen.has(seriesIdentity)) {
+      seriesSeen.add(seriesIdentity)
+      seriesInput.push(row.series)
+    }
+  }
+
+  const series = orderedSeries(input, seriesInput, options.order)
+  if (options.reverse) series.reverse()
+  const rows = positions.map(
+    () => Object.create(null) as Record<string, number>,
+  )
+  const sourceIndices = new Map<string, number>()
+
+  for (const row of input) {
+    const position = positionIndex.get(valueKey(row.position))!
+    const seriesIdentity = valueKey(row.series)
+    const identity = `${position}:${seriesIdentity}`
+    if (sourceIndices.has(identity)) {
+      throw new TypeError(
+        `A stack requires at most one value for each position and series; duplicate ${String(row.position)} / ${String(row.series)}`,
+      )
+    }
+    sourceIndices.set(identity, row.index)
+    rows[position]![seriesIdentity] = row.value
+  }
+
+  const identities = series.map(valueKey)
+  const offset =
+    options.offset === 'normalize'
+      ? stackOffsetExpand
+      : options.offset === 'center'
+        ? stackOffsetSilhouette
+        : options.offset === 'wiggle'
+          ? stackOffsetWiggle
+          : stackOffsetDiverging
+  const stacked = d3Stack<Record<string, number>, string>()
+    .keys(identities)
+    .value((row, key) => row[key] ?? 0)
+    .offset(offset)(rows)
+  const output = new Map<number, StackExtent>()
+
+  stacked.forEach((seriesValues, seriesIndex) => {
+    const seriesIdentity = identities[seriesIndex]!
+    seriesValues.forEach((extent, position) => {
+      const sourceIndex = sourceIndices.get(`${position}:${seriesIdentity}`)
+      if (sourceIndex === undefined) return
+      output.set(sourceIndex, { start: extent[0], end: extent[1] })
+    })
+  })
+  return output
+}
+
+function orderedSeries(
+  rows: readonly StackInput[],
+  input: readonly ChartKey[],
+  order: StackOrder | undefined,
+): ChartKey[] {
+  if (Array.isArray(order)) {
+    const explicit = [...order]
+    const explicitKeys = new Set(explicit.map(valueKey))
+    return [
+      ...explicit,
+      ...input.filter((value) => !explicitKeys.has(valueKey(value))),
+    ]
+  }
+  if (order !== 'ascending' && order !== 'descending') return [...input]
+  const totals = new Map(input.map((value) => [valueKey(value), 0]))
+  for (const row of rows) {
+    const key = valueKey(row.series)
+    totals.set(key, (totals.get(key) ?? 0) + Math.abs(row.value))
+  }
+  return [...input].sort((left, right) => {
+    const difference =
+      (totals.get(valueKey(left)) ?? 0) - (totals.get(valueKey(right)) ?? 0)
+    return order === 'ascending' ? difference : -difference
+  })
+}
diff --git a/packages/charts-core/src/stack.ts b/packages/charts-core/src/stack.ts
new file mode 100644
index 0000000..2e99091
--- /dev/null
+++ b/packages/charts-core/src/stack.ts
@@ -0,0 +1,32 @@
+import { registerStackOptions } from './stack-internal'
+import type { ChartKey } from './types'
+
+export type StackOrder =
+  'input' | 'ascending' | 'descending' | readonly ChartKey[]
+export type StackOffset = 'diverging' | 'normalize' | 'center' | 'wiggle'
+
+export interface StackOptions {
+  order?: StackOrder
+  offset?: StackOffset
+  reverse?: boolean
+}
+
+export type StackYChannels<TChannels extends object> = TChannels
+
+export function stackY<const TChannels extends object>(
+  channels: TChannels,
+): StackYChannels<TChannels>
+export function stackY<const TChannels extends object>(
+  options: StackOptions,
+  channels: TChannels,
+): StackYChannels<TChannels>
+export function stackY<TChannels extends object>(
+  optionsOrChannels: StackOptions | TChannels,
+  channels?: TChannels,
+): StackYChannels<TChannels> {
+  const options = channels ? (optionsOrChannels as StackOptions) : {}
+  const resolvedChannels = (channels ?? optionsOrChannels) as TChannels
+  const result = { ...resolvedChannels }
+  registerStackOptions(result, options)
+  return result
+}
diff --git a/packages/charts-core/src/svg-renderer.ts b/packages/charts-core/src/svg-renderer.ts
index 5922ced..4e5a2ab 100644
--- a/packages/charts-core/src/svg-renderer.ts
+++ b/packages/charts-core/src/svg-renderer.ts
@@ -45,7 +45,7 @@ export function renderChartSvgWithHooks(
           idPrefix,
         )
 
-  return `<svg class="${escapeAttribute(className)}" width="100%" height="100%" viewBox="0 0 ${number(scene.width)} ${number(scene.height)}" role="img" aria-roledescription="chart" aria-label="${escapeAttribute(options.ariaLabel)}" tabindex="${number(options.tabIndex ?? 0)}" style="display:block;overflow:visible">${description}${definitions}${background}${scene.nodes.map((node) => renderNode(node, hooks, idPrefix)).join('')}<circle data-ts-chart-focus="" visibility="hidden" r="5" fill="var(--ts-chart-focus-fill, Canvas)" stroke-width="2.5" vector-effect="non-scaling-stroke" pointer-events="none" aria-hidden="true"/></svg>`
+  return `<svg class="${escapeAttribute(className)}" width="100%" height="100%" viewBox="0 0 ${number(scene.width)} ${number(scene.height)}" role="img" aria-roledescription="chart" aria-label="${escapeAttribute(options.ariaLabel)}" tabindex="${number(options.tabIndex ?? 0)}" style="display:block;overflow:visible">${description}${definitions}${background}${scene.nodes.map((node) => renderNode(node, hooks, idPrefix)).join('')}</svg>`
 }
 
 function renderNode(
@@ -62,7 +62,10 @@ function renderNode(
           ? ''
           : ` transform="translate(${number(node.translateX ?? 0)} ${number(node.translateY ?? 0)})"`
       const extension = hooks?.renderGroup?.(node, idPrefix)
-      return `<g${common}${transform}${extension?.attributes ?? ''}>${extension?.content ?? ''}${node.children.map((child) => renderNode(child, hooks, idPrefix)).join('')}</g>`
+      const focus = node.focus
+        ? ` data-ts-focus-layer="${node.focus.placement}" visibility="hidden"`
+        : ''
+      return `<g${common}${transform}${focus}${extension?.attributes ?? ''}>${extension?.content ?? ''}${node.children.map((child) => renderNode(child, hooks, idPrefix)).join('')}</g>`
     }
     case 'rule':
       return `<line${common} x1="${number(node.x1)}" y1="${number(node.y1)}" x2="${number(node.x2)}" y2="${number(node.y2)}"/>`
diff --git a/packages/charts-core/src/svg-surface.ts b/packages/charts-core/src/svg-surface.ts
index 2772754..843e0bc 100644
--- a/packages/charts-core/src/svg-surface.ts
+++ b/packages/charts-core/src/svg-surface.ts
@@ -1,9 +1,12 @@
 import { reconcileChartSvg } from './reconcile'
 import { renderChartSvg } from './svg'
+import { focusedNodeKeys } from './focus-layer'
 import type {
+  ChartFocusState,
   ChartPoint,
   ChartRenderer,
   ChartScene,
+  SceneGroup,
   ChartSurface,
   ChartSvgRenderer,
   ChartValue,
@@ -21,6 +24,7 @@ export function createSvgChartRenderer<
     prerender: renderSvg,
     mount(container) {
       let cancelAnimation = () => {}
+      let scene: ChartScene<TDatum, TXValue, TYValue> | undefined
       const svgElement = () => {
         const svg = container.querySelector<SVGSVGElement>('svg.ts-chart')
         if (!svg) {
@@ -36,19 +40,21 @@ export function createSvgChartRenderer<
         get element() {
           return svgElement()
         },
-        render(scene, options) {
+        render(nextScene, options) {
           cancelAnimation()
           cancelAnimation = reconcileChartSvg(
             container,
-            renderSvg(scene, options),
+            renderSvg(nextScene, options),
             options.animation,
           )
+          scene = nextScene
         },
         clientToScene(scene, clientX, clientY) {
           return clientToScene(svgElement(), scene, clientX, clientY)
         },
-        paintFocus(point) {
-          paintSvgFocus(svgElement(), point)
+        paintFocus(focus) {
+          if (!scene) return
+          paintSvgFocus(svgElement(), scene, focus)
         },
         destroy() {
           cancelAnimation()
@@ -78,15 +84,39 @@ function clientToScene(
   }
 }
 
-function paintSvgFocus(svg: SVGSVGElement, point: ChartPoint | null): void {
-  const focus = svg.querySelector<SVGCircleElement>('[data-ts-chart-focus]')
-  if (!focus) return
-  if (point) {
-    focus.setAttribute('cx', String(point.x))
-    focus.setAttribute('cy', String(point.y))
-    focus.setAttribute('stroke', point.color)
-    focus.setAttribute('visibility', 'visible')
-  } else {
-    focus.setAttribute('visibility', 'hidden')
+function paintSvgFocus(
+  svg: SVGSVGElement,
+  scene: ChartScene,
+  focus: ChartFocusState | null,
+): void {
+  const sceneLayers = collectFocusLayers(scene.nodes)
+  const elements = svg.querySelectorAll<SVGGElement>('[data-ts-focus-layer]')
+  elements.forEach((element, index) => {
+    const layer = sceneLayers[index]
+    const visible = layer ? focusedNodeKeys(layer, focus) : new Set<string>()
+    element.setAttribute(
+      'visibility',
+      focus && visible.size ? 'visible' : 'hidden',
+    )
+    element.querySelectorAll<SVGElement>('[data-ts-key]').forEach((child) => {
+      const key = child.dataset.tsKey
+      child.setAttribute(
+        'visibility',
+        key && visible.has(key) ? 'visible' : 'hidden',
+      )
+    })
+  })
+}
+
+function collectFocusLayers(nodes: ChartScene['nodes']): SceneGroup[] {
+  const layers: SceneGroup[] = []
+  for (const node of nodes) {
+    if (node.kind !== 'group') continue
+    if (node.focus) {
+      layers.push(node)
+    } else {
+      layers.push(...collectFocusLayers(node.children))
+    }
   }
+  return layers
 }
diff --git a/packages/charts-core/src/type-contract.test.ts b/packages/charts-core/src/type-contract.test.ts
index 7910bdb..279d3e0 100644
--- a/packages/charts-core/src/type-contract.test.ts
+++ b/packages/charts-core/src/type-contract.test.ts
@@ -75,16 +75,24 @@ const categoricalSpec: ChartSpec<readonly [typeof categoricalMark]> = {
   marks: [categoricalMark],
   x: {
     scale: scaleBand<string>().domain(['Alpha']),
-    format: (value) => {
-      expectTypeOf(value).toEqualTypeOf<string>()
-      return value
+    axis: {
+      ticks: {
+        format: (value) => {
+          expectTypeOf(value).toEqualTypeOf<string>()
+          return value
+        },
+      },
     },
   },
   y: {
     scale: scaleLinear().domain([0, 4]),
-    format: (value) => {
-      expectTypeOf(value).toEqualTypeOf<number>()
-      return value.toLocaleString()
+    axis: {
+      ticks: {
+        format: (value) => {
+          expectTypeOf(value).toEqualTypeOf<number>()
+          return value.toLocaleString()
+        },
+      },
     },
   },
 }
@@ -92,9 +100,13 @@ const staticDefinition = defineChart({
   marks: [categoricalMark],
   x: {
     scale: scaleBand<string>().domain(['Alpha']),
-    format: (value) => {
-      expectTypeOf(value).toEqualTypeOf<string>()
-      return value
+    axis: {
+      ticks: {
+        format: (value) => {
+          expectTypeOf(value).toEqualTypeOf<string>()
+          return value
+        },
+      },
     },
   },
   y: { scale: scaleLinear().domain([0, 4]) },
@@ -103,9 +115,13 @@ const numericDefinition = defineChart({
   marks: [numericMark],
   x: {
     scale: scaleLinear().domain([0, 4]),
-    format: (value) => {
-      expectTypeOf(value).toEqualTypeOf<number>()
-      return value.toLocaleString()
+    axis: {
+      ticks: {
+        format: (value) => {
+          expectTypeOf(value).toEqualTypeOf<number>()
+          return value.toLocaleString()
+        },
+      },
     },
   },
   y: { scale: scaleLinear().domain([0, 4]) },
@@ -114,9 +130,13 @@ const temporalDefinition = defineChart({
   marks: [temporalMark],
   x: {
     scale: scaleUtc().domain(rows.map((row) => row.date)),
-    format: (value) => {
-      expectTypeOf(value).toEqualTypeOf<Date>()
-      return value.toISOString()
+    axis: {
+      ticks: {
+        format: (value) => {
+          expectTypeOf(value).toEqualTypeOf<Date>()
+          return value.toISOString()
+        },
+      },
     },
   },
   y: { scale: scaleLinear().domain([0, 4]) },
@@ -387,8 +407,10 @@ if (false) {
           yValue: number
         }>()
         expectTypeOf(context.pointer?.x).toEqualTypeOf<number | undefined>()
-        expectTypeOf(context.chart.width).toEqualTypeOf<number>()
-        return context.pointer ?? { x: context.chart.x, y: context.chart.y }
+        expectTypeOf(context.plot.width).toEqualTypeOf<number>()
+        expectTypeOf(context.focus.primary.datum).toEqualTypeOf<Row>()
+        expectTypeOf(context.scales.x?.map).toBeFunction()
+        return context.pointer ?? { x: context.plot.x, y: context.plot.y }
       },
       placement: ['top', 'bottom-right'],
       offset: 12,
diff --git a/packages/charts-core/src/types.ts b/packages/charts-core/src/types.ts
index d922c36..2302c5e 100644
--- a/packages/charts-core/src/types.ts
+++ b/packages/charts-core/src/types.ts
@@ -151,21 +151,47 @@ export interface ChartLayoutOptions {
   measureText?: ChartTextMeasurer
 }
 
-export interface ChartAxisGuideOptions<TValue extends ChartValue = any> {
-  /** Whether to render this axis, its ticks, title, and grid lines. */
-  guide?: boolean
-  ticks?: number
+export interface ChartAxisTickOptions<TValue extends ChartValue = any> {
+  /** Preferred semantic candidate count. The scale may choose a nearby count. */
+  count?: number
+  /** Preferred pixels between semantic candidates. */
+  spacing?: number
+  /** Exact semantic candidates. */
+  values?: readonly TValue[]
+  /** Length of the visible tick stub in pixels. */
+  size?: number
+  /** Gap between the tick stub and label in pixels. */
+  padding?: number
   format?: (value: TValue) => string
-  grid?: boolean
-  label?: string
-  reverse?: boolean
-  tickRotate?: number
-  labelOffset?: number
 }
 
-export interface ChartAxisOptions<
+export interface ChartAxisTickLabelThinOptions<
   TValue extends ChartValue = any,
-> extends ChartAxisGuideOptions<TValue> {
+> {
+  minGap?: number
+  priority?: 'ends'
+  /** Values whose labels must remain visible even when they collide. */
+  keep?: readonly TValue[]
+}
+
+export interface ChartAxisTickLabelOptions<TValue extends ChartValue = any> {
+  rotate?: number
+  thin?: boolean | ChartAxisTickLabelThinOptions<TValue>
+}
+
+export interface ChartAxisLabelOptions {
+  text: string
+  offset?: number | 'auto'
+}
+
+export interface ChartAxisPresentationOptions<TValue extends ChartValue = any> {
+  line?: boolean
+  ticks?: false | ChartAxisTickOptions<TValue>
+  tickLabels?: false | ChartAxisTickLabelOptions<TValue>
+  label?: string | ChartAxisLabelOptions
+}
+
+export interface ChartAxisOptions<TValue extends ChartValue = any> {
   /**
    * A D3 scale factory infers its domain from materialized mark channels.
    * A scale instance retains its configured domain.
@@ -173,6 +199,11 @@ export interface ChartAxisOptions<
   scale: ChartScale | ChartScaleInput<TValue>
   /** Applies D3 nicening after an inferred or configured domain is resolved. */
   nice?: boolean | number
+  reverse?: boolean
+  /** Grid lines use semantic tick candidates before label thinning. */
+  grid?: boolean
+  /** Axis presentation. False keeps the scale but omits the visible axis. */
+  axis?: false | ChartAxisPresentationOptions<TValue>
 }
 
 export interface ChartColorOptions {
@@ -339,6 +370,7 @@ type ChartYOptionsForMarks<TMarks extends AnyChartMarks> =
       : never
 
 interface ChartSpecBase {
+  /** Omit all Cartesian axes and grids. */
   guides?: boolean
   color?: ChartColorOptions
   gradients?: readonly ChartLinearGradient[]
@@ -516,6 +548,7 @@ export interface MarkRenderContext {
   scales: Readonly<Record<string, ResolvedScale>>
   theme: ChartTheme
   color: (value: ChartKey | null | undefined) => string
+  colors: ResolvedColorScale
   layout: ChartLayoutOptions
 }
 
@@ -543,6 +576,9 @@ export interface InitializedMark<
 > {
   id: string
   channels: Readonly<Record<string, MaterializedChannel>>
+  /** The mark uses a discrete color channel as inferred series identity. */
+  seriesFromColor?: boolean
+  focus?: ChartFocusFilter
   layoutLabels?: (context: MarkRenderContext) => readonly SceneLabel[]
   render: (context: MarkRenderContext) => MarkScene<TDatum, TXValue, TYValue>
 }
@@ -611,6 +647,11 @@ export interface SceneGroup extends SceneNodeBase {
   translateX?: number
   translateY?: number
   clip?: ChartBounds
+  focus?: {
+    match: ChartFocusMatch
+    points: readonly ChartPoint[]
+    placement: 'under' | 'over'
+  }
 }
 
 export interface SceneRule extends SceneNodeBase {
@@ -737,10 +778,7 @@ export interface ChartSurface<
     clientX: number,
     clientY: number,
   ) => { x: number; y: number } | null
-  paintFocus: (
-    point: ChartPoint<TDatum, TXValue, TYValue> | null,
-    points: readonly ChartPoint<TDatum, TXValue, TYValue>[],
-  ) => void
+  paintFocus: (focus: ChartFocusState<TDatum, TXValue, TYValue> | null) => void
   destroy: () => void
 }
 
@@ -808,11 +846,59 @@ export interface ChartTooltipPosition {
   y: number
 }
 
-export interface ChartTooltipAnchorContext {
+export type ChartFocusSource =
+  'pointer' | 'keyboard' | 'programmatic' | 'restored'
+
+export interface ChartFocusState<
+  TDatum = unknown,
+  TXValue extends ChartValue = ChartValue,
+  TYValue extends ChartValue = ChartValue,
+> {
+  primary: ChartPoint<TDatum, TXValue, TYValue>
+  group: readonly ChartPoint<TDatum, TXValue, TYValue>[]
+  source: ChartFocusSource
+  pinned: boolean
+}
+
+export type ChartFocusMatch = 'primary' | 'group' | 'key' | 'x' | 'y' | 'series'
+
+export interface ChartFocusFilter {
+  match?: ChartFocusMatch
+}
+
+export type ChartTooltipXAnchor =
+  | 'point'
+  | 'pointer'
+  | 'value'
+  | 'group-center'
+  | 'plot-left'
+  | 'plot-center'
+  | 'plot-right'
+
+export type ChartTooltipYAnchor =
+  | 'point'
+  | 'pointer'
+  | 'value'
+  | 'group-center'
+  | 'plot-top'
+  | 'plot-center'
+  | 'plot-bottom'
+
+export interface ChartTooltipAxisAnchor {
+  x: ChartTooltipXAnchor
+  y: ChartTooltipYAnchor
+}
+
+export interface ChartTooltipAnchorContext<
+  TDatum = unknown,
+  TXValue extends ChartValue = ChartValue,
+  TYValue extends ChartValue = ChartValue,
+> {
+  focus: ChartFocusState<TDatum, TXValue, TYValue>
   pointer: ChartTooltipPosition | null
-  chart: ChartBounds
-  width: number
-  height: number
+  plot: ChartBounds
+  surface: ChartSize
+  scales: Readonly<Record<string, ResolvedScale>>
 }
 
 export type ChartTooltipAnchor<
@@ -823,9 +909,10 @@ export type ChartTooltipAnchor<
   | 'point'
   | 'pointer'
   | 'group-center'
+  | ChartTooltipAxisAnchor
   | ((
       points: readonly ChartPoint<TDatum, TXValue, TYValue>[],
-      context: ChartTooltipAnchorContext,
+      context: ChartTooltipAnchorContext<TDatum, TXValue, TYValue>,
     ) => ChartTooltipPosition | null | undefined)
 
 export type ChartTooltipSort<
diff --git a/packages/charts-fixtures/src/index.ts b/packages/charts-fixtures/src/index.ts
index aca4c04..5bc6303 100644
--- a/packages/charts-fixtures/src/index.ts
+++ b/packages/charts-fixtures/src/index.ts
@@ -50,16 +50,12 @@ export const downloadsChart = defineChart({
       stroke: 'var(--ts-chart-1, #2563eb)',
     }),
   ],
-  x: {
-    scale: scaleUtc,
-    ticks: 6,
-  },
+  x: { scale: scaleUtc, axis: { ticks: { count: 6 } } },
   y: {
     scale: scaleLinear,
     nice: 5,
-    label: 'Daily downloads',
-    ticks: 5,
     grid: true,
+    axis: { ticks: { count: 5 }, label: 'Daily downloads' },
   },
 })
 
@@ -82,16 +78,11 @@ export const downloadAreaChart = defineChart({
       stroke: 'var(--ts-chart-4, #8b5cf6)',
     }),
   ],
-  x: {
-    scale: scaleUtc,
-    nice: 7,
-    ticks: 7,
-  },
+  x: { scale: scaleUtc, nice: 7, axis: { ticks: { count: 7 } } },
   y: {
     scale: scaleLinear,
     nice: 5,
-    label: 'Daily downloads',
-    ticks: 5,
+    axis: { ticks: { count: 5 }, label: 'Daily downloads' },
   },
 })
 
@@ -118,14 +109,13 @@ export const horsepowerChart = defineChart({
   x: {
     scale: scaleLinear,
     nice: 7,
-    label: 'Power (hp)',
     grid: false,
+    axis: { label: 'Power (hp)' },
   },
   y: {
     scale: scaleLinear,
     nice: 5,
-    label: 'Cars',
-    ticks: 5,
+    axis: { ticks: { count: 5 }, label: 'Cars' },
   },
   color: {
     scale: () =>
@@ -181,14 +171,16 @@ export const createRankingChart = (input: RankingInput) =>
       x: {
         scale: scaleLinear,
         nice: xTicks,
-        label:
-          width < 420
-            ? undefined
-            : input.metric === 'economy (mpg)'
-              ? 'Fuel economy (mpg)'
-              : 'Power (hp)',
         grid: true,
-        ticks: xTicks,
+        axis: {
+          ticks: { count: xTicks },
+          label:
+            width < 420
+              ? undefined
+              : input.metric === 'economy (mpg)'
+                ? 'Fuel economy (mpg)'
+                : 'Power (hp)',
+        },
       },
       y: {
         scale: () => scaleBand<string>().paddingInner(0.24).paddingOuter(0.12),
diff --git a/packages/charts-fixtures/src/stats-parity.ts b/packages/charts-fixtures/src/stats-parity.ts
index a88ce53..4cd983a 100644
--- a/packages/charts-fixtures/src/stats-parity.ts
+++ b/packages/charts-fixtures/src/stats-parity.ts
@@ -165,21 +165,24 @@ export const createStatsHistoryChart = (input: StatsHistoryInput) =>
           ],
       x: {
         scale: xScale,
-        label: 'Date',
-        ticks: width < 520 ? 4 : 7,
+        axis: { ticks: { count: width < 520 ? 4 : 7 }, label: 'Date' },
       },
       y: {
         scale: scaleLinear,
         nice: 5,
-        label:
-          input.mode === 'share'
-            ? 'Download Share'
-            : input.mode === 'stream'
-              ? 'Downloads (stream)'
-              : 'Downloads',
-        format: input.mode === 'share' ? formatPercent : formatCompact,
-        ticks: 5,
         grid: true,
+        axis: {
+          ticks: {
+            count: 5,
+            format: input.mode === 'share' ? formatPercent : formatCompact,
+          },
+          label:
+            input.mode === 'share'
+              ? 'Download Share'
+              : input.mode === 'stream'
+                ? 'Downloads (stream)'
+                : 'Downloads',
+        },
       },
       color: {
         scale: scaleOrdinal<string, string>()
@@ -269,23 +272,27 @@ export const createStatsLatestChart = (input: StatsLatestInput) =>
       x: vertical
         ? {
             scale: categoricalScale,
-            tickRotate: width < 680 ? -28 : 0,
             grid: false,
+            axis: { tickLabels: { rotate: width < 680 ? -28 : 0 } },
           }
         : {
             scale: scaleLinear,
             nice: 7,
-            label: 'Downloads',
-            format: formatCompact,
             grid: true,
+            axis: {
+              ticks: { format: formatCompact },
+              label: 'Downloads',
+            },
           },
       y: vertical
         ? {
             scale: scaleLinear,
             nice: 7,
-            label: 'Downloads',
-            format: formatCompact,
             grid: true,
+            axis: {
+              ticks: { format: formatCompact },
+              label: 'Downloads',
+            },
           }
         : {
             scale: categoricalScale,
diff --git a/packages/octane-charts/src/CanvasChart.client.test.tsrx b/packages/octane-charts/src/CanvasChart.client.test.tsrx
index a60a768..7163bfb 100644
--- a/packages/octane-charts/src/CanvasChart.client.test.tsrx
+++ b/packages/octane-charts/src/CanvasChart.client.test.tsrx
@@ -57,9 +57,18 @@ describe('Octane Canvas adapter client', () => {
       target.innerHTML = await renderServerHydrationFixture()
       const host = target.querySelector('.ts-chart-host')
       const surface = target.querySelector('.ts-chart-canvas')
+      const focusUnderCanvas = target.querySelector(
+        '.ts-chart-canvas__focus-under',
+      )
       const sceneCanvas = target.querySelector('.ts-chart-canvas__scene')
       const focusCanvas = target.querySelector('.ts-chart-canvas__focus')
-      if (!host || !surface || !sceneCanvas || !focusCanvas) {
+      if (
+        !host ||
+        !surface ||
+        !focusUnderCanvas ||
+        !sceneCanvas ||
+        !focusCanvas
+      ) {
         throw new Error('Expected the server-rendered Canvas chart shell')
       }
 
@@ -70,6 +79,9 @@ describe('Octane Canvas adapter client', () => {
 
       expect(target.querySelector('.ts-chart-host')).toBe(host)
       expect(target.querySelector('.ts-chart-canvas')).toBe(surface)
+      expect(target.querySelector('.ts-chart-canvas__focus-under')).toBe(
+        focusUnderCanvas,
+      )
       expect(target.querySelector('.ts-chart-canvas__scene')).toBe(sceneCanvas)
       expect(target.querySelector('.ts-chart-canvas__focus')).toBe(focusCanvas)
       expect(target.querySelector('svg')).toBeNull()
@@ -116,7 +128,7 @@ describe('Octane Canvas adapter client', () => {
     }
     const context = onRender.mock.calls.at(-1)?.[0]
     expect(context?.surface.element).toBe(surface)
-    expect(target.querySelectorAll('canvas')).toHaveLength(2)
+    expect(target.querySelectorAll('canvas')).toHaveLength(3)
     expect(target.querySelector('svg')).toBeNull()
 
     vi.spyOn(surface, 'getBoundingClientRect').mockReturnValue({
diff --git a/packages/octane-charts/src/Chart.client.test.tsrx b/packages/octane-charts/src/Chart.client.test.tsrx
index e79ae8c..f61fbe5 100644
--- a/packages/octane-charts/src/Chart.client.test.tsrx
+++ b/packages/octane-charts/src/Chart.client.test.tsrx
@@ -109,7 +109,7 @@ describe('Octane Chart adapter client', () => {
 		expect(onFocusChange.mock.calls.at(-1)?.[0]?.datum).toBe(data[0]);
 		expect(
 			target
-				.querySelector('[data-ts-chart-focus]')
+				.querySelector('[data-ts-focus-layer]')
 				?.getAttribute('visibility'),
 		).toBe('visible');
 
diff --git a/packages/react-charts/src/CanvasChart.test.tsx b/packages/react-charts/src/CanvasChart.test.tsx
index 31942f2..9665cfc 100644
--- a/packages/react-charts/src/CanvasChart.test.tsx
+++ b/packages/react-charts/src/CanvasChart.test.tsx
@@ -228,7 +228,7 @@ describe('React Canvas adapter', () => {
     })
 
     expect(target.querySelector('.ts-chart-canvas')).not.toBeNull()
-    expect(target.querySelectorAll('canvas')).toHaveLength(2)
+    expect(target.querySelectorAll('canvas')).toHaveLength(3)
     expect(target.querySelector('svg')).toBeNull()
 
     await act(async () => root.unmount())
diff --git a/packages/react-charts/src/Chart.test.tsx b/packages/react-charts/src/Chart.test.tsx
index 20e1ae5..21367b4 100644
--- a/packages/react-charts/src/Chart.test.tsx
+++ b/packages/react-charts/src/Chart.test.tsx
@@ -215,7 +215,7 @@ describe('React adapter', () => {
     (aspectRatio) => {
       const html = renderToString(
         <Chart
-          definition={broadFocusDefinition}
+          definition={definition}
           width={480}
           aspectRatio={aspectRatio}
           ariaLabel="Revenue"
@@ -294,7 +294,7 @@ describe('React adapter', () => {
       const [, setFocused] = React.useState<unknown>(null)
       return (
         <Chart
-          definition={definition}
+          definition={broadFocusDefinition}
           width={480}
           height={260}
           ariaLabel="Revenue"
@@ -337,7 +337,7 @@ describe('React adapter', () => {
     expect(onFocusChange).toHaveBeenCalled()
     expect(onFocusChange.mock.calls.at(-1)?.[0]?.datum).toBe(data[0])
     expect(
-      target.querySelector('[data-ts-chart-focus]')?.getAttribute('visibility'),
+      target.querySelector('[data-ts-focus-layer]')?.getAttribute('visibility'),
     ).toBe('visible')
 
     await act(async () => root.unmount())
diff --git a/scripts/check-packed-consumers.mjs b/scripts/check-packed-consumers.mjs
index e0bd690..71711c4 100644
--- a/scripts/check-packed-consumers.mjs
+++ b/scripts/check-packed-consumers.mjs
@@ -740,7 +740,7 @@ async function verifyDeclarations() {
       marks: [lineY(rows, { x: 'category', y: 'value', key: 'id' })],
       x: {
         scale: scaleBand<string>().domain(rows.map((row) => row.category)),
-        ticks: width < 480 ? 3 : 5,
+        axis: { ticks: { count: width < 480 ? 3 : 5 } },
       },
       y: { scale: scaleLinear().domain([0, 8]) },
     }))
diff --git a/scripts/measure-bundles.mjs b/scripts/measure-bundles.mjs
index ea20362..803e9c0 100644
--- a/scripts/measure-bundles.mjs
+++ b/scripts/measure-bundles.mjs
@@ -37,33 +37,29 @@ const entries = [
   budgeted(
     'D3-scale UTC line + static SVG',
     'benchmarks/entries/charts-time-svg.ts',
-    19.5,
+    20.9,
   ),
   budgeted(
     'D3-scale histogram + static SVG',
     'benchmarks/entries/charts-histogram-svg.ts',
-    16.15,
+    17.5,
   ),
   budgeted(
     'D3-scale facets + static SVG',
     'benchmarks/entries/charts-facet-svg.ts',
-    16.85,
+    18.8,
   ),
   budgeted(
     'D3-scale arrows + static SVG',
     'benchmarks/entries/charts-arrow-svg.ts',
-    15,
+    16.35,
   ),
   budgeted(
     'D3-scale areaX + static SVG',
     'benchmarks/entries/charts-area-x-svg.ts',
-    17,
-  ),
-  budgeted(
-    'Frame + static SVG',
-    'benchmarks/entries/charts-frame-svg.ts',
-    6.55,
+    18.35,
   ),
+  budgeted('Frame + static SVG', 'benchmarks/entries/charts-frame-svg.ts', 7.9),
   budgeted(
     'Custom mark scale-value factory',
     'benchmarks/entries/charts-mark-scale-values.ts',
@@ -72,47 +68,47 @@ const entries = [
   budgeted(
     'D3-scale hexagons + static SVG',
     'benchmarks/entries/charts-hexagon-svg.ts',
-    14.9,
+    16.3,
   ),
   budgeted(
     'D3-scale link + static SVG',
     'benchmarks/entries/charts-link-svg.ts',
-    14.85,
+    16.25,
   ),
   budgeted(
     'D3-scale ticks + static SVG',
     'benchmarks/entries/charts-tick-svg.ts',
-    15.2,
+    16.6,
   ),
   budgeted(
     'D3-scale vectors + static SVG',
     'benchmarks/entries/charts-vector-svg.ts',
-    15.1,
+    16.45,
   ),
   budgeted(
     'D3 geo shape + static SVG',
     'benchmarks/entries/charts-geo-svg.ts',
-    12.4,
+    13.85,
   ),
   budgeted(
     'Polar arc + static SVG',
     'benchmarks/entries/charts-polar-arc-svg.ts',
-    10.35,
+    11.75,
   ),
   budgeted(
     'D3 pie + polar arc + static SVG',
     'benchmarks/entries/charts-polar-pie-svg.ts',
-    10.8,
+    12.2,
   ),
   budgeted(
     'Polar gauge composition + static SVG',
     'benchmarks/entries/charts-polar-gauge-svg.ts',
-    19.1,
+    20.55,
   ),
   budgeted(
     'Polar line + scatter composition + static SVG',
     'benchmarks/entries/charts-polar-line-scatter-svg.ts',
-    20.3,
+    21.7,
   ),
   locked('Representative marks', 'benchmarks/entries/charts-representative.ts'),
   measured(
@@ -152,7 +148,7 @@ const entries = [
   budgeted(
     'Stats parity surface',
     'benchmarks/entries/charts-stats-parity.ts',
-    35.45,
+    39.1,
   ),
   locked(
     'Custom-scale line scene',
@@ -165,37 +161,37 @@ const entries = [
   budgeted(
     'D3 curved line scene',
     'benchmarks/entries/charts-d3-curved-line-scene.ts',
-    16,
+    17.45,
   ),
   budgeted(
     'D3 time-scale line scene',
     'benchmarks/entries/charts-d3-time-scene.ts',
-    18.35,
+    19.8,
   ),
   budgeted(
     'Direct D3 monotone + TanStack SVG',
     'benchmarks/entries/charts-d3-curve-svg.ts',
-    17.1,
+    18.5,
   ),
   budgeted(
     'Direct D3 transforms + TanStack histogram',
     'benchmarks/entries/charts-d3-transform-histogram.ts',
-    16.15,
+    17.5,
   ),
   budgeted(
     'Direct D3 time + TanStack UTC line',
     'benchmarks/entries/charts-d3-time-svg.ts',
-    19.5,
+    20.9,
   ),
   budgeted(
     'Direct D3 quadtree + TanStack DOM host',
     'benchmarks/entries/charts-d3-quadtree-dom.ts',
-    25.9,
+    27.95,
   ),
   budgeted(
     'Direct D3 Delaunay + TanStack DOM host',
     'benchmarks/entries/charts-d3-delaunay-dom.ts',
-    31.2,
+    33.2,
   ),
   measured('D3 array numeric kernel', 'benchmarks/entries/d3-array-kernel.ts'),
   measured(
@@ -273,7 +269,7 @@ const entries = [
   budgeted(
     'React Stats parity surface',
     'benchmarks/entries/charts-react-stats-parity.tsx',
-    36.75,
+    40.4,
     { external: ['react', 'react/jsx-runtime', 'react-dom'] },
   ),
   measured('Plot renderer integration', 'benchmarks/entries/plot-renderer.ts'),