diff --git a/docs/src/examples/components/BarChart/axis-labels-inside-bars-using-labels.svelte b/docs/src/examples/components/BarChart/axis-labels-inside-bars-using-labels.svelte
index 52d2d03c0..a604bb095 100644
--- a/docs/src/examples/components/BarChart/axis-labels-inside-bars-using-labels.svelte
+++ b/docs/src/examples/components/BarChart/axis-labels-inside-bars-using-labels.svelte
@@ -9,7 +9,6 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 
diff --git a/docs/src/examples/components/BarChart/axis-labels-inside-bars.svelte b/docs/src/examples/components/BarChart/axis-labels-inside-bars.svelte
index 51a66e85d..5b4bd3b77 100644
--- a/docs/src/examples/components/BarChart/axis-labels-inside-bars.svelte
+++ b/docs/src/examples/components/BarChart/axis-labels-inside-bars.svelte
@@ -9,7 +9,6 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 
diff --git a/docs/src/examples/components/BarChart/both-axis-grid-align-between.svelte b/docs/src/examples/components/BarChart/both-axis-grid-align-between.svelte
index 7fff73cb3..8eabe31db 100644
--- a/docs/src/examples/components/BarChart/both-axis-grid-align-between.svelte
+++ b/docs/src/examples/components/BarChart/both-axis-grid-align-between.svelte
@@ -9,7 +9,6 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 
diff --git a/docs/src/examples/components/BarChart/both-axis-grid.svelte b/docs/src/examples/components/BarChart/both-axis-grid.svelte
index 4503cb3e0..f483b019e 100644
--- a/docs/src/examples/components/BarChart/both-axis-grid.svelte
+++ b/docs/src/examples/components/BarChart/both-axis-grid.svelte
@@ -9,7 +9,6 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 
diff --git a/docs/src/examples/components/BarChart/brushing.svelte b/docs/src/examples/components/BarChart/brushing.svelte
index 887b9424e..34918fbaa 100644
--- a/docs/src/examples/components/BarChart/brushing.svelte
+++ b/docs/src/examples/components/BarChart/brushing.svelte
@@ -10,7 +10,6 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 
diff --git a/docs/src/examples/components/BarChart/color-bars-class.svelte b/docs/src/examples/components/BarChart/color-bars-class.svelte
index b0664ca34..4a396b20d 100644
--- a/docs/src/examples/components/BarChart/color-bars-class.svelte
+++ b/docs/src/examples/components/BarChart/color-bars-class.svelte
@@ -9,7 +9,6 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 
diff --git a/docs/src/examples/components/BarChart/color-per-value.svelte b/docs/src/examples/components/BarChart/color-per-value.svelte
index 15451485b..1f4628f47 100644
--- a/docs/src/examples/components/BarChart/color-per-value.svelte
+++ b/docs/src/examples/components/BarChart/color-per-value.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { BarChart } from 'layerchart';
+	import { BarChart, defaultChartPadding } from 'layerchart';
 	import { longData } from '$lib/utils/data.js';
 
 	const data = longData.filter((d) => d.year === 2019);
-
 	export { data };
 </script>
 
@@ -21,5 +20,6 @@
 	props={{
 		yAxis: { format: 'metric' }
 	}}
+	padding={{ ...defaultChartPadding(), left: 24 }}
 	height={300}
 />
diff --git a/docs/src/examples/components/BarChart/color-threshold.svelte b/docs/src/examples/components/BarChart/color-threshold.svelte
index 8d6079bb3..d0c1afc32 100644
--- a/docs/src/examples/components/BarChart/color-threshold.svelte
+++ b/docs/src/examples/components/BarChart/color-threshold.svelte
@@ -4,7 +4,6 @@
 	import { scaleThreshold } from 'd3-scale';
 
 	const data = createDateSeries({ count: 10, min: -20, max: 50, value: 'integer' });
-
 	export { data };
 </script>
 
diff --git a/docs/src/examples/components/BarChart/color-using-scale.svelte b/docs/src/examples/components/BarChart/color-using-scale.svelte
index 57972a537..f52d1f03b 100644
--- a/docs/src/examples/components/BarChart/color-using-scale.svelte
+++ b/docs/src/examples/components/BarChart/color-using-scale.svelte
@@ -9,7 +9,6 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 
diff --git a/docs/src/examples/components/BarChart/custom-chart.svelte b/docs/src/examples/components/BarChart/custom-chart.svelte
index 8baaa2af3..737fa71f1 100644
--- a/docs/src/examples/components/BarChart/custom-chart.svelte
+++ b/docs/src/examples/components/BarChart/custom-chart.svelte
@@ -10,7 +10,6 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 
diff --git a/docs/src/examples/components/BarChart/custom-tooltip.svelte b/docs/src/examples/components/BarChart/custom-tooltip.svelte
index 410d0f065..f5d4a0431 100644
--- a/docs/src/examples/components/BarChart/custom-tooltip.svelte
+++ b/docs/src/examples/components/BarChart/custom-tooltip.svelte
@@ -10,7 +10,6 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 
diff --git a/docs/src/examples/components/BarChart/duration-bars-color.svelte b/docs/src/examples/components/BarChart/duration-bars-color.svelte
index 2f748fa51..e9ef1d6c1 100644
--- a/docs/src/examples/components/BarChart/duration-bars-color.svelte
+++ b/docs/src/examples/components/BarChart/duration-bars-color.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
+	import { BarChart, defaultChartPadding, Tooltip } from 'layerchart';
 	import { scaleTime } from 'd3-scale';
 	import { timeMinute, timeDay } from 'd3-time';
 	import { Duration } from 'svelte-ux';
-	import { BarChart, Tooltip } from 'layerchart';
 	import { getRandomInteger } from '$lib/utils/data.js';
 
 	const count = 10;
@@ -19,7 +19,6 @@
 			endDate
 		};
 	});
-
 	export { data };
 </script>
 
@@ -37,7 +36,7 @@
 	]}
 	grid={{ x: false, y: true, bandAlign: 'between' }}
 	orientation="horizontal"
