From 7a34c46a85cc1f0102509c508c9384cb1b7eb6ab Mon Sep 17 00:00:00 2001
From: Scott Rhamy <scott@rhamy.com>
Date: Sat, 6 Dec 2025 17:23:52 -0500
Subject: [PATCH] Axis-padding

- used "defaultChartPadding"
- "radial-grid", "radial-rule" - fixed overlapping labels at 12 oclock
---
 .../examples/components/Axis/multiline-tick-labels.svelte | 8 ++++++--
 .../Axis/multiple-axis-same-placement-bottom.svelte       | 8 ++++++--
 .../Axis/multiple-axis-same-placement-right.svelte        | 4 ++--
 docs/src/examples/components/Axis/radial-grid.svelte      | 3 ++-
 docs/src/examples/components/Axis/radial-rule.svelte      | 3 ++-
 .../src/examples/components/Axis/remove-tick-marks.svelte | 8 ++++++--
 .../components/Axis/time-scale-auto-multiline.svelte      | 7 +++++--
 .../components/Axis/time-scale-brush-multiline.svelte     | 4 ++--
 .../components/Axis/time-scale-explicit-multiline.svelte  | 7 +++++--
 .../examples/components/Axis/time-scale-explicit.svelte   | 7 +++++--
 .../components/LineChart/axis-labels-inside.svelte        | 1 +
 11 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/docs/src/examples/components/Axis/multiline-tick-labels.svelte b/docs/src/examples/components/Axis/multiline-tick-labels.svelte
index 209f12b0d..315bcfbf5 100644
--- a/docs/src/examples/components/Axis/multiline-tick-labels.svelte
+++ b/docs/src/examples/components/Axis/multiline-tick-labels.svelte
@@ -1,12 +1,16 @@
 <script lang="ts">
-	import { Axis, Chart, Layer } from 'layerchart';
+	import { Axis, Chart, Layer, defaultChartPadding } from 'layerchart';
 	import { timeMonth, timeYear } from 'd3-time';
 	import { startOfInterval } from '@layerstack/utils';
 
 	const today = startOfInterval('day', new Date());
 </script>
 
-<Chart xDomain={[timeYear.offset(today, -2), today]} padding={24} height={48}>
+<Chart
+	xDomain={[timeYear.offset(today, -2), today]}
+	padding={{ ...defaultChartPadding(), bottom: 30 }}
+	height={48}
+>
 	<Layer>
 		<Axis
 			placement="bottom"
diff --git a/docs/src/examples/components/Axis/multiple-axis-same-placement-bottom.svelte b/docs/src/examples/components/Axis/multiple-axis-same-placement-bottom.svelte
index 87d556718..36b1a6e61 100644
--- a/docs/src/examples/components/Axis/multiple-axis-same-placement-bottom.svelte
+++ b/docs/src/examples/components/Axis/multiple-axis-same-placement-bottom.svelte
@@ -1,12 +1,16 @@
 <script lang="ts">
-	import { Axis, Chart, Layer } from 'layerchart';
+	import { Axis, Chart, Layer, defaultChartPadding } from 'layerchart';
 	import { timeMonth, timeYear } from 'd3-time';
 	import { startOfInterval } from '@layerstack/utils';
 
 	const today = startOfInterval('day', new Date());
 </script>
 
-<Chart xDomain={[timeYear.offset(today, -2), today]} padding={24} height={48}>
+<Chart
+	xDomain={[timeYear.offset(today, -2), today]}
+	padding={{ ...defaultChartPadding(), bottom: 32 }}
+	height={48}
+>
 	<Layer>
 		<Axis
 			placement="bottom"
diff --git a/docs/src/examples/components/Axis/multiple-axis-same-placement-right.svelte b/docs/src/examples/components/Axis/multiple-axis-same-placement-right.svelte
index c5b763cb4..a1c87509f 100644
--- a/docs/src/examples/components/Axis/multiple-axis-same-placement-right.svelte
+++ b/docs/src/examples/components/Axis/multiple-axis-same-placement-right.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { Axis, Chart, Layer } from 'layerchart';
+	import { Axis, Chart, Layer, defaultChartPadding } from 'layerchart';
 	import { scaleLinear } from 'd3-scale';
 	import { range } from 'd3-array';
 </script>
 
