Support tickSpacing for band scales on Axis, thinning tick labels when the domain is larger than the available space. Automatically shows more tick labels when zoomed in on band scale transforms.

Author: techniq

.changeset/band-tick-spacing.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+Support `tickSpacing` for band scales on Axis, thinning tick labels when the domain is larger than the available space. Automatically shows more tick labels when zoomed in on band scale transforms.

docs/src/content/components/Axis.md

@@ -11,7 +11,7 @@ related: [Grid, Rule]
 
 ### tickSpacing
 
-If using a continuous scales (ex. linear, time) and ticks become too crowded, you can use `tickSpacing` to control the number of pixels alloted for each tick (higher => fewer ticks).
+Controls the number of pixels allotted for each tick (higher => fewer ticks). Works with both continuous scales (linear, time) and band scales. When zoomed in on a band scale, tick labels automatically adjust to show more as bands get wider.
 
 ::note
 Default: `80` for horizontal axes (top/bottom/angle) and `50` for vertical axes (left/right/radius).

packages/layerchart/src/lib/components/Axis.svelte

@@ -220,11 +220,22 @@
             : null
   );
 
+  // For band scales with domain-mode transform, scale up effective size by the zoom factor
+  // so that more tick labels appear as bands get wider when zoomed in
+  const effectiveSize = $derived.by(() => {
+    if (!ctxSize) return ctxSize;
+    const ts = ctx.transformState;
+    if (ts?.mode === 'domain' && isScaleBand(scale) && ts.scale > 1) {
+      return ctxSize * ts.scale;
+    }
+    return ctxSize;
+  });
+
   const tickCount = $derived(
     typeof ticks === 'number'
       ? ticks
-      : tickSpacing && ctxSize
-        ? Math.round(ctxSize / tickSpacing)
+      : tickSpacing && effectiveSize
+        ? Math.round(effectiveSize / tickSpacing)
         : undefined
   );
   const tickVals = $derived.by(() => {

packages/layerchart/src/lib/utils/ticks.test.ts

@@ -34,12 +34,24 @@ describe('autoTickVals', () => {
     expect(autoTickVals(scale, ticksConfig)).toEqual([]);
   });
 
-  it('filters band scale domain with number ticks', () => {
+  it('filters band scale domain with explicit number ticks', () => {
     const scale = { domain: mockDomain, bandwidth: vi.fn() } as any;
-    expect(autoTickVals(scale, 2)).toEqual(['a', 'c', 'e']);
+    // ticks=2, domain has 5 items → step = ceil(5/2) = 3 → indices 0, 3
+    expect(autoTickVals(scale, 2)).toEqual(['a', 'd']);
   });
 
-  it('returns full domain for band scale without ticks', () => {
+  it('filters band scale domain using count parameter (from tickSpacing)', () => {
+    const scale = { domain: mockDomain, bandwidth: vi.fn() } as any;
+    // count=3, domain has 5 items → step = ceil(5/3) = 2 → indices 0, 2, 4
+    expect(autoTickVals(scale, undefined, 3)).toEqual(['a', 'c', 'e']);
+  });
+
+  it('returns full domain for band scale when count >= domain length', () => {
+    const scale = { domain: mockDomain, bandwidth: vi.fn() } as any;
+    expect(autoTickVals(scale, undefined, 10)).toEqual(['a', 'b', 'c', 'd', 'e']);
+  });
+
+  it('returns full domain for band scale without ticks or count', () => {
     const scale = { domain: mockDomain, bandwidth: vi.fn() } as any;
     expect(autoTickVals(scale)).toEqual(['a', 'b', 'c', 'd', 'e']);
   });

packages/layerchart/src/lib/utils/ticks.ts

@@ -139,9 +139,13 @@ export function autoTickVals(scale: AnyScale, ticks?: TicksConfig, count?: numbe
 
   // Band (use domain)
   if (isScaleBand(scale)) {
-    return ticks && typeof ticks === 'number'
-      ? scale.domain().filter((_, i) => i % ticks === 0)
-      : scale.domain();
+    const domain = scale.domain();
+    const resolvedCount = typeof ticks === 'number' ? ticks : count;
+    if (resolvedCount != null && resolvedCount < domain.length) {
+      const step = Math.max(1, Math.ceil(domain.length / resolvedCount));
+      return domain.filter((_, i) => i % step === 0);
+    }
+    return domain;
   }
 
   // Ticks from scale