-	padding={{ left: 36, bottom: 36 }}
+	padding={{ ...defaultChartPadding(), left: 36, right: 20 }}
 	height={300}
 >
 	{#snippet tooltip({ context })}
diff --git a/docs/src/examples/components/BarChart/duration-bars-dense-lanes.svelte b/docs/src/examples/components/BarChart/duration-bars-dense-lanes.svelte
index a6f0d4ace..ed2f05cda 100644
--- a/docs/src/examples/components/BarChart/duration-bars-dense-lanes.svelte
+++ b/docs/src/examples/components/BarChart/duration-bars-dense-lanes.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
+	import { BarChart, defaultChartPadding, Tooltip } from 'layerchart';
 	import { scaleTime } from 'd3-scale';
 	import { Duration } from 'svelte-ux';
-	import { BarChart, Tooltip } from 'layerchart';
 	import { getUsEvents } from '$lib/data.remote';
 	import { applyLanes } from 'layerchart';
 
 	const usEvents = await getUsEvents();
 	const data = applyLanes(usEvents, { start: 'startDate', end: 'endDate' });
-
 	export { data };
 </script>
 
@@ -20,7 +19,7 @@
 	grid={{ x: true, y: false, bandAlign: 'between' }}
 	rule={false}
 	orientation="horizontal"
-	padding={{ bottom: 36 }}
+	padding={{ ...defaultChartPadding(), left: 10, right: 25 }}
 	height={300}
 	props={{ tooltip: { context: { mode: 'bounds' } } }}
 >
diff --git a/docs/src/examples/components/BarChart/duration-bars-dense.svelte b/docs/src/examples/components/BarChart/duration-bars-dense.svelte
index 087c2ae32..ebafc9673 100644
--- a/docs/src/examples/components/BarChart/duration-bars-dense.svelte
+++ b/docs/src/examples/components/BarChart/duration-bars-dense.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
+	import { BarChart, defaultChartPadding, Tooltip } from 'layerchart';
 	import { scaleTime } from 'd3-scale';
 	import { Duration } from 'svelte-ux';
-	import { BarChart, Tooltip } from 'layerchart';
 	import { getUsEvents } from '$lib/data.remote';
 
 	const data = await getUsEvents();
-
 	export { data };
 </script>
 
@@ -18,7 +17,7 @@
 	grid={{ x: true, y: false, bandAlign: 'between' }}
 	rule={false}
 	orientation="horizontal"
-	padding={{ bottom: 36 }}
+	padding={{ ...defaultChartPadding(), right: 25 }}
 	height={300}
 >
 	{#snippet tooltip({ context })}
diff --git a/docs/src/examples/components/BarChart/duration-bars-lanes.svelte b/docs/src/examples/components/BarChart/duration-bars-lanes.svelte
index 737b0629f..5bf59540c 100644
--- a/docs/src/examples/components/BarChart/duration-bars-lanes.svelte
+++ b/docs/src/examples/components/BarChart/duration-bars-lanes.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
+	import { BarChart, defaultChartPadding, Tooltip } from 'layerchart';
 	import { scaleTime } from 'd3-scale';
 	import { timeMinute, timeDay } from 'd3-time';
 	import { Duration } from 'svelte-ux';
-	import { BarChart, Tooltip } from 'layerchart';
 	import { getRandomInteger } from '$lib/utils/data.js';
 	import { applyLanes } from 'layerchart';
 
@@ -22,7 +22,6 @@
 	});
 
 	const data = applyLanes(generatedData, { start: 'startDate', end: 'endDate' });
-
 	export { data };
 </script>
 
@@ -42,7 +41,7 @@
 	grid={{ x: true, y: false, bandAlign: 'between' }}
 	rule={false}
 	orientation="horizontal"
-	padding={{ left: 36, bottom: 36 }}
+	padding={{ ...defaultChartPadding(), left: 25, right: 25 }}
 	height={300}
 	props={{ tooltip: { context: { mode: 'bounds' } } }}
 >
diff --git a/docs/src/examples/components/BarChart/duration-bars.svelte b/docs/src/examples/components/BarChart/duration-bars.svelte
index 3ab126a61..b5488f1a2 100644
--- a/docs/src/examples/components/BarChart/duration-bars.svelte
+++ b/docs/src/examples/components/BarChart/duration-bars.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
+	import { BarChart, defaultChartPadding, Tooltip } from 'layerchart';
 	import { scaleTime } from 'd3-scale';
 	import { timeMinute, timeDay } from 'd3-time';
 	import { Duration } from 'svelte-ux';
-	import { BarChart, Tooltip } from 'layerchart';
 	import { getRandomInteger } from '$lib/utils/data.js';
 
 	const count = 10;
@@ -19,7 +19,6 @@
 			endDate
 		};
 	});
-
 	export { data };
 </script>
 
@@ -30,7 +29,7 @@
 	y="name"
 	grid={{ x: false, y: true, bandAlign: 'between' }}
 	orientation="horizontal"
-	padding={{ left: 36, bottom: 36 }}
+	padding={{ ...defaultChartPadding(), left: 36, right: 20 }}
 	height={300}
 >
 	{#snippet tooltip({ context })}
diff --git a/docs/src/examples/components/BarChart/duration-civilization-timeline-dense.svelte b/docs/src/examples/components/BarChart/duration-civilization-timeline-dense.svelte
index 967af9883..b4dbbc691 100644
--- a/docs/src/examples/components/BarChart/duration-civilization-timeline-dense.svelte
+++ b/docs/src/examples/components/BarChart/duration-civilization-timeline-dense.svelte
@@ -3,11 +3,11 @@
 	import { getCivilizationEvents } from '$lib/data.remote.js';
 
 	const data = await getCivilizationEvents();
-	export { data };
 
 	function formatYear(number: number): string {
 		return Math.sign(number) === -1 ? Math.abs(number) + ' BC' : number + ' AD';
 	}
+	export { data };
 </script>
 
 <BarChart
diff --git a/docs/src/examples/components/BarChart/duration-civilization-timeline.svelte b/docs/src/examples/components/BarChart/duration-civilization-timeline.svelte
index 7c3051f9a..1031dfb4e 100644
--- a/docs/src/examples/components/BarChart/duration-civilization-timeline.svelte
+++ b/docs/src/examples/components/BarChart/duration-civilization-timeline.svelte
@@ -3,11 +3,11 @@
 	import { getCivilizationEvents } from '$lib/data.remote.js';
 
 	const data = await getCivilizationEvents();
-	export { data };
 
 	function formatYear(number: number): string {
 		return Math.sign(number) === -1 ? Math.abs(number) + ' BC' : number + ' AD';
 	}
+	export { data };
 </script>
 
 <BarChart
diff --git a/docs/src/examples/components/BarChart/duration-points-color.svelte b/docs/src/examples/components/BarChart/duration-points-color.svelte
index b7715373c..6023bb8fd 100644
--- a/docs/src/examples/components/BarChart/duration-points-color.svelte
+++ b/docs/src/examples/components/BarChart/duration-points-color.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
+	import { BarChart, defaultChartPadding, Points, Rule, Tooltip } from 'layerchart';
 	import { scaleTime } from 'd3-scale';
 	import { timeMinute, timeDay } from 'd3-time';
 	import { Duration } from 'svelte-ux';
-	import { BarChart, Points, Rule, Tooltip } from 'layerchart';
 	import { getRandomInteger } from '$lib/utils/data.js';
 
 	const count = 10;
@@ -19,7 +19,6 @@
 			endDate
 		};
 	});
-
 	export { data };
 </script>
 
@@ -37,7 +36,7 @@
 	]}
 	grid={{ x: false, y: true, bandAlign: 'between' }}
 	orientation="horizontal"