-<Chart yDomain={[0, 100]} padding={{ top: 8, bottom: 8, right: 90 }} height={300}>
+<Chart yDomain={[0, 100]} padding={{ ...defaultChartPadding(), right: 90 }} height={300}>
 	{#snippet children({ context })}
 		<Layer>
 			<Axis
diff --git a/docs/src/examples/components/Axis/radial-grid.svelte b/docs/src/examples/components/Axis/radial-grid.svelte
index 3e27579d8..5c1dd095d 100644
--- a/docs/src/examples/components/Axis/radial-grid.svelte
+++ b/docs/src/examples/components/Axis/radial-grid.svelte
@@ -4,10 +4,11 @@
 	import { timeDay } from 'd3-time';
 
 	const today = startOfInterval('day', new Date());
+	const yesterday = new Date(today.getTime() - 1);
 </script>
 
 <Chart
-	xDomain={[timeDay.offset(today, -10), today]}
+	xDomain={[timeDay.offset(today, -10), yesterday]}
 	yDomain={[0, 100]}
 	radial
 	padding={24}
diff --git a/docs/src/examples/components/Axis/radial-rule.svelte b/docs/src/examples/components/Axis/radial-rule.svelte
index 89ce1c6c9..de5560c90 100644
--- a/docs/src/examples/components/Axis/radial-rule.svelte
+++ b/docs/src/examples/components/Axis/radial-rule.svelte
@@ -4,10 +4,11 @@
 	import { timeDay } from 'd3-time';
 
 	const today = startOfInterval('day', new Date());
+	const yesterday = new Date(today.getTime() - 1);
 </script>
 
 <Chart
-	xDomain={[timeDay.offset(today, -10), today]}
+	xDomain={[timeDay.offset(today, -10), yesterday]}
 	yDomain={[0, 100]}
 	radial
 	padding={24}
diff --git a/docs/src/examples/components/Axis/remove-tick-marks.svelte b/docs/src/examples/components/Axis/remove-tick-marks.svelte
index 14fce6c8d..3e881abb3 100644
--- a/docs/src/examples/components/Axis/remove-tick-marks.svelte
+++ b/docs/src/examples/components/Axis/remove-tick-marks.svelte
@@ -1,12 +1,16 @@
 <script lang="ts">
-	import { Axis, Chart, Layer } from 'layerchart';
+	import { Axis, Chart, Layer, defaultChartPadding } from 'layerchart';
 	import { timeDay } from 'd3-time';
 	import { startOfInterval } from '@layerstack/utils';
 
 	const today = startOfInterval('day', new Date());
 </script>
 
-<Chart xDomain={[timeDay.offset(today, -10), today]} padding={24} height={48}>
+<Chart
+	xDomain={[timeDay.offset(today, -10), today]}
+	padding={{ ...defaultChartPadding(), bottom: 40 }}
+	height={48}
+>
 	<Layer>
 		<Axis placement="bottom" rule tickMarks={false} />
 	</Layer>
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 e5ad2038c..a76c3bde9 100644
--- a/docs/src/examples/components/Axis/time-scale-auto-multiline.svelte
+++ b/docs/src/examples/components/Axis/time-scale-auto-multiline.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Axis, Chart, Layer } from 'layerchart';
+	import { Axis, Chart, Layer, defaultChartPadding } from 'layerchart';
 	import {
 		timeDay,
 		timeHour,
@@ -112,7 +112,10 @@
 		<div>
 			<div class="text-sm mb-1">{example.label}</div>
 			<div class="h-[100px] p-4 border rounded-sm">
-				<Chart xDomain={example.domain} padding={{ top: 20, bottom: 20, left: 20, right: 20 }}>
+				<Chart
+					xDomain={example.domain}
+					padding={{ ...defaultChartPadding(), top: 30, bottom: 30, left: 25, right: 25 }}
+				>
 					<Layer>
 						<Axis placement="top" rule grid tickMultiline {tickSpacing} />
 						<Axis placement="bottom" rule grid tickMultiline {tickSpacing} />
diff --git a/docs/src/examples/components/Axis/time-scale-brush-multiline.svelte b/docs/src/examples/components/Axis/time-scale-brush-multiline.svelte
index b93bdd1a5..ad08693a6 100644
--- a/docs/src/examples/components/Axis/time-scale-brush-multiline.svelte
+++ b/docs/src/examples/components/Axis/time-scale-brush-multiline.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Axis, Chart, Layer, type DomainType } from 'layerchart';
+	import { Axis, Chart, Layer, defaultChartPadding, type DomainType } from 'layerchart';
 	import { timeYear } from 'd3-time';
 	import { startOfInterval } from '@layerstack/utils';
 	import AxisControls from '$lib/components/controls/AxisControls.svelte';
@@ -17,7 +17,7 @@
 <Chart
 	{xDomain}
 	yDomain={[0, 100]}
-	padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
+	padding={{ ...defaultChartPadding(), top: 30, bottom: 30, left: 25, right: 25 }}
 	brush={{
 		resetOnEnd: true,
 		onBrushEnd: (e) => {
diff --git a/docs/src/examples/components/Axis/time-scale-explicit-multiline.svelte b/docs/src/examples/components/Axis/time-scale-explicit-multiline.svelte
index a90ce6684..212ece707 100644
--- a/docs/src/examples/components/Axis/time-scale-explicit-multiline.svelte
+++ b/docs/src/examples/components/Axis/time-scale-explicit-multiline.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Axis, Chart, Layer } from 'layerchart';
+	import { Axis, Chart, Layer, defaultChartPadding } from 'layerchart';
 	import {
 		timeDay,
 		timeHour,
@@ -107,7 +107,10 @@
 		<div>
 			<div class="text-sm mb-1">{example.label}</div>
 			<div class="h-[100px] p-4 border rounded-sm">
-				<Chart xDomain={example.domain} padding={{ top: 20, bottom: 20, left: 20, right: 20 }}>
+				<Chart
+					xDomain={example.domain}
+					padding={{ ...defaultChartPadding(), top: 20, bottom: 30, left: 30, right: 30 }}
+				>
 					<Layer>
 						<Axis
 							placement="bottom"
diff --git a/docs/src/examples/components/Axis/time-scale-explicit.svelte b/docs/src/examples/components/Axis/time-scale-explicit.svelte
index 9c69fb09d..cd34aadc5 100644
--- a/docs/src/examples/components/Axis/time-scale-explicit.svelte
+++ b/docs/src/examples/components/Axis/time-scale-explicit.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Axis, Chart, Layer } from 'layerchart';
+	import { Axis, Chart, Layer, defaultChartPadding } from 'layerchart';
 	import {
 		timeDay,
 		timeHour,
@@ -107,7 +107,10 @@
 		<div>
 			<div class="text-sm mb-1">{example.label}</div>
 			<div class="h-[100px] p-4 border rounded-sm">
-				<Chart xDomain={example.domain} padding={{ top: 20, bottom: 20, left: 20, right: 20 }}>
+				<Chart
+					xDomain={example.domain}
+					padding={{ ...defaultChartPadding(), top: 20, bottom: 20, left: 30, right: 30 }}
+				>
 					<Layer>
 						<Axis placement="bottom" rule grid ticks={{ interval: example.interval }} />
 					</Layer>
diff --git a/docs/src/examples/components/LineChart/axis-labels-inside.svelte b/docs/src/examples/components/LineChart/axis-labels-inside.svelte
index 690bb538d..946841fd4 100644
--- a/docs/src/examples/components/LineChart/axis-labels-inside.svelte
+++ b/docs/src/examples/components/LineChart/axis-labels-inside.svelte
@@ -23,6 +23,7 @@
 	padding={{
 		left: 0,
 		top: 10,
+		right: 10,
 		bottom: 24
 	}}
 />