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/2] 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 43313c5124a5185a6fc62757d83dd259e88afaff Mon Sep 17 00:00:00 2001
From: Scott Rhamy <scott@rhamy.com>
Date: Mon, 12 Jan 2026 18:11:37 -0500
Subject: [PATCH 2/2] Barchart dynamic height example

---
 .../components/BarChart/dynamic-height.svelte | 56 +++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 docs/src/examples/components/BarChart/dynamic-height.svelte

diff --git a/docs/src/examples/components/BarChart/dynamic-height.svelte b/docs/src/examples/components/BarChart/dynamic-height.svelte
new file mode 100644
index 000000000..893294488
--- /dev/null
+++ b/docs/src/examples/components/BarChart/dynamic-height.svelte
@@ -0,0 +1,56 @@
+<script>
+	import { BarChart, defaultChartPadding } from 'layerchart';
+
+	let data2 = [
+		{ name: 'One', value1: 10, value2: 20 },
+		{ name: 'Two', value1: 5, value2: 20 }
+	];
+
+	let data4 = [
+		{ name: 'One', value1: 10, value2: 20 },
+		{ name: 'Two', value1: 5, value2: 20 },
+		{ name: 'Three', value1: 15, value2: 15 },
+		{ name: 'Four', value1: 10, value2: 5 }
+	];
+
+	let data6 = [
+		{ name: 'One', value1: 10, value2: 20 },
+		{ name: 'Two', value1: 5, value2: 20 },
+		{ name: 'Three', value1: 15, value2: 15 },
+		{ name: 'Four', value1: 10, value2: 5 },
+		{ name: 'Five', value1: 8, value2: 5 },
+		{ name: 'Size', value1: 3, value2: 5 }
+	];
+
+	let seriesCount = $state(2);
+	let data = $derived(seriesCount === 2 ? data2 : seriesCount === 4 ? data4 : data6);
+
+	let barHeight = 50;
+	let padding = { top: 4, bottom: 20 };
+	let bandPadding = 0.4;
+	let chartHeight = $derived(
+		(barHeight + barHeight * bandPadding) * seriesCount +
+			barHeight * bandPadding +
+			padding.top +
+			padding.bottom +
+			8
+	);
+</script>
+
+<label><input bind:group={seriesCount} type="radio" value={2} /> 2</label>
+<label><input bind:group={seriesCount} type="radio" value={4} /> 4</label>
+<label><input bind:group={seriesCount} type="radio" value={6} /> 6</label>
+
+<BarChart
+	{data}
+	{bandPadding}
+	y="name"
+	series={[
+		{ key: 'value1', color: 'hsl(100 100% 50%)' },
+		{ key: 'value2', color: 'hsl(200 100% 50%)' }
+	]}
+	orientation="horizontal"
+	seriesLayout="stackExpand"
+	padding={defaultChartPadding({ left: 20 })}
+	height={chartHeight}
+/>