Allow passing null to ignore tickSpacing for band scales

Author: techniq

docs/src/content/components/Axis.md

@@ -19,6 +19,8 @@ Default: `80` for horizontal axes (top/bottom/angle) and `50` for vertical axes
 
 :example{ name="linechart-tickspacing" showCode }
 
+:example{ name="barchart-tickspacing" showCode }
+
 ::tip
 See also: time scale [auto](/docs/components/Axis/time-scale-auto), [multiline](/docs/components/Axis/time-scale-auto-multiline), and [brush](/docs/components/Axis/time-scale-brush-multiline) examples
 ::

docs/src/examples/components/Axis/barchart-tickspacing.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { BarChart } from 'layerchart';
+	import { getRandomInteger } from '$lib/utils/data.js';
+	import { Switch } from 'svelte-ux';
+
+	const states = [
+		'AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'FL', 'GA',
+		'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MD',
+		'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ',
+		'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC',
+		'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 'WV', 'WI', 'WY',
+	];
+
+	const data = states.map((state) => ({ state, value: getRandomInteger(20, 100) }));
+
+	let tickSpacing = $state(true);
+
+	export { data };
+</script>
+
+<label class="flex gap-2 pb-4 screenshot-hidden">
+	<Switch bind:checked={tickSpacing} />
+	{tickSpacing ? 'Applying tickSpacing' : 'Not applying tickSpacing'}
+</label>
+
+<BarChart
+	{data}
+	x="state"
+	y="value"
+	props={{ xAxis: { tickSpacing: tickSpacing ? 80 : null } }}
+	height={300}
+/>

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

@@ -47,7 +47,7 @@
      * Width or height of each tick in pixels (enabling responsive count)
      * @default 80 (top|bottom|angle) or 50 (left|right|radius)
      */
-    tickSpacing?: number;
+    tickSpacing?: number | null;
 
     /**
      * Whether to render tick labels on multiple lines for additional context