fix(Axis): Default tickSpacing to null for band scales, showing all ticks by default instead of thinning them. Use tickSpacing={80} to opt-in to tick thinning on band scale axes.

Author: techniq

.changeset/band-tick-spacing-default.md

@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+fix(Axis): Default `tickSpacing` to `null` for band scales, showing all ticks by default instead of thinning them. Use `tickSpacing={80}` to opt-in to tick thinning on band scale axes.

docs/src/examples/components/BarChart/pan-zoom-band.svelte

@@ -12,5 +12,8 @@
 	y="value"
 	clip
 	transform={{ mode: 'domain', axis: 'x', scaleExtent: [1, 10] }}
+	props={{
+		xAxis: { tickSpacing: 25 }
+	}}
 	height={300}
 />

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

@@ -150,11 +150,7 @@
     rule = false,
     grid = false,
     ticks,
-    tickSpacing = ['top', 'bottom', 'angle'].includes(placement)
-      ? 80
-      : ['left', 'right', 'radius'].includes(placement)
-        ? 50
-        : undefined,
+    tickSpacing: tickSpacingProp,
     tickMultiline = false,
     tickLength = 4,
     tickMarks = true,
@@ -185,6 +181,18 @@
   const scale = $derived(
     scaleProp ?? (['horizontal', 'angle'].includes(orientation) ? ctx.xScale : ctx.yScale)
   );
+
+  const tickSpacing = $derived(
+    tickSpacingProp !== undefined
+      ? tickSpacingProp
+      : isScaleBand(scale)
+        ? null
+        : ['top', 'bottom', 'angle'].includes(placement)
+          ? 80
+          : ['left', 'right', 'radius'].includes(placement)
+            ? 50
+            : undefined
+  );
   const interval = $derived(
     ['horizontal', 'angle'].includes(orientation) ? ctx.xInterval : ctx.yInterval
   );