From b4132b54ca67217f706c512c921bf70f86302e31 Mon Sep 17 00:00:00 2001
From: Scott Rhamy <scott@rhamy.com>
Date: Sun, 11 Jan 2026 09:01:17 -0500
Subject: [PATCH 1/5] fix for empty layers toggle showing small circle

---
 docs/src/routes/docs/components/[name]/+layout.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/routes/docs/components/[name]/+layout.svelte b/docs/src/routes/docs/components/[name]/+layout.svelte
index 6d4b92132..cd50a4c2b 100644
--- a/docs/src/routes/docs/components/[name]/+layout.svelte
+++ b/docs/src/routes/docs/components/[name]/+layout.svelte
@@ -94,7 +94,7 @@
 			{page.params.example?.replaceAll('-', ' ') ?? metadata.name}
 		</h1>
 		<span class="flex items-center gap-1">
-			{#if layers}
+			{#if layers?.length}
 				<ToggleGroup
 					bind:value={settings.layer}
 					variant="outline"

From edbf9d93b808c12588e06647a4a51bfeb4f7b867 Mon Sep 17 00:00:00 2001
From: Scott Rhamy <scott@rhamy.com>
Date: Wed, 14 Jan 2026 17:10:43 -0500
Subject: [PATCH 2/5] New barchart-xinterval-xinset and linechart-tickspacing

- updates to Axis.md and BarChart.md text
- updated Scatterplot domain-nice to use Switch instead of autotoggling
---
 docs/src/content/components/Axis.md           | 14 ++++++++
 docs/src/content/components/BarChart.md       |  4 +++
 .../Axis/barchart-xinterval-xinset.svelte     | 32 +++++++++++++++++++
 .../Axis/linechart-tickspacing.svelte         | 24 ++++++++++++++
 .../ScatterChart/domain-nice.svelte           | 10 +++---
 5 files changed, 80 insertions(+), 4 deletions(-)
 create mode 100644 docs/src/examples/components/Axis/barchart-xinterval-xinset.svelte
 create mode 100644 docs/src/examples/components/Axis/linechart-tickspacing.svelte

diff --git a/docs/src/content/components/Axis.md b/docs/src/content/components/Axis.md
index 427254273..d72e09837 100644
--- a/docs/src/content/components/Axis.md
+++ b/docs/src/content/components/Axis.md
@@ -9,6 +9,20 @@ related: [Grid, Rule]
 
 :example{ name="placement-bottom-left" showCode }
 
+## xAxis timescale tickSpacing
+
+When the xAxis is a time scale it can get crowded very quickly.  You can use `tickSpacing={...}` to add more space between ticks.
+
+:example{ name="linechart-tickspacing" showCode }
+
+## BarCharts
+
+When creating time-series bar charts, it can be useful to use a time scale axis instead of a bar scale axis.  This helps show gaps in data (such as on [weekends](/docs/components/BarChart/time-scale-interval)) and provides improved axis ticks.
+
+To enable this, you must define the interval (daily, hourly, etc) of your data using [d3-time interval](https://d3js.org/d3-time), such as `xInterval={timeDay}`. Since band padding is not available when not using a band scale, you can leverage `xInset={...}` to add padding between bars.
+
+:example{ name="barchart-xinterval-xinset" showCode }
+
 <!-- ## Examples
 
 ### Placement (bottom / left)
diff --git a/docs/src/content/components/BarChart.md b/docs/src/content/components/BarChart.md
index 8810bb6bc..d46086bb7 100644
--- a/docs/src/content/components/BarChart.md
+++ b/docs/src/content/components/BarChart.md
@@ -9,6 +9,10 @@ related: [Chart, Bars]
 
 :example{ name="vertical-default" showCode }
 
+:::tip
+See also: [Axis](/docs/components/Axis) for examples of using time scale axes with bar charts
+:::
+
 <!-- ## Examples
 
 ### Vertical (default)
diff --git a/docs/src/examples/components/Axis/barchart-xinterval-xinset.svelte b/docs/src/examples/components/Axis/barchart-xinterval-xinset.svelte
new file mode 100644
index 000000000..fe9ced972
--- /dev/null
+++ b/docs/src/examples/components/Axis/barchart-xinterval-xinset.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { BarChart } from 'layerchart';
+	import { timeDay } from 'd3-time';
+	import { createDateSeries } from '$lib/utils/data.js';
+	import { Switch } from 'svelte-ux';
+
+	const data = $derived(createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' }));
+	let xInterval = $state(true);
+	let xInset = $state(true);
+
+	export { data };
+</script>
+
+<div class="flex justify-between pb-4 screenshot-hidden">
+	<label class="flex gap-2">
+		<Switch bind:checked={xInterval} />
+		{xInterval ? 'Applying xInterval={timeDay}' : 'Not applying xInterval={timeDay}'}
+	</label>
+	<label class="flex gap-2">
+		<Switch bind:checked={xInset} />
+		{xInset ? 'Applying xInset' : 'Not applying xInset'}
+	</label>
+</div>
+
+<BarChart
+	{data}
+	x="date"
+	y="value"
+	props={{ xAxis: { tickSpacing: 200 }, bars: { insets: { x: xInset ? 4 : undefined } } }}
+	xInterval={xInterval ? timeDay : undefined}
+	height={300}
+/>
diff --git a/docs/src/examples/components/Axis/linechart-tickspacing.svelte b/docs/src/examples/components/Axis/linechart-tickspacing.svelte
new file mode 100644
index 000000000..43849191e
--- /dev/null
+++ b/docs/src/examples/components/Axis/linechart-tickspacing.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { LineChart } from 'layerchart';
+	import { createDateSeries } from '$lib/utils/data.js';
+	import { Switch } from 'svelte-ux';
+
+	const data = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' });
+
+	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>
+
+<LineChart
+	{data}
+	x="date"
+	y="value"
+	props={{ xAxis: { tickSpacing: tickSpacing ? 200 : undefined } }}
+	height={300}
+/>
diff --git a/docs/src/examples/components/ScatterChart/domain-nice.svelte b/docs/src/examples/components/ScatterChart/domain-nice.svelte
index c7aabcbbe..19e6479b2 100644
--- a/docs/src/examples/components/ScatterChart/domain-nice.svelte
+++ b/docs/src/examples/components/ScatterChart/domain-nice.svelte
@@ -1,16 +1,18 @@
 <script lang="ts">
 	import { ScatterChart } from 'layerchart';
 	import { getSpiral } from '$lib/utils/data.js';
+	import { Switch } from 'svelte-ux';
 
 	const data = getSpiral({ angle: 137.5, radius: 10, count: 100, width: 500, height: 500 });
 
 	let applyNice = $state(true);
-	setInterval(() => {
-		applyNice = !applyNice;
-	}, 5000);
 
 	export { data };
 </script>
 
-{applyNice ? 'Applying Nice' : 'Not applying Nice'}
+<label class="flex gap-2 screenshot-hidden">
+	<Switch bind:checked={applyNice} />
+	{applyNice ? 'Applying Nice' : 'Not applying Nice'}
+</label>
+
 <ScatterChart {data} x="x" y="y" xNice={applyNice} yNice={applyNice} padding={24} height={400} />

From 53c965350820dbb06eb123473ec479f6ccd11a8d Mon Sep 17 00:00:00 2001
From: Scott Rhamy <scott@rhamy.com>
Date: Wed, 14 Jan 2026 17:13:17 -0500
Subject: [PATCH 3/5] added needed padding

---
 docs/src/examples/components/ScatterChart/domain-nice.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/examples/components/ScatterChart/domain-nice.svelte b/docs/src/examples/components/ScatterChart/domain-nice.svelte
index 19e6479b2..1b1225d1a 100644
--- a/docs/src/examples/components/ScatterChart/domain-nice.svelte
+++ b/docs/src/examples/components/ScatterChart/domain-nice.svelte
@@ -10,7 +10,7 @@
 	export { data };
 </script>
 
-<label class="flex gap-2 screenshot-hidden">
+<label class="flex gap-2 pb-4 screenshot-hidden">
 	<Switch bind:checked={applyNice} />
 	{applyNice ? 'Applying Nice' : 'Not applying Nice'}
 </label>

From 07791f26e786b8809ad27e2dbb750c57c242aabf Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Mon, 26 Jan 2026 11:34:40 -0500
Subject: [PATCH 4/5] Add `tickSpacing` @default to jsdoc

---
 packages/layerchart/src/lib/components/Axis.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/layerchart/src/lib/components/Axis.svelte b/packages/layerchart/src/lib/components/Axis.svelte
index b46f61c5d..c10670dfb 100644
--- a/packages/layerchart/src/lib/components/Axis.svelte
+++ b/packages/layerchart/src/lib/components/Axis.svelte
@@ -45,6 +45,7 @@
 
     /**
      * Width or height of each tick in pixels (enabling responsive count)
+     * @default 80 (top|bottom|angle) or 50 (left|right|radius)
      */
     tickSpacing?: number;
 

From 5653872a8ecc32dcfbe328ade689ed5787c47275 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Mon, 26 Jan 2026 11:34:53 -0500
Subject: [PATCH 5/5] refine docs

---
 docs/src/content/components/Axis.md           | 20 ++++++++++++++-----
 .../Axis/time-scale-auto-multiline.svelte     |  5 +++--
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/docs/src/content/components/Axis.md b/docs/src/content/components/Axis.md
index d72e09837..f1798275e 100644
--- a/docs/src/content/components/Axis.md
+++ b/docs/src/content/components/Axis.md
@@ -9,17 +9,27 @@ related: [Grid, Rule]
 
 :example{ name="placement-bottom-left" showCode }
 
-## xAxis timescale tickSpacing
+## tickSpacing
 
-When the xAxis is a time scale it can get crowded very quickly.  You can use `tickSpacing={...}` to add more space between ticks.
+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).
+
+::note
+Default: `80` for horizontal axes (top/bottom/angle) and `50` for vertical axes (left/right/radius).
+::
 
 :example{ name="linechart-tickspacing" showCode }
 
-## BarCharts
+::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
+::
+
+## band scales
+
+When creating time-series bar charts, it can be useful to use a time scale axis instead of a bar scale axis. This helps show gaps in data (such as on [weekends](/docs/components/BarChart/time-scale-interval)) and provides improved axis ticks.
 
-When creating time-series bar charts, it can be useful to use a time scale axis instead of a bar scale axis.  This helps show gaps in data (such as on [weekends](/docs/components/BarChart/time-scale-interval)) and provides improved axis ticks.
+To enable this, you must define the interval (daily, hourly, etc) of your data using [d3-time interval](https://d3js.org/d3-time#timeMillisecond), such as `xInterval={timeDay}`.
 
-To enable this, you must define the interval (daily, hourly, etc) of your data using [d3-time interval](https://d3js.org/d3-time), such as `xInterval={timeDay}`. Since band padding is not available when not using a band scale, you can leverage `xInset={...}` to add padding between bars.
+Since band padding is not available when not using a band scale, you can leverage `xInset={...}` to add padding between bars.
 
 :example{ name="barchart-xinterval-xinset" showCode }
 
diff --git a/docs/src/examples/components/Axis/time-scale-auto-multiline.svelte b/docs/src/examples/components/Axis/time-scale-auto-multiline.svelte
index f87ff7101..d5c1d973f 100644
--- a/docs/src/examples/components/Axis/time-scale-auto-multiline.svelte
+++ b/docs/src/examples/components/Axis/time-scale-auto-multiline.svelte
@@ -111,10 +111,11 @@
 	{#each examples as example}
 		<div>
 			<div class="text-sm mb-1">{example.label}</div>
-			<div class="h-[100px] p-4 border rounded-sm">
+			<div class="border rounded-sm">
 				<Chart
 					xDomain={example.domain}
-					padding={defaultChartPadding({ top: 30, bottom: 30, left: 25, right: 25 })}
+					padding={defaultChartPadding({ top: 40, bottom: 40, left: 25, right: 25 })}
+					height={100}
 				>
 					<Layer>
 						<Axis placement="top" rule grid tickMultiline {tickSpacing} />