-	padding={{ left: 36, bottom: 36 }}
+	padding={{ ...defaultChartPadding(), left: 36, right: 25 }}
 	props={{
 		highlight: {
 			axis: 'x',
diff --git a/docs/src/examples/components/BarChart/duration-points.svelte b/docs/src/examples/components/BarChart/duration-points.svelte
index 7b79de8b6..25d559c6c 100644
--- a/docs/src/examples/components/BarChart/duration-points.svelte
+++ b/docs/src/examples/components/BarChart/duration-points.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
+	import { BarChart, defaultChartPadding, Points, Rule, Tooltip } from 'layerchart';
 	import { scaleTime } from 'd3-scale';
 	import { timeMinute, timeDay } from 'd3-time';
 	import { Duration } from 'svelte-ux';
-	import { BarChart, Points, Rule, Tooltip } from 'layerchart';
 	import { getRandomInteger } from '$lib/utils/data.js';
 
 	const count = 10;
@@ -19,7 +19,6 @@
 			endDate
 		};
 	});
-
 	export { data };
 </script>
 
@@ -30,7 +29,7 @@
 	y="name"
 	grid={{ x: false, y: true, bandAlign: 'between' }}
 	orientation="horizontal"
-	padding={{ left: 36, bottom: 36 }}
+	padding={{ ...defaultChartPadding(), left: 36, right: 25 }}
 	props={{
 		highlight: {
 			axis: 'x',
diff --git a/docs/src/examples/components/BarChart/duration.svelte b/docs/src/examples/components/BarChart/duration.svelte
index 7c92abfde..14a963680 100644
--- a/docs/src/examples/components/BarChart/duration.svelte
+++ b/docs/src/examples/components/BarChart/duration.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { BarChart, Tooltip } from 'layerchart';
+	import { BarChart, defaultChartPadding, Tooltip } from 'layerchart';
 	import { scaleTime } from 'd3-scale';
 	import { format } from '@layerstack/utils';
 
@@ -50,7 +50,6 @@
 			end: new Date('2021-12-31')
 		}
 	];
-
 	export { data };
 </script>
 
@@ -79,6 +78,7 @@
 			context: { mode: 'bounds' }
 		}
 	}}
+	padding={{ ...defaultChartPadding(), left: 30 }}
 	height={400}
 >
 	{#snippet tooltip({ context })}
diff --git a/docs/src/examples/components/BarChart/gradient.svelte b/docs/src/examples/components/BarChart/gradient.svelte
index 346d0f0ef..a773a94d8 100644
--- a/docs/src/examples/components/BarChart/gradient.svelte
+++ b/docs/src/examples/components/BarChart/gradient.svelte
@@ -9,7 +9,6 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 
diff --git a/docs/src/examples/components/BarChart/group-series-bar-click.svelte b/docs/src/examples/components/BarChart/group-series-bar-click.svelte
index bef4a0bd8..4ef671879 100644
--- a/docs/src/examples/components/BarChart/group-series-bar-click.svelte
+++ b/docs/src/examples/components/BarChart/group-series-bar-click.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { BarChart } from 'layerchart';
+	import { BarChart, defaultChartPadding } from 'layerchart';
 	import { wideData } from '$lib/utils/data.js';
 
 	const data = wideData;
-
 	export { data };
 </script>
 
@@ -26,6 +25,7 @@
 		}
 	]}
 	seriesLayout="group"
+	padding={{ ...defaultChartPadding(), left: 24 }}
 	props={{
 		xAxis: { format: 'none' },
 		yAxis: { format: 'metric' },
diff --git a/docs/src/examples/components/BarChart/group-series-horizontal.svelte b/docs/src/examples/components/BarChart/group-series-horizontal.svelte
index d622d2584..35506801d 100644
--- a/docs/src/examples/components/BarChart/group-series-horizontal.svelte
+++ b/docs/src/examples/components/BarChart/group-series-horizontal.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { BarChart } from 'layerchart';
+	import { BarChart, defaultChartPadding } from 'layerchart';
 	import { wideData } from '$lib/utils/data.js';
 
 	const data = wideData;
-
 	export { data };
 </script>
 
@@ -34,5 +33,6 @@
 			header: { format: 'none' }
 		}
 	}}
+	padding={{ ...defaultChartPadding(), left: 24 }}
 	height={500}
 />
diff --git a/docs/src/examples/components/BarChart/group-series-labels.svelte b/docs/src/examples/components/BarChart/group-series-labels.svelte
index 625516a97..e60d47cca 100644
--- a/docs/src/examples/components/BarChart/group-series-labels.svelte
+++ b/docs/src/examples/components/BarChart/group-series-labels.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { accessor, BarChart, Text } from 'layerchart';
+	import { BarChart, defaultChartPadding, accessor, Text } from 'layerchart';
 	import { wideData } from '$lib/utils/data.js';
 
 	const data = wideData;
-
 	export { data };
 </script>
 
@@ -34,6 +33,7 @@
 			header: { format: 'none' }
 		}
 	}}
+	padding={{ ...defaultChartPadding(), left: 24 }}
 	height={300}
 >
 	<!-- Workaround until x1Scale is directly handled by Points/Labels: https://github.com/techniq/layerchart/issues/473#issuecomment-3266370636 -->
diff --git a/docs/src/examples/components/BarChart/group-series-series-long-data.svelte b/docs/src/examples/components/BarChart/group-series-series-long-data.svelte
index 0470631ca..eab51f218 100644
--- a/docs/src/examples/components/BarChart/group-series-series-long-data.svelte
+++ b/docs/src/examples/components/BarChart/group-series-series-long-data.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
-	import { BarChart } from 'layerchart';
+	import { BarChart, defaultChartPadding } from 'layerchart';
 	import { longData } from '$lib/utils/data.js';
 	import { group } from 'd3-array';
 
 	const dataByFruit = group(longData, (d) => d.fruit);
 	const data = dataByFruit;
-
 	export { data };
 </script>
 
@@ -38,5 +37,6 @@
 			header: { format: 'none' }
 		}
 	}}
+	padding={{ ...defaultChartPadding(), left: 24 }}
 	height={300}
 />
diff --git a/docs/src/examples/components/BarChart/group-series.svelte b/docs/src/examples/components/BarChart/group-series.svelte
index 866ba5a05..52a3950ce 100644
--- a/docs/src/examples/components/BarChart/group-series.svelte
+++ b/docs/src/examples/components/BarChart/group-series.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { BarChart } from 'layerchart';
+	import { BarChart, defaultChartPadding } from 'layerchart';
 	import { wideData } from '$lib/utils/data.js';
 
 	const data = wideData;
-
 	export { data };
 </script>
 
@@ -26,6 +25,7 @@
 		}
 	]}
 	seriesLayout="group"
+	padding={{ ...defaultChartPadding(), left: 24 }}
 	props={{
 		xAxis: { format: 'none' },
 		yAxis: { format: 'metric' },
diff --git a/docs/src/examples/components/BarChart/highlight-below-marks.svelte b/docs/src/examples/components/BarChart/highlight-below-marks.svelte
index caeed4a7e..946e3baf2 100644
--- a/docs/src/examples/components/BarChart/highlight-below-marks.svelte
+++ b/docs/src/examples/components/BarChart/highlight-below-marks.svelte
@@ -9,7 +9,6 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 
diff --git a/docs/src/examples/components/BarChart/histogram-date-time-count.svelte b/docs/src/examples/components/BarChart/histogram-date-time-count.svelte
index c4915020f..d965e43e0 100644
--- a/docs/src/examples/components/BarChart/histogram-date-time-count.svelte
+++ b/docs/src/examples/components/BarChart/histogram-date-time-count.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
+	import { BarChart, defaultChartPadding, Tooltip, thresholdTime } from 'layerchart';
 	import { bin } from 'd3-array';
 	import { randomNormal } from 'd3-random';
 	import { timeDay } from 'd3-time';
-	import { BarChart, Tooltip, thresholdTime } from 'layerchart';
 	import { format } from '@layerstack/utils';
 	import BarChartControls from '$lib/components/controls/BarChartControls.svelte';
 
@@ -27,7 +27,6 @@
 
 	let binByTime = $derived(bin().thresholds(thresholdTime(thresholds ?? 0)));
 	let data = $derived(binByTime(randomData));
-
 	export { data };
 </script>
 
@@ -43,6 +42,7 @@
 		yAxis: { format: 'metric', motion: 'tween' },
 		bars: { motion: 'tween' }
 	}}
+	padding={{ ...defaultChartPadding(), left: 30 }}
 	height={300}
 >
 	{#snippet tooltip()}
diff --git a/docs/src/examples/components/BarChart/histogram-date-time-interval.svelte b/docs/src/examples/components/BarChart/histogram-date-time-interval.svelte
index 2df8fc1c8..1ef9eef96 100644
--- a/docs/src/examples/components/BarChart/histogram-date-time-interval.svelte
+++ b/docs/src/examples/components/BarChart/histogram-date-time-interval.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
+	import { BarChart, defaultChartPadding, Tooltip } from 'layerchart';
 	import { bin } from 'd3-array';
 	import { scaleTime } from 'd3-scale';
 	import { timeDay, timeWeek } from 'd3-time';
-	import { BarChart, Tooltip } from 'layerchart';
 	import { format } from '@layerstack/utils';
 	import BarChartControls from '$lib/components/controls/BarChartControls.svelte';
 	import { randomNormal } from 'd3-random';
@@ -33,7 +33,6 @@
 		)
 	);
 	let data = $derived(binByTime(randomData));
-
 	export { data };
 </script>
 
@@ -44,7 +43,7 @@
 	x="x0"
 	y="length"
 	bandPadding={0.2}
-	padding={{ left: 16, bottom: 48 }}
+	padding={{ ...defaultChartPadding(), left: 30, bottom: 30 }}
 	props={{
 		xAxis: {
 			ticks: (scale) => scaleTime(scale.domain(), scale.range()).ticks(),
diff --git a/docs/src/examples/components/BarChart/histogram-horizontal.svelte b/docs/src/examples/components/BarChart/histogram-horizontal.svelte
index ab57d62a8..5444f2cd0 100644
--- a/docs/src/examples/components/BarChart/histogram-horizontal.svelte
+++ b/docs/src/examples/components/BarChart/histogram-horizontal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
+	import { BarChart, defaultChartPadding, Tooltip } from 'layerchart';
 	import { bin } from 'd3-array';
-	import { BarChart, Tooltip } from 'layerchart';
 	import { getOlympians } from '$lib/data.remote';
 	import BarChartControls from '$lib/components/controls/BarChartControls.svelte';
 
@@ -25,6 +25,7 @@
 	y="x0"
 	bandPadding={0.2}
 	height={16 + 24 + data.length * 20}
+	padding={{ ...defaultChartPadding(), right: 20 }}
 	props={{
 		xAxis: { motion: 'tween' },
 		yAxis: { motion: 'tween' },
diff --git a/docs/src/examples/components/BarChart/histogram-random-distribution.svelte b/docs/src/examples/components/BarChart/histogram-random-distribution.svelte
index 76c91720f..a063489b5 100644
--- a/docs/src/examples/components/BarChart/histogram-random-distribution.svelte
+++ b/docs/src/examples/components/BarChart/histogram-random-distribution.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
+	import { BarChart, defaultChartPadding, Tooltip } from 'layerchart';
 	import { bin } from 'd3-array';
 	import { randomNormal } from 'd3-random';
-	import { BarChart, Tooltip } from 'layerchart';
 	import BarChartControls2 from '$lib/components/controls/BarChartControls2.svelte';
 
 	let selectedGenerator = $state('normal');
@@ -10,7 +10,6 @@
 	const randomData = $derived(Array.from({ length: randomCount }, () => random()));
 	const binByValues = $derived(bin()); //.domain([0, 1]);
 	const randomBins = $derived(binByValues(randomData));
-
 	export { data };
 </script>
 
@@ -26,6 +25,7 @@
 		yAxis: { format: 'metric', motion: 'tween' },
 		bars: { motion: 'tween' }
 	}}
+	padding={{ ...defaultChartPadding(), left: 30 }}
 	height={300}
 >
 	{#snippet tooltip()}
diff --git a/docs/src/examples/components/BarChart/histogram-vertical.svelte b/docs/src/examples/components/BarChart/histogram-vertical.svelte
index df942dcbc..8b955d333 100644
--- a/docs/src/examples/components/BarChart/histogram-vertical.svelte
+++ b/docs/src/examples/components/BarChart/histogram-vertical.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
+	import { BarChart, defaultChartPadding, Tooltip } from 'layerchart';
 	import { bin } from 'd3-array';
-	import { BarChart, Tooltip } from 'layerchart';
 	import { getOlympians } from '$lib/data.remote';
 	import BarChartControls from '$lib/components/controls/BarChartControls.svelte';
 
@@ -24,6 +24,7 @@
 	x="x0"
 	y="length"
 	bandPadding={0.2}
+	padding={{ ...defaultChartPadding(), left: 30, top: 20 }}
 	props={{
 		xAxis: { motion: 'tween' },
 		yAxis: { format: 'metric', motion: 'tween' },
diff --git a/docs/src/examples/components/BarChart/horizontal.svelte b/docs/src/examples/components/BarChart/horizontal.svelte
index 335292944..ecacfc935 100644
--- a/docs/src/examples/components/BarChart/horizontal.svelte
+++ b/docs/src/examples/components/BarChart/horizontal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { BarChart } from 'layerchart';
+	import { BarChart, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({
@@ -9,8 +9,14 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	}).slice(0, 10);
-
 	export { data };
 </script>
 
-<BarChart {data} x="value" y="date" orientation="horizontal" height={300} />
+<BarChart
+	{data}
+	x="value"
+	y="date"
+	orientation="horizontal"
+	padding={{ ...defaultChartPadding(), left: 30 }}
+	height={300}
+/>
diff --git a/docs/src/examples/components/BarChart/labels-inside-placement.svelte b/docs/src/examples/components/BarChart/labels-inside-placement.svelte
index 0fe4637c6..9558772ca 100644
--- a/docs/src/examples/components/BarChart/labels-inside-placement.svelte
+++ b/docs/src/examples/components/BarChart/labels-inside-placement.svelte
@@ -9,7 +9,6 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 
diff --git a/docs/src/examples/components/BarChart/labels.svelte b/docs/src/examples/components/BarChart/labels.svelte
index a6fcf7d93..12f6623ea 100644
--- a/docs/src/examples/components/BarChart/labels.svelte
+++ b/docs/src/examples/components/BarChart/labels.svelte
@@ -9,7 +9,6 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 
diff --git a/docs/src/examples/components/BarChart/legend-custom-labels.svelte b/docs/src/examples/components/BarChart/legend-custom-labels.svelte
index 6336dff2a..0583c9b54 100644
--- a/docs/src/examples/components/BarChart/legend-custom-labels.svelte
+++ b/docs/src/examples/components/BarChart/legend-custom-labels.svelte
@@ -3,7 +3,6 @@
 	import { wideData } from '$lib/utils/data.js';
 
 	const data = wideData;
-
 	export { data };
 </script>
 
diff --git a/docs/src/examples/components/BarChart/legend-group-series.svelte b/docs/src/examples/components/BarChart/legend-group-series.svelte
index c778f5a23..efff22f2b 100644
--- a/docs/src/examples/components/BarChart/legend-group-series.svelte
+++ b/docs/src/examples/components/BarChart/legend-group-series.svelte
@@ -3,7 +3,6 @@
 	import { wideData } from '$lib/utils/data.js';
 
 	const data = wideData;
-
 	export { data };
 </script>
 
diff --git a/docs/src/examples/components/BarChart/legend-placement.svelte b/docs/src/examples/components/BarChart/legend-placement.svelte
index 8de13616d..e9ce3ef96 100644
--- a/docs/src/examples/components/BarChart/legend-placement.svelte
+++ b/docs/src/examples/components/BarChart/legend-placement.svelte
@@ -3,7 +3,6 @@
 	import { wideData } from '$lib/utils/data.js';
 
 	const data = wideData;
-
 	export { data };
 </script>
 
diff --git a/docs/src/examples/components/BarChart/legend-stack-series.svelte b/docs/src/examples/components/BarChart/legend-stack-series.svelte
index b2b20814c..820f70549 100644
--- a/docs/src/examples/components/BarChart/legend-stack-series.svelte
+++ b/docs/src/examples/components/BarChart/legend-stack-series.svelte
@@ -3,7 +3,6 @@
 	import { wideData } from '$lib/utils/data.js';
 
 	const data = wideData;
-
 	export { data };
 </script>
 
diff --git a/docs/src/examples/components/BarChart/line-annotation.svelte b/docs/src/examples/components/BarChart/line-annotation.svelte
index 8bebcf971..d694d9ac2 100644
--- a/docs/src/examples/components/BarChart/line-annotation.svelte
+++ b/docs/src/examples/components/BarChart/line-annotation.svelte
@@ -10,26 +10,23 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 
-<div class="h-[300px] p-4 border rounded-sm">
-	<BarChart
-		{data}
-		x="date"
-		y="value"
-		annotations={[
-			{
-				type: 'line',
-				y: mean(data, (d) => d.value),
-				label: 'Avg',
-				props: {
-					line: { class: '[stroke-dasharray:2,2] stroke-danger' },
-					label: { class: 'fill-danger' }
-				}
+<BarChart
+	{data}
+	x="date"
+	y="value"
+	annotations={[
+		{
+			type: 'line',
+			y: mean(data, (d) => d.value),
+			label: 'Avg',
+			props: {
+				line: { class: '[stroke-dasharray:2,2] stroke-danger' },
+				label: { class: 'fill-danger' }
 			}
-		]}
-		height={300}
-	/>
-</div>
+		}
+	]}
+	height={300}
+/>
diff --git a/docs/src/examples/components/BarChart/oscilloscope-frequency.svelte b/docs/src/examples/components/BarChart/oscilloscope-frequency.svelte
index a89ec03a9..bc2455270 100644
--- a/docs/src/examples/components/BarChart/oscilloscope-frequency.svelte
+++ b/docs/src/examples/components/BarChart/oscilloscope-frequency.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
+	import { BarChart, Bars, LinearGradient, defaultChartPadding } from 'layerchart';
 	import { range, ticks } from 'd3-array';
 	import { scaleLinear, scaleSequential } from 'd3-scale';
 	import { interpolateTurbo } from 'd3-scale-chromatic';
-	import { BarChart, Bars, LinearGradient } from 'layerchart';
 	import OscilloscopeField from '$lib/components/controls/fields/OscilloscopeField.svelte';
 
 	const FFT_SIZE = 256;
@@ -88,7 +88,6 @@
 			stopMicrophone();
 		};
 	});
-
 	export { data };
 </script>
 
@@ -101,13 +100,13 @@
 	y="value"
 	yDomain={[0, 256]}
 	bandPadding={0.2}
-	padding={{ left: 24 }}
 	rule={false}
 	axis="y"
 	tooltip={{ mode: 'manual' }}
 	props={{
 		yAxis: { format: (d) => decibels(d)?.toFixed(1) }
 	}}
+	padding={{ ...defaultChartPadding(), left: 40 }}
 	height={200}
 >
 	{#snippet marks()}
diff --git a/docs/src/examples/components/BarChart/override-axis-ticks-with-custom-scale.svelte b/docs/src/examples/components/BarChart/override-axis-ticks-with-custom-scale.svelte
index f82294903..16ff5d88c 100644
--- a/docs/src/examples/components/BarChart/override-axis-ticks-with-custom-scale.svelte
+++ b/docs/src/examples/components/BarChart/override-axis-ticks-with-custom-scale.svelte
@@ -10,7 +10,6 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 
diff --git a/docs/src/examples/components/BarChart/point-annotation.svelte b/docs/src/examples/components/BarChart/point-annotation.svelte
index 9d6535564..10f967a7d 100644
--- a/docs/src/examples/components/BarChart/point-annotation.svelte
+++ b/docs/src/examples/components/BarChart/point-annotation.svelte
@@ -9,7 +9,6 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 
diff --git a/docs/src/examples/components/BarChart/radial-horizontal-color-per-value.svelte b/docs/src/examples/components/BarChart/radial-horizontal-color-per-value.svelte
index e50b25c16..bf6a3f4ea 100644
--- a/docs/src/examples/components/BarChart/radial-horizontal-color-per-value.svelte
+++ b/docs/src/examples/components/BarChart/radial-horizontal-color-per-value.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { BarChart } from 'layerchart';
+	import { BarChart, defaultChartPadding } from 'layerchart';
 
 	const data = [
 		{ browser: 'chrome', visitors: 200 },
@@ -8,7 +8,6 @@
 		{ browser: 'edge', visitors: 100 },
 		{ browser: 'other', visitors: 90 }
 	];
-
 	export { data };
 </script>
 
@@ -28,4 +27,5 @@
 	radial
 	orientation="horizontal"
 	height={400}
+	padding={{ ...defaultChartPadding(), top: 15, bottom: 15 }}
 />
diff --git a/docs/src/examples/components/BarChart/radial-horizontal-duration.svelte b/docs/src/examples/components/BarChart/radial-horizontal-duration.svelte
index 85ba6d499..4d1f293d9 100644
--- a/docs/src/examples/components/BarChart/radial-horizontal-duration.svelte
+++ b/docs/src/examples/components/BarChart/radial-horizontal-duration.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { BarChart } from 'layerchart';
+	import { BarChart, defaultChartPadding } from 'layerchart';
 	import { scaleTime } from 'd3-scale';
 
 	const durationData = [
@@ -49,7 +49,6 @@
 			end: new Date('2021-12-31')
 		}
 	];
-
 	const data = durationData;
 
 	export { data };
@@ -81,7 +80,7 @@
 			context: { mode: 'bounds' }
 		}
 	}}
-	padding={{ top: 10, bottom: 10 }}
+	padding={{ ...defaultChartPadding(), top: 15, bottom: 15 }}
 	height={400}
 >
 	{#snippet tooltip({ context })}
diff --git a/docs/src/examples/components/BarChart/radial-horizontal-grid-between.svelte b/docs/src/examples/components/BarChart/radial-horizontal-grid-between.svelte
index e3cfc3e54..1d430e31a 100644
--- a/docs/src/examples/components/BarChart/radial-horizontal-grid-between.svelte
+++ b/docs/src/examples/components/BarChart/radial-horizontal-grid-between.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { BarChart } from 'layerchart';
+	import { BarChart, defaultChartPadding } from 'layerchart';
 
 	const data = [
 		{ browser: 'chrome', visitors: 200 },
@@ -8,7 +8,6 @@
 		{ browser: 'edge', visitors: 100 },
 		{ browser: 'other', visitors: 90 }
 	];
-
 	export { data };
 </script>
 
@@ -28,5 +27,6 @@
 	radial
 	orientation="horizontal"
 	grid={{ bandAlign: 'between' }}
+	padding={{ ...defaultChartPadding(), top: 15, bottom: 15 }}
 	height={400}
 />
diff --git a/docs/src/examples/components/BarChart/radial-horizontal.svelte b/docs/src/examples/components/BarChart/radial-horizontal.svelte
index 098546888..6ce337001 100644
--- a/docs/src/examples/components/BarChart/radial-horizontal.svelte
+++ b/docs/src/examples/components/BarChart/radial-horizontal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { BarChart } from 'layerchart';
+	import { BarChart, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({
@@ -9,7 +9,6 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 
@@ -20,5 +19,6 @@
 	yRange={({ height }) => [height / 5, height / 2]}
 	radial
 	orientation="horizontal"
+	padding={{ ...defaultChartPadding(), top: 15, bottom: 15 }}
 	height={400}
 />
diff --git a/docs/src/examples/components/BarChart/radial-vertical-arcpadding.svelte b/docs/src/examples/components/BarChart/radial-vertical-arcpadding.svelte
index 97f7a0e91..b9409afe4 100644
--- a/docs/src/examples/components/BarChart/radial-vertical-arcpadding.svelte
+++ b/docs/src/examples/components/BarChart/radial-vertical-arcpadding.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { BarChart } from 'layerchart';
+	import { BarChart, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({
@@ -9,7 +9,6 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 
@@ -20,5 +19,6 @@
 	yRange={({ height }) => [height / 5, height / 2]}
 	radial
 	props={{ bars: { padAngle: 0.1 } }}
+	padding={{ ...defaultChartPadding(), top: 15, bottom: 15 }}
 	height={400}
 />
diff --git a/docs/src/examples/components/BarChart/radial-vertical-yrange.svelte b/docs/src/examples/components/BarChart/radial-vertical-yrange.svelte
index 5de685139..2bdea83e0 100644
--- a/docs/src/examples/components/BarChart/radial-vertical-yrange.svelte
+++ b/docs/src/examples/components/BarChart/radial-vertical-yrange.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { BarChart } from 'layerchart';
+	import { BarChart, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({
@@ -9,7 +9,6 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 
@@ -19,5 +18,6 @@
 	y="value"
 	yRange={({ height }) => [height / 5, height / 2]}
 	radial
+	padding={{ ...defaultChartPadding(), top: 15, bottom: 15 }}
 	height={400}
 />
diff --git a/docs/src/examples/components/BarChart/radial-vertical.svelte b/docs/src/examples/components/BarChart/radial-vertical.svelte
index 85e3d0146..6ea55ca4c 100644
--- a/docs/src/examples/components/BarChart/radial-vertical.svelte
+++ b/docs/src/examples/components/BarChart/radial-vertical.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { BarChart } from 'layerchart';
+	import { BarChart, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({
@@ -9,8 +9,14 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 
-<BarChart {data} x="date" y="value" radial height={400} />
+<BarChart
+	{data}
+	x="date"
+	y="value"
+	radial
+	padding={{ ...defaultChartPadding(), top: 15, bottom: 15 }}
+	height={400}
+/>
diff --git a/docs/src/examples/components/BarChart/radial-weather.svelte b/docs/src/examples/components/BarChart/radial-weather.svelte
index 08056b658..698050370 100644
--- a/docs/src/examples/components/BarChart/radial-weather.svelte
+++ b/docs/src/examples/components/BarChart/radial-weather.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { BarChart, asAny } from 'layerchart';
+	import { BarChart, asAny, defaultChartPadding } from 'layerchart';
 	import { extent } from 'd3-array';
 	import { scaleLinear } from 'd3-scale';
 	import { interpolate, quantize } from 'd3-interpolate';
@@ -20,7 +20,6 @@
 	});
 
 	const avgExtents = extent(data, (d) => d.avg);
-
 	export { data };
 </script>
 
@@ -40,5 +39,6 @@
 		yAxis: { ticks: 4, format: (v) => v + '° F' },
 		grid: { xTicks: 12 }
 	}}
+	padding={{ ...defaultChartPadding(), top: 15, bottom: 15 }}
 	height={600}
 />
diff --git a/docs/src/examples/components/BarChart/range-annotation-multiple.svelte b/docs/src/examples/components/BarChart/range-annotation-multiple.svelte
index fdc13647a..4a951f342 100644
--- a/docs/src/examples/components/BarChart/range-annotation-multiple.svelte
+++ b/docs/src/examples/components/BarChart/range-annotation-multiple.svelte
@@ -9,7 +9,6 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 
diff --git a/docs/src/examples/components/BarChart/range-annotation-single.svelte b/docs/src/examples/components/BarChart/range-annotation-single.svelte
index 99834080f..84803f50b 100644
--- a/docs/src/examples/components/BarChart/range-annotation-single.svelte
+++ b/docs/src/examples/components/BarChart/range-annotation-single.svelte
@@ -9,7 +9,6 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 
diff --git a/docs/src/examples/components/BarChart/range-annotation-value.svelte b/docs/src/examples/components/BarChart/range-annotation-value.svelte
index b3addbe57..e9225fe31 100644
--- a/docs/src/examples/components/BarChart/range-annotation-value.svelte
+++ b/docs/src/examples/components/BarChart/range-annotation-value.svelte
@@ -9,7 +9,6 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 
diff --git a/docs/src/examples/components/BarChart/remove-rounding.svelte b/docs/src/examples/components/BarChart/remove-rounding.svelte
index ac3f92d02..23fea9245 100644
--- a/docs/src/examples/components/BarChart/remove-rounding.svelte
+++ b/docs/src/examples/components/BarChart/remove-rounding.svelte
@@ -9,7 +9,6 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 
diff --git a/docs/src/examples/components/BarChart/scale-override.svelte b/docs/src/examples/components/BarChart/scale-override.svelte
index 5f1a54184..db9873d65 100644
--- a/docs/src/examples/components/BarChart/scale-override.svelte
+++ b/docs/src/examples/components/BarChart/scale-override.svelte
@@ -10,7 +10,6 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 
diff --git a/docs/src/examples/components/BarChart/series-data.svelte b/docs/src/examples/components/BarChart/series-data.svelte
index 3c6022444..085ad1039 100644
--- a/docs/src/examples/components/BarChart/series-data.svelte
+++ b/docs/src/examples/components/BarChart/series-data.svelte
@@ -12,7 +12,6 @@
 	const dateSeriesBaselineData = dateSeriesData.map((d) => ({ ...d, value: d.baseline }));
 
 	const data = { dateSeriesData, dateSeriesBaselineData };
-
 	export { data };
 </script>
 
diff --git a/docs/src/examples/components/BarChart/series-diverging.svelte b/docs/src/examples/components/BarChart/series-diverging.svelte
index 83a7c31bf..ba68c8954 100644
--- a/docs/src/examples/components/BarChart/series-diverging.svelte
+++ b/docs/src/examples/components/BarChart/series-diverging.svelte
@@ -9,7 +9,6 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 
diff --git a/docs/src/examples/components/BarChart/series-horizontal-diverging-as-percent.svelte b/docs/src/examples/components/BarChart/series-horizontal-diverging-as-percent.svelte
index 4cf34ae91..b4818c9fb 100644
--- a/docs/src/examples/components/BarChart/series-horizontal-diverging-as-percent.svelte
+++ b/docs/src/examples/components/BarChart/series-horizontal-diverging-as-percent.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { BarChart, Tooltip, accessor } from 'layerchart';
+	import { BarChart, Tooltip, accessor, defaultChartPadding } from 'layerchart';
 	import { sum } from 'd3-array';
 	import { format } from '@layerstack/utils';
 
@@ -26,7 +26,6 @@
 	];
 
 	const totalPopulation = sum(data, (d) => d.male + d.female);
-
 	export { data };
 </script>
 
@@ -34,7 +33,7 @@
 	{data}
 	y="age"
 	orientation="horizontal"
-	padding={{ left: 32, bottom: 16 }}
+	padding={{ ...defaultChartPadding(), left: 32, right: 10 }}
 	xPadding={[50, 50]}
 	labels={{ format: (value) => format(Math.abs(value), 'percent') }}
 	props={{
diff --git a/docs/src/examples/components/BarChart/series-horizontal-diverging.svelte b/docs/src/examples/components/BarChart/series-horizontal-diverging.svelte
index 8f952234b..0161d6b53 100644
--- a/docs/src/examples/components/BarChart/series-horizontal-diverging.svelte
+++ b/docs/src/examples/components/BarChart/series-horizontal-diverging.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { BarChart, Tooltip, accessor } from 'layerchart';
+	import { BarChart, Tooltip, accessor, defaultChartPadding } from 'layerchart';
 	import { sum } from 'd3-array';
 	import { format } from '@layerstack/utils';
 
@@ -26,7 +26,6 @@
 	];
 
 	const totalPopulation = sum(data, (d) => d.male + d.female);
-
 	export { data };
 </script>
 
@@ -34,7 +33,7 @@
 	{data}
 	y="age"
 	orientation="horizontal"
-	padding={{ left: 32, bottom: 16 }}
+	padding={{ ...defaultChartPadding(), left: 32, right: 10 }}
 	xPadding={[5, 5]}
 	labels={{ format: (value) => format(Math.abs(value), 'metric') }}
 	props={{
diff --git a/docs/src/examples/components/BarChart/series-horizontal.svelte b/docs/src/examples/components/BarChart/series-horizontal.svelte
index a9f15783b..3ab81d854 100644
--- a/docs/src/examples/components/BarChart/series-horizontal.svelte
+++ b/docs/src/examples/components/BarChart/series-horizontal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { BarChart } from 'layerchart';
+	import { BarChart, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({
@@ -9,7 +9,6 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 
@@ -21,5 +20,6 @@
 		{ key: 'baseline', color: 'var(--color-surface-content)', props: { fillOpacity: 0.2 } },
 		{ key: 'value', color: 'var(--color-primary)', props: { insets: { y: 4 } } }
 	]}
+	padding={{ ...defaultChartPadding(), left: 30, right: 25 }}
 	height={400}
 />
diff --git a/docs/src/examples/components/BarChart/series.svelte b/docs/src/examples/components/BarChart/series.svelte
index ae3896845..938786384 100644
--- a/docs/src/examples/components/BarChart/series.svelte
+++ b/docs/src/examples/components/BarChart/series.svelte
@@ -9,7 +9,6 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 
diff --git a/docs/src/examples/components/BarChart/single-axis-x.svelte b/docs/src/examples/components/BarChart/single-axis-x.svelte
index b8441092e..5c8bf960d 100644
--- a/docs/src/examples/components/BarChart/single-axis-x.svelte
+++ b/docs/src/examples/components/BarChart/single-axis-x.svelte
@@ -9,7 +9,6 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 
diff --git a/docs/src/examples/components/BarChart/single-axis-y.svelte b/docs/src/examples/components/BarChart/single-axis-y.svelte
index 4ba5779be..25431b6d1 100644
--- a/docs/src/examples/components/BarChart/single-axis-y.svelte
+++ b/docs/src/examples/components/BarChart/single-axis-y.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { BarChart } from 'layerchart';
+	import { BarChart, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({
@@ -9,8 +9,14 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 
-<BarChart {data} x="date" y="value" axis="y" height={300} />
+<BarChart
+	{data}
+	x="date"
+	y="value"
+	axis="y"
+	padding={{ ...defaultChartPadding(), bottom: 10 }}
+	height={300}
+/>
diff --git a/docs/src/examples/components/BarChart/single-dimension.svelte b/docs/src/examples/components/BarChart/single-dimension.svelte
index 028a118e9..4eae69770 100644
--- a/docs/src/examples/components/BarChart/single-dimension.svelte
+++ b/docs/src/examples/components/BarChart/single-dimension.svelte
@@ -11,7 +11,6 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 
diff --git a/docs/src/examples/components/BarChart/single-stack-with-indicator.svelte b/docs/src/examples/components/BarChart/single-stack-with-indicator.svelte
index 28c991d7b..bcdd2bd38 100644
--- a/docs/src/examples/components/BarChart/single-stack-with-indicator.svelte
+++ b/docs/src/examples/components/BarChart/single-stack-with-indicator.svelte
@@ -33,7 +33,6 @@
 			end: 40
 		}
 	];
-
 	export { data };
 </script>
 
diff --git a/docs/src/examples/components/BarChart/stack-series-diverging.svelte b/docs/src/examples/components/BarChart/stack-series-diverging.svelte
index b183eedeb..657aa7b78 100644
--- a/docs/src/examples/components/BarChart/stack-series-diverging.svelte
+++ b/docs/src/examples/components/BarChart/stack-series-diverging.svelte
@@ -3,7 +3,6 @@
 	import { wideData } from '$lib/utils/data.js';
 
 	const data = wideData;
-
 	export { data };
 </script>
 
diff --git a/docs/src/examples/components/BarChart/stack-series-expand.svelte b/docs/src/examples/components/BarChart/stack-series-expand.svelte
index 626478ed6..cae649891 100644
--- a/docs/src/examples/components/BarChart/stack-series-expand.svelte
+++ b/docs/src/examples/components/BarChart/stack-series-expand.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { BarChart } from 'layerchart';
+	import { BarChart, defaultChartPadding } from 'layerchart';
 	import { wideData } from '$lib/utils/data.js';
 
 	const data = wideData;
-
 	export { data };
 </script>
 
@@ -32,5 +31,6 @@
 			header: { format: 'none' }
 		}
 	}}
+	padding={{ ...defaultChartPadding(), left: 30 }}
 	height={300}
 />
diff --git a/docs/src/examples/components/BarChart/stack-series-horizontal.svelte b/docs/src/examples/components/BarChart/stack-series-horizontal.svelte
index 3ed640717..4dae8c51b 100644
--- a/docs/src/examples/components/BarChart/stack-series-horizontal.svelte
+++ b/docs/src/examples/components/BarChart/stack-series-horizontal.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { BarChart } from 'layerchart';
+	import { BarChart, defaultChartPadding } from 'layerchart';
 	import { wideData } from '$lib/utils/data.js';
 
 	const data = wideData;
-
 	export { data };
 </script>
 
@@ -35,4 +34,5 @@
 		}
 	}}
 	height={300}
+	padding={{ ...defaultChartPadding(), left: 30, right: 10 }}
 />
diff --git a/docs/src/examples/components/BarChart/stack-series-padded.svelte b/docs/src/examples/components/BarChart/stack-series-padded.svelte
index b9785faad..a6fd77872 100644
--- a/docs/src/examples/components/BarChart/stack-series-padded.svelte
+++ b/docs/src/examples/components/BarChart/stack-series-padded.svelte
@@ -3,7 +3,6 @@
 	import { wideData } from '$lib/utils/data.js';
 
 	const data = wideData;
-
 	export { data };
 </script>
 
diff --git a/docs/src/examples/components/BarChart/stack-series.svelte b/docs/src/examples/components/BarChart/stack-series.svelte
index 08d408d13..eec4bc360 100644
--- a/docs/src/examples/components/BarChart/stack-series.svelte
+++ b/docs/src/examples/components/BarChart/stack-series.svelte
@@ -3,7 +3,6 @@
 	import { wideData } from '$lib/utils/data.js';
 
 	const data = wideData;
-
 	export { data };
 </script>
 
diff --git a/docs/src/examples/components/BarChart/time-scale-interval-horizontal.svelte b/docs/src/examples/components/BarChart/time-scale-interval-horizontal.svelte
index 53f6ba694..81569aca2 100644
--- a/docs/src/examples/components/BarChart/time-scale-interval-horizontal.svelte
+++ b/docs/src/examples/components/BarChart/time-scale-interval-horizontal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { BarChart } from 'layerchart';
+	import { BarChart, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 	import { timeDay } from 'd3-time';
 
@@ -10,8 +10,15 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 
-<BarChart {data} x="value" y="date" yInterval={timeDay} orientation="horizontal" height={300} />
+<BarChart
+	{data}
+	x="value"
+	y="date"
+	yInterval={timeDay}
+	orientation="horizontal"
+	padding={{ ...defaultChartPadding(), left: 30, right: 10 }}
+	height={300}
+/>
diff --git a/docs/src/examples/components/BarChart/time-scale-interval-with-inset.svelte b/docs/src/examples/components/BarChart/time-scale-interval-with-inset.svelte
index 61dacc420..d31021fab 100644
--- a/docs/src/examples/components/BarChart/time-scale-interval-with-inset.svelte
+++ b/docs/src/examples/components/BarChart/time-scale-interval-with-inset.svelte
@@ -10,7 +10,6 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 
diff --git a/docs/src/examples/components/BarChart/time-scale-interval.svelte b/docs/src/examples/components/BarChart/time-scale-interval.svelte
index 00c70942f..5f8e72158 100644
--- a/docs/src/examples/components/BarChart/time-scale-interval.svelte
+++ b/docs/src/examples/components/BarChart/time-scale-interval.svelte
@@ -10,7 +10,6 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 
diff --git a/docs/src/examples/components/BarChart/tooltip-click.svelte b/docs/src/examples/components/BarChart/tooltip-click.svelte
index d95336414..6e85ecbd2 100644
--- a/docs/src/examples/components/BarChart/tooltip-click.svelte
+++ b/docs/src/examples/components/BarChart/tooltip-click.svelte
@@ -9,7 +9,6 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>
 
diff --git a/docs/src/examples/components/BarChart/vertical-default.svelte b/docs/src/examples/components/BarChart/vertical-default.svelte
index 73d2bbb23..13fcb0794 100644
--- a/docs/src/examples/components/BarChart/vertical-default.svelte
+++ b/docs/src/examples/components/BarChart/vertical-default.svelte
@@ -9,7 +9,6 @@
 		value: 'integer',
 		keys: ['value', 'baseline']
 	});
-
 	export { data };
 </script>