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 aeceb5f34..57a3c1c76 100644
--- a/docs/src/examples/components/LineChart/axis-labels-inside.svelte
+++ b/docs/src/examples/components/LineChart/axis-labels-inside.svelte
@@ -23,5 +23,10 @@
 			rule: true
 		}
 	}}
-	padding={{ ...defaultChartPadding(), top: 15, right: 10 }}
+	padding={{
+		left: 0,
+		top: 12,
+		right: 10,
+		bottom: 24
+	}}
 />