diff --git a/docs/src/content/components/Bars.md b/docs/src/content/components/Bars.md
index bad38792e..1c449ac46 100644
--- a/docs/src/content/components/Bars.md
+++ b/docs/src/content/components/Bars.md
@@ -5,7 +5,9 @@ layers: [svg, canvas]
 related: [Bar]
 ---
 
-> See also: [BarChart](/docs/components/BarChart) for simplified examples
+:::tip
+See also: [BarChart](/docs/components/BarChart) for simplified examples
+:::
 
 ## Usage
 
diff --git a/docs/src/examples/components/AnnotationPoint/line-to-point.svelte b/docs/src/examples/components/AnnotationPoint/line-to-point.svelte
index 3e59f4512..7f7f5971f 100644
--- a/docs/src/examples/components/AnnotationPoint/line-to-point.svelte
+++ b/docs/src/examples/components/AnnotationPoint/line-to-point.svelte
@@ -13,27 +13,39 @@
 			details: 'iPhone (1st Gen)'
 		},
 		{
-			x: new Date('July 7, 2008'),
+			x: new Date('July 11, 2008'),
 			y: 175.16,
 			label: 'B',
-			details: 'iPad (1st Gen)'
+			details: 'iPhone 3G'
 		},
 		{
-			x: new Date('January 27, 2010'),
-			y: 207.88,
+			x: new Date('April 3, 2010'),
+			y: 232.39,
 			label: 'C',
 			details: 'iPad (1st Gen)'
 		},
+		{
+			x: new Date('June 24, 2010'),
+			y: 254.28,
+			label: 'D',
+			details: 'iPhone 4'
+		},
+		{
+			x: new Date('September 1, 2010'),
+			y: 258.77,
+			label: 'E',
+			details: 'Apple TV (2nd Gen)'
+		},
 		{
 			x: new Date('March 11, 2011'),
 			y: 352.47,
-			label: 'D',
-			details: 'iPad (1st Gen)'
+			label: 'F',
+			details: 'iPad (2nd Gen)'
 		},
 		{
 			x: new Date('March 7, 2012'),
 			y: 545.18,
-			label: 'E',
+			label: 'G',
 			details: 'Apple TV (3rd Gen)'
 		}
 	];
diff --git a/docs/src/examples/components/AnnotationRange/hide-tooltip.svelte b/docs/src/examples/components/AnnotationRange/hide-tooltip.svelte
index 1bc2df30f..8ffca5fd3 100644
--- a/docs/src/examples/components/AnnotationRange/hide-tooltip.svelte
+++ b/docs/src/examples/components/AnnotationRange/hide-tooltip.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { AnnotationRange, LineChart } from 'layerchart';
+	import { AnnotationRange, LineChart, defaultChartPadding } from 'layerchart';
 	import { getAppleStock } from '$lib/data.remote';
 
 	const data = await getAppleStock();
@@ -7,7 +7,13 @@
 	export { data };
 </script>
 
-<LineChart {data} x="date" y="value" height={300} padding={{ left: 25, bottom: 5 }}>
+<LineChart
+	{data}
+	x="date"
+	y="value"
+	height={300}
+	padding={defaultChartPadding({ left: 25, bottom: 15 })}
+>
 	{#snippet aboveMarks({ context })}
 		<AnnotationRange
 			x={[new Date('2010-01-01'), null]}
diff --git a/docs/src/examples/components/AnnotationRange/horizontal-with-fill-multiple.svelte b/docs/src/examples/components/AnnotationRange/horizontal-with-fill-multiple.svelte
index 6c6111c51..1bebac7de 100644
--- a/docs/src/examples/components/AnnotationRange/horizontal-with-fill-multiple.svelte
+++ b/docs/src/examples/components/AnnotationRange/horizontal-with-fill-multiple.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { AnnotationRange, LineChart } from 'layerchart';
+	import { AnnotationRange, LineChart, defaultChartPadding } from 'layerchart';
 	import { getAppleStock } from '$lib/data.remote';
 
 	const data = await getAppleStock();
@@ -7,7 +7,13 @@
 	export { data };
 </script>
 
-<LineChart {data} x="date" y="value" height={300} padding={{ left: 25, bottom: 5 }}>
+<LineChart
+	{data}
+	x="date"
+	y="value"
+	height={300}
+	padding={defaultChartPadding({ left: 25, bottom: 15 })}
+>
 	{#snippet belowMarks({ context })}
 		<AnnotationRange y={[0, 400]} class="fill-success/10" />
 		<AnnotationRange y={[400, 600]} class="fill-warning/10" />
diff --git a/docs/src/examples/components/AnnotationRange/horizontal-with-pattern-lower-bound.svelte b/docs/src/examples/components/AnnotationRange/horizontal-with-pattern-lower-bound.svelte
index 59935be1a..538933833 100644
--- a/docs/src/examples/components/AnnotationRange/horizontal-with-pattern-lower-bound.svelte
+++ b/docs/src/examples/components/AnnotationRange/horizontal-with-pattern-lower-bound.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { AnnotationRange, LineChart } from 'layerchart';
+	import { AnnotationRange, LineChart, defaultChartPadding } from 'layerchart';
 	import { getAppleStock } from '$lib/data.remote';
 
 	const data = await getAppleStock();
@@ -7,7 +7,13 @@
 	export { data };
 </script>
 
-<LineChart {data} x="date" y="value" height={300} padding={{ left: 25, bottom: 5 }}>
+<LineChart
+	{data}
+	x="date"
+	y="value"
+	height={300}
+	padding={defaultChartPadding({ left: 25, bottom: 15 })}
+>
 	{#snippet belowMarks({ context })}
 		<AnnotationRange
 			y={[500, null]}
diff --git a/docs/src/examples/components/AnnotationRange/horizontal-with-pattern-range.svelte b/docs/src/examples/components/AnnotationRange/horizontal-with-pattern-range.svelte
index 717ad8322..e020388a6 100644
--- a/docs/src/examples/components/AnnotationRange/horizontal-with-pattern-range.svelte
+++ b/docs/src/examples/components/AnnotationRange/horizontal-with-pattern-range.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { AnnotationRange, LineChart } from 'layerchart';
+	import { AnnotationRange, LineChart, defaultChartPadding } from 'layerchart';
 	import { getAppleStock } from '$lib/data.remote';
 
 	const data = await getAppleStock();
@@ -7,7 +7,13 @@
 	export { data };
 </script>
 
-<LineChart {data} x="date" y="value" height={300} padding={{ left: 25, bottom: 5 }}>
+<LineChart
+	{data}
+	x="date"
+	y="value"
+	height={300}
+	padding={defaultChartPadding({ left: 25, bottom: 15 })}
+>
 	{#snippet belowMarks({ context })}
 		<AnnotationRange
 			y={[300, 500]}
diff --git a/docs/src/examples/components/AnnotationRange/horizontal-with-pattern-upper-bound.svelte b/docs/src/examples/components/AnnotationRange/horizontal-with-pattern-upper-bound.svelte
index 1db15cdad..e428d3745 100644
--- a/docs/src/examples/components/AnnotationRange/horizontal-with-pattern-upper-bound.svelte
+++ b/docs/src/examples/components/AnnotationRange/horizontal-with-pattern-upper-bound.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { AnnotationRange, LineChart } from 'layerchart';
+	import { AnnotationRange, LineChart, defaultChartPadding } from 'layerchart';
 	import { getAppleStock } from '$lib/data.remote';
 
 	const data = await getAppleStock();
@@ -7,7 +7,13 @@
 	export { data };
 </script>
 
-<LineChart {data} x="date" y="value" height={300} padding={{ left: 25, bottom: 5 }}>
+<LineChart
+	{data}
+	x="date"
+	y="value"
+	height={300}
+	padding={defaultChartPadding({ left: 25, bottom: 15 })}
+>
 	{#snippet belowMarks({ context })}
 		<AnnotationRange
 			y={[null, 500]}
diff --git a/docs/src/examples/components/AnnotationRange/label-placement.svelte b/docs/src/examples/components/AnnotationRange/label-placement.svelte
index 03110d663..940dd2942 100644
--- a/docs/src/examples/components/AnnotationRange/label-placement.svelte
+++ b/docs/src/examples/components/AnnotationRange/label-placement.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { AnnotationRange, LineChart, type Placement } from 'layerchart';
+	import { AnnotationRange, LineChart, defaultChartPadding, type Placement } from 'layerchart';
 	import AnnotationRangeControls from '$lib/components/controls/AnnotationRangePointLineControls.svelte';
 
 	import { getAppleStock } from '$lib/data.remote';
@@ -26,7 +26,13 @@
 
 <AnnotationRangeControls bind:placement bind:xOffset bind:yOffset />
 
-<LineChart {data} x="date" y="value" height={300} padding={{ left: 25, bottom: 5 }}>
+<LineChart
+	{data}
+	x="date"
+	y="value"
+	height={300}
+	padding={defaultChartPadding({ left: 25, bottom: 15 })}
+>
 	{#snippet aboveMarks({ context })}
 		<AnnotationRange
 			x={[new Date('2010-01-01'), new Date('2010-12-31')]}
diff --git a/docs/src/examples/components/AnnotationRange/vertical-with-gradient-range.svelte b/docs/src/examples/components/AnnotationRange/vertical-with-gradient-range.svelte
index 9c2086ae8..d0f52109f 100644
--- a/docs/src/examples/components/AnnotationRange/vertical-with-gradient-range.svelte
+++ b/docs/src/examples/components/AnnotationRange/vertical-with-gradient-range.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { AnnotationRange, LineChart } from 'layerchart';
+	import { AnnotationRange, LineChart, defaultChartPadding } from 'layerchart';
 	import { getAppleStock } from '$lib/data.remote';
 
 	const data = await getAppleStock();
@@ -7,7 +7,13 @@
 	export { data };
 </script>
 
-<LineChart {data} x="date" y="value" height={300} padding={{ left: 25, bottom: 5 }}>
+<LineChart
+	{data}
+	x="date"
+	y="value"
+	height={300}
+	padding={defaultChartPadding({ left: 25, bottom: 15 })}
+>
 	{#snippet belowMarks({ context })}
 		<AnnotationRange
 			x={[new Date('2011-01-01'), new Date('2011-06-30')]}
diff --git a/docs/src/examples/components/AnnotationRange/vertical-with-pattern-lower-bound.svelte b/docs/src/examples/components/AnnotationRange/vertical-with-pattern-lower-bound.svelte
index 95166d657..9c3608235 100644
--- a/docs/src/examples/components/AnnotationRange/vertical-with-pattern-lower-bound.svelte
+++ b/docs/src/examples/components/AnnotationRange/vertical-with-pattern-lower-bound.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { AnnotationRange, LineChart } from 'layerchart';
+	import { AnnotationRange, LineChart, defaultChartPadding } from 'layerchart';
 	import { getAppleStock } from '$lib/data.remote';
 
 	const data = await getAppleStock();
@@ -7,7 +7,13 @@
 	export { data };
 </script>
 
-<LineChart {data} x="date" y="value" height={300} padding={{ left: 25, bottom: 5 }}>
+<LineChart
+	{data}
+	x="date"
+	y="value"
+	height={300}
+	padding={defaultChartPadding({ left: 25, bottom: 15 })}
+>
 	{#snippet belowMarks({ context })}
 		<AnnotationRange
 			x={[new Date('2010-01-01'), null]}
diff --git a/docs/src/examples/components/AnnotationRange/vertical-with-pattern-range.svelte b/docs/src/examples/components/AnnotationRange/vertical-with-pattern-range.svelte
index 5702c8793..4a1149df1 100644
--- a/docs/src/examples/components/AnnotationRange/vertical-with-pattern-range.svelte
+++ b/docs/src/examples/components/AnnotationRange/vertical-with-pattern-range.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { AnnotationRange, LineChart } from 'layerchart';
+	import { AnnotationRange, LineChart, defaultChartPadding } from 'layerchart';
 	import { getAppleStock } from '$lib/data.remote';
 
 	const data = await getAppleStock();
@@ -7,7 +7,13 @@
 	export { data };
 </script>
 
-<LineChart {data} x="date" y="value" height={300} padding={{ left: 25, bottom: 5 }}>
+<LineChart
+	{data}
+	x="date"
+	y="value"
+	height={300}
+	padding={defaultChartPadding({ left: 25, bottom: 15 })}
+>
 	{#snippet belowMarks({ context })}
 		<AnnotationRange
 			x={[new Date('2010-01-01'), new Date('2010-12-31')]}
diff --git a/docs/src/examples/components/AnnotationRange/vertical-with-pattern-upper-bound.svelte b/docs/src/examples/components/AnnotationRange/vertical-with-pattern-upper-bound.svelte
index 2f362d03d..8f2aef3d8 100644
--- a/docs/src/examples/components/AnnotationRange/vertical-with-pattern-upper-bound.svelte
+++ b/docs/src/examples/components/AnnotationRange/vertical-with-pattern-upper-bound.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { AnnotationRange, LineChart } from 'layerchart';
+	import { AnnotationRange, LineChart, defaultChartPadding } from 'layerchart';
 	import { getAppleStock } from '$lib/data.remote';
 
 	const data = await getAppleStock();
@@ -7,7 +7,13 @@
 	export { data };
 </script>
 
-<LineChart {data} x="date" y="value" height={300} padding={{ left: 25, bottom: 5 }}>
+<LineChart
+	{data}
+	x="date"
+	y="value"
+	height={300}
+	padding={defaultChartPadding({ left: 25, bottom: 15 })}
+>
 	{#snippet belowMarks({ context })}
 		<AnnotationRange
 			x={[null, new Date('2010-12-31')]}
diff --git a/docs/src/examples/components/Area/multiple-series-using-overrides.svelte b/docs/src/examples/components/Area/multiple-series-using-overrides.svelte
index 6705f07bb..79eb8aec7 100644
--- a/docs/src/examples/components/Area/multiple-series-using-overrides.svelte
+++ b/docs/src/examples/components/Area/multiple-series-using-overrides.svelte
@@ -26,7 +26,7 @@
 	y={['apples', 'bananas', 'oranges']}
 	yDomain={[0, null]}
 	yNice
-	padding={{ top: 20, left: 20, bottom: 20, right: 48 }}
+	padding={{ top: 20, left: 20, bottom: 20, right: 15 }}
 	tooltip={{ mode: 'quadtree-x' }}
 	height={300}
 >
diff --git a/docs/src/examples/components/Area/multiple-series.svelte b/docs/src/examples/components/Area/multiple-series.svelte
index f85779802..c7e6fedb9 100644
--- a/docs/src/examples/components/Area/multiple-series.svelte
+++ b/docs/src/examples/components/Area/multiple-series.svelte
@@ -46,7 +46,7 @@
 	cDomain={Object.keys(fruitColors)}
 	cRange={Object.values(fruitColors)}
 	tooltip={{ mode: 'quadtree' }}
-	padding={{ ...defaultChartPadding, top: 10, bottom: 10, left: 20, right: 60 }}
+	padding={defaultChartPadding({ top: 10, bottom: 15, left: 20, right: 60 })}
 	height={300}
 >
 	{#snippet children({ context })}
diff --git a/docs/src/examples/components/Area/stack.svelte b/docs/src/examples/components/Area/stack.svelte
index c31740b31..ac237af83 100644
--- a/docs/src/examples/components/Area/stack.svelte
+++ b/docs/src/examples/components/Area/stack.svelte
@@ -50,7 +50,7 @@
 	cDomain={Object.keys(fruitColors)}
 	cRange={Object.values(fruitColors)}
 	tooltip={{ mode: 'quadtree-x' }}
-	padding={{ ...defaultChartPadding, left: 25, bottom: 20 }}
+	padding={defaultChartPadding({ left: 25, bottom: 20, right: 15 })}
 	height={300}
 >
 	{#snippet children({ context })}
diff --git a/docs/src/examples/components/AreaChart/custom.svelte b/docs/src/examples/components/AreaChart/custom.svelte
index 0b0b4ce7b..19542670e 100644
--- a/docs/src/examples/components/AreaChart/custom.svelte
+++ b/docs/src/examples/components/AreaChart/custom.svelte
@@ -15,7 +15,7 @@
 	export { data };
 </script>
 
-<AreaChart {data} x="date" y="value" padding={defaultChartPadding({ right: 10 })} height={300}>
+<AreaChart {data} x="date" y="value" padding={defaultChartPadding({ right: 15 })} height={300}>
 	{#snippet children({ context })}
 		<Layer>
 			<Axis placement="left" grid rule />
diff --git a/docs/src/examples/components/AreaChart/series-individual-tooltip.svelte b/docs/src/examples/components/AreaChart/series-individual-tooltip.svelte
index 07225a9f7..ba98c6f9c 100644
--- a/docs/src/examples/components/AreaChart/series-individual-tooltip.svelte
+++ b/docs/src/examples/components/AreaChart/series-individual-tooltip.svelte
@@ -47,7 +47,7 @@
 		}
 	]}
 	props={{ tooltip: { context: { mode: 'quadtree' } } }}
-	padding={defaultChartPadding({ right: 10 })}
+	padding={defaultChartPadding({ right: 15 })}
 	height={300}
 >
 	{#snippet marks({ series, context })}
diff --git a/docs/src/examples/components/AreaChart/series-stack-legend-labels.svelte b/docs/src/examples/components/AreaChart/series-stack-legend-labels.svelte
index 16a243807..b05162fa4 100644
--- a/docs/src/examples/components/AreaChart/series-stack-legend-labels.svelte
+++ b/docs/src/examples/components/AreaChart/series-stack-legend-labels.svelte
@@ -30,6 +30,6 @@
 	]}
 	legend
 	seriesLayout="stack"
-	padding={defaultChartPadding({ bottom: 45, right: 10 })}
+	padding={defaultChartPadding({ legend: true, right: 10 })}
 	height={300}
 />
diff --git a/docs/src/examples/components/AreaChart/series-stack-legend.svelte b/docs/src/examples/components/AreaChart/series-stack-legend.svelte
index 97f387200..cef5fca75 100644
--- a/docs/src/examples/components/AreaChart/series-stack-legend.svelte
+++ b/docs/src/examples/components/AreaChart/series-stack-legend.svelte
@@ -28,6 +28,6 @@
 	]}
 	seriesLayout="stack"
 	legend
-	padding={defaultChartPadding({ bottom: 45, right: 10 })}
+	padding={defaultChartPadding({ legend: true, right: 10 })}
 	height={300}
 />
diff --git a/docs/src/examples/components/AreaChart/threshold-gradient.svelte b/docs/src/examples/components/AreaChart/threshold-gradient.svelte
index 523b9efa5..de7b9556e 100644
--- a/docs/src/examples/components/AreaChart/threshold-gradient.svelte
+++ b/docs/src/examples/components/AreaChart/threshold-gradient.svelte
@@ -2,10 +2,10 @@
 	import {
 		Area,
 		AreaChart,
-		defaultChartPadding,
 		Highlight,
 		LinearGradient,
-		Tooltip
+		Tooltip,
+		defaultChartPadding
 	} from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 	import { format } from '@layerstack/utils';
@@ -19,7 +19,7 @@
 	};
 </script>
 
-<AreaChart {data} x="date" y="value" padding={defaultChartPadding({ right: 10 })} height={300}>
+<AreaChart {data} x="date" y="value" padding={defaultChartPadding({ right: 15 })} height={300}>
 	{#snippet marks({ context })}
 		{@const thresholdValue = 0}
 		{@const thresholdOffset =
diff --git a/docs/src/examples/components/Axis/rotate-labels.svelte b/docs/src/examples/components/Axis/rotate-labels.svelte
index 273b05779..8bb821e3f 100644
--- a/docs/src/examples/components/Axis/rotate-labels.svelte
+++ b/docs/src/examples/components/Axis/rotate-labels.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: 60, top: 24, left: 24, right: 24 })}
+	height={52}
+>
 	<Layer>
 		<Axis
 			placement="bottom"
diff --git a/docs/src/examples/components/Axis/time-scale-auto-format-filtering.svelte b/docs/src/examples/components/Axis/time-scale-auto-format-filtering.svelte
index 3f5323d55..03d7bef9e 100644
--- a/docs/src/examples/components/Axis/time-scale-auto-format-filtering.svelte
+++ b/docs/src/examples/components/Axis/time-scale-auto-format-filtering.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: 20, bottom: 20, left: 20, right: 25 })}
+				>
 					<Layer>
 						<Axis placement="bottom" rule grid {tickSpacing} format={example.format} />
 					</Layer>
diff --git a/docs/src/examples/components/Axis/time-scale-auto.svelte b/docs/src/examples/components/Axis/time-scale-auto.svelte
index f15379524..5a0d9de79 100644
--- a/docs/src/examples/components/Axis/time-scale-auto.svelte
+++ b/docs/src/examples/components/Axis/time-scale-auto.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: 20, bottom: 20, left: 20, right: 25 })}
+				>
 					<Layer>
 						<Axis placement="bottom" rule grid {tickSpacing} />
 					</Layer>
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 a604bb095..68c859359 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
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { BarChart, Labels } from 'layerchart';
+	import { BarChart, Labels, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({
@@ -12,7 +12,16 @@
 	export { data };
 </script>
 
-<BarChart {data} x="value" y="date" labels orientation="horizontal" axis={false} height={500}>
+<BarChart
+	{data}
+	x="value"
+	y="date"
+	labels
+	orientation="horizontal"
+	axis={false}
+	padding={defaultChartPadding({ left: 4, right: 10 })}
+	height={500}
+>
 	{#snippet aboveMarks()}
 		<Labels x={(d) => 0} value="date" class="text-sm fill-surface-300 stroke-none" />
 	{/snippet}
diff --git a/docs/src/examples/components/Bars/horizontal-grouped-and-stacked.svelte b/docs/src/examples/components/Bars/horizontal-grouped-and-stacked.svelte
index f1eb5c5f1..3c492d998 100644
--- a/docs/src/examples/components/Bars/horizontal-grouped-and-stacked.svelte
+++ b/docs/src/examples/components/Bars/horizontal-grouped-and-stacked.svelte
@@ -1,7 +1,16 @@
 <script lang="ts">
 	import { scaleBand } from 'd3-scale';
 	import { sum } from 'd3-array';
-	import { Bars, Axis, Chart, Highlight, Layer, Tooltip, groupStackData } from 'layerchart';
+	import {
+		Bars,
+		Axis,
+		Chart,
+		Highlight,
+		Layer,
+		Tooltip,
+		groupStackData,
+		defaultChartPadding
+	} from 'layerchart';
 	import { longData } from '$lib/utils/data.js';
 
 	const colorKeys = [...new Set(longData.map((x) => x.fruit))];
@@ -34,7 +43,7 @@
 	y1Scale={scaleBand().padding(0.1)}
 	y1Domain={[1, 2]}
 	y1Range={({ yScale }) => [0, yScale.bandwidth?.()]}
-	padding={{ left: 32, bottom: 20, right: 8 }}
+	padding={defaultChartPadding({ left: 32, bottom: 20, right: 15 })}
 	tooltip={{ mode: 'band' }}
 	height={300}
 >
diff --git a/docs/src/examples/components/Bars/horizontal-grouped.svelte b/docs/src/examples/components/Bars/horizontal-grouped.svelte
index 8cae5cfea..0cec8cd42 100644
--- a/docs/src/examples/components/Bars/horizontal-grouped.svelte
+++ b/docs/src/examples/components/Bars/horizontal-grouped.svelte
@@ -1,7 +1,16 @@
 <script lang="ts">
 	import { scaleBand } from 'd3-scale';
 	import { sum } from 'd3-array';
-	import { Bars, Axis, Chart, Highlight, Layer, Tooltip, groupStackData } from 'layerchart';
+	import {
+		Bars,
+		Axis,
+		Chart,
+		Highlight,
+		Layer,
+		Tooltip,
+		groupStackData,
+		defaultChartPadding
+	} from 'layerchart';
 	import { longData } from '$lib/utils/data.js';
 
 	const colorKeys = [...new Set(longData.map((x) => x.fruit))];
@@ -29,7 +38,7 @@
 	y1="fruit"
 	y1Domain={colorKeys}
 	y1Range={({ yScale }) => [0, yScale.bandwidth?.()]}
-	padding={{ left: 32, bottom: 20, right: 8 }}
+	padding={defaultChartPadding({ left: 32, bottom: 20, right: 15 })}
 	tooltip={{ mode: 'band' }}
 	height={400}
 >
diff --git a/docs/src/examples/components/Bars/horizontal-inside-labels.svelte b/docs/src/examples/components/Bars/horizontal-inside-labels.svelte
index 7d5d1fabf..2578ad685 100644
--- a/docs/src/examples/components/Bars/horizontal-inside-labels.svelte
+++ b/docs/src/examples/components/Bars/horizontal-inside-labels.svelte
@@ -22,6 +22,6 @@
 		<Axis placement="left" rule />
 		<Rule x={0} />
 		<Bars strokeWidth={1} class="fill-primary" />
-		<Labels placement="inside" format="integer" />
+		<Labels placement="inside" format="integer" class="fill-black" />
 	</Layer>
 </Chart>
diff --git a/docs/src/examples/components/Bars/horizontal-stacked-percent.svelte b/docs/src/examples/components/Bars/horizontal-stacked-percent.svelte
index 5accff1d4..5c5602edb 100644
--- a/docs/src/examples/components/Bars/horizontal-stacked-percent.svelte
+++ b/docs/src/examples/components/Bars/horizontal-stacked-percent.svelte
@@ -2,7 +2,16 @@
 	import { scaleBand } from 'd3-scale';
 	import { stackOffsetExpand } from 'd3-shape';
 	import { sum } from 'd3-array';
-	import { Bars, Axis, Chart, Highlight, Layer, Tooltip, groupStackData } from 'layerchart';
+	import {
+		Bars,
+		Axis,
+		Chart,
+		Highlight,
+		Layer,
+		Tooltip,
+		groupStackData,
+		defaultChartPadding
+	} from 'layerchart';
 	import { longData } from '$lib/utils/data.js';
 
 	const colorKeys = [...new Set(longData.map((x) => x.fruit))];
@@ -31,7 +40,7 @@
 	c="fruit"
 	cDomain={colorKeys}
 	cRange={keyColors}
-	padding={{ left: 32, bottom: 20, right: 8 }}
+	padding={defaultChartPadding({ left: 32, bottom: 20, right: 15 })}
 	tooltip={{ mode: 'band' }}
 	height={300}
 >
diff --git a/docs/src/examples/components/Bars/horizontal-stacked.svelte b/docs/src/examples/components/Bars/horizontal-stacked.svelte
index d03b6a2c4..a7ca249ab 100644
--- a/docs/src/examples/components/Bars/horizontal-stacked.svelte
+++ b/docs/src/examples/components/Bars/horizontal-stacked.svelte
@@ -1,7 +1,16 @@
 <script lang="ts">
 	import { scaleBand } from 'd3-scale';
 	import { sum } from 'd3-array';
-	import { Bars, Axis, Chart, Highlight, Layer, Tooltip, groupStackData } from 'layerchart';
+	import {
+		Bars,
+		Axis,
+		Chart,
+		Highlight,
+		Layer,
+		Tooltip,
+		groupStackData,
+		defaultChartPadding
+	} from 'layerchart';
 	import { longData } from '$lib/utils/data.js';
 
 	const colorKeys = [...new Set(longData.map((x) => x.fruit))];
@@ -26,7 +35,7 @@
 	c="fruit"
 	cDomain={colorKeys}
 	cRange={keyColors}
-	padding={{ left: 32, bottom: 20, right: 8 }}
+	padding={defaultChartPadding({ left: 32, bottom: 20, right: 15 })}
 	tooltip={{ mode: 'band' }}
 	height={300}
 >
diff --git a/docs/src/examples/components/Bars/vertical-inside-labels.svelte b/docs/src/examples/components/Bars/vertical-inside-labels.svelte
index d6125828d..58238ea69 100644
--- a/docs/src/examples/components/Bars/vertical-inside-labels.svelte
+++ b/docs/src/examples/components/Bars/vertical-inside-labels.svelte
@@ -22,6 +22,6 @@
 		<Axis placement="bottom" rule />
 		<Rule y={0} />
 		<Bars strokeWidth={1} class="fill-primary" />
-		<Labels placement="inside" format="integer" />
+		<Labels placement="inside" format="integer" class="fill-black" />
 	</Layer>
 </Chart>
diff --git a/docs/src/examples/components/Bars/vertical-multiple-diverging-rounded-specific.svelte b/docs/src/examples/components/Bars/vertical-multiple-diverging-rounded-specific.svelte
index 66c45ef67..2bc7654cc 100644
--- a/docs/src/examples/components/Bars/vertical-multiple-diverging-rounded-specific.svelte
+++ b/docs/src/examples/components/Bars/vertical-multiple-diverging-rounded-specific.svelte
@@ -1,7 +1,16 @@
 <script lang="ts">
 	import { scaleBand } from 'd3-scale';
 	import { format } from '@layerstack/utils';
-	import { Axis, Bars, Chart, Highlight, Layer, Rule, Tooltip } from 'layerchart';
+	import {
+		Axis,
+		Bars,
+		Chart,
+		Highlight,
+		Layer,
+		Rule,
+		Tooltip,
+		defaultChartPadding
+	} from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({
@@ -21,8 +30,8 @@
 	xScale={scaleBand().padding(0.4)}
 	y={['value', (d) => -d.baseline]}
 	yNice
-	padding={{ left: 16, bottom: 24 }}
 	tooltip={{ mode: 'bisect-x' }}
+	padding={defaultChartPadding({ top: 10, left: 20 })}
 	height={300}
 >
 	<Layer>
diff --git a/docs/src/examples/components/BrushContext/integrated-brush-(both-axis-area).svelte b/docs/src/examples/components/BrushContext/integrated-brush-(both-axis-area).svelte
index b77d44706..18097b7f2 100644
--- a/docs/src/examples/components/BrushContext/integrated-brush-(both-axis-area).svelte
+++ b/docs/src/examples/components/BrushContext/integrated-brush-(both-axis-area).svelte
@@ -6,6 +6,7 @@
 		ChartClipPath,
 		Layer,
 		LinearGradient,
+		defaultChartPadding,
 		type DomainType
 	} from 'layerchart';
 	import { getAppleStock } from '$lib/data.remote';
@@ -23,7 +24,7 @@
 	{xDomain}
 	y="value"
 	{yDomain}
-	padding={{ left: 16, bottom: 24 }}
+	padding={defaultChartPadding({ left: 25, bottom: 24 })}
 	brush={{
 		axis: 'both',
 		resetOnEnd: true,
diff --git a/docs/src/examples/components/BrushContext/integrated-brush-(x-axis).svelte b/docs/src/examples/components/BrushContext/integrated-brush-(x-axis).svelte
index 13fb7b492..acd14dd1c 100644
--- a/docs/src/examples/components/BrushContext/integrated-brush-(x-axis).svelte
+++ b/docs/src/examples/components/BrushContext/integrated-brush-(x-axis).svelte
@@ -6,6 +6,7 @@
 		ChartClipPath,
 		Layer,
 		LinearGradient,
+		defaultChartPadding,
 		type DomainType
 	} from 'layerchart';
 	import { getAppleStock } from '$lib/data.remote';
@@ -22,7 +23,7 @@
 	{xDomain}
 	y="value"
 	yDomain={[0, null]}
-	padding={{ left: 16, bottom: 24 }}
+	padding={defaultChartPadding({ left: 25, bottom: 24 })}
 	brush={{
 		resetOnEnd: true,
 		onBrushEnd: (e) => {
diff --git a/docs/src/examples/components/BrushContext/integrated-brush-(y-axis).svelte b/docs/src/examples/components/BrushContext/integrated-brush-(y-axis).svelte
index f2c044715..e11ebcdbf 100644
--- a/docs/src/examples/components/BrushContext/integrated-brush-(y-axis).svelte
+++ b/docs/src/examples/components/BrushContext/integrated-brush-(y-axis).svelte
@@ -6,6 +6,7 @@
 		ChartClipPath,
 		Layer,
 		LinearGradient,
+		defaultChartPadding,
 		type DomainType
 	} from 'layerchart';
 	import { getAppleStock } from '$lib/data.remote';
@@ -16,32 +17,30 @@
 	let yDomain = $state<DomainType>([null, null]);
 </script>
 
-<div class="border rounded-sm p-4 grid gap-1">
-	<Chart
-		{data}
-		x="date"
-		y="value"
-		{yDomain}
-		padding={{ left: 16, bottom: 24 }}
-		brush={{
-			axis: 'y',
-			resetOnEnd: true,
-			onBrushEnd: (e) => {
-				yDomain = e.yDomain;
-			}
-		}}
-		height={300}
-	>
-		<Layer>
-			<Axis placement="left" grid rule />
-			<Axis placement="bottom" rule />
-			<ChartClipPath>
-				<LinearGradient class="from-primary/50 to-primary/1" vertical>
-					{#snippet children({ gradient })}
-						<Area line={{ class: 'stroke-2 stroke-primary' }} fill={gradient} />
-					{/snippet}
-				</LinearGradient>
-			</ChartClipPath>
-		</Layer>
-	</Chart>
-</div>
+<Chart
+	{data}
+	x="date"
+	y="value"
+	{yDomain}
+	padding={defaultChartPadding({ left: 25, bottom: 24 })}
+	brush={{
+		axis: 'y',
+		resetOnEnd: true,
+		onBrushEnd: (e) => {
+			yDomain = e.yDomain;
+		}
+	}}
+	height={300}
+>
+	<Layer>
+		<Axis placement="left" grid rule />
+		<Axis placement="bottom" rule />
+		<ChartClipPath>
+			<LinearGradient class="from-primary/50 to-primary/1" vertical>
+				{#snippet children({ gradient })}
+					<Area line={{ class: 'stroke-2 stroke-primary' }} fill={gradient} />
+				{/snippet}
+			</LinearGradient>
+		</ChartClipPath>
+	</Layer>
+</Chart>
diff --git a/docs/src/examples/components/BrushContext/minimap.svelte b/docs/src/examples/components/BrushContext/minimap.svelte
index 4b039f144..42de0b0e1 100644
--- a/docs/src/examples/components/BrushContext/minimap.svelte
+++ b/docs/src/examples/components/BrushContext/minimap.svelte
@@ -1,6 +1,15 @@
 <script lang="ts">
 	import { range } from 'd3-array';
-	import { Axis, Chart, ChartClipPath, Circle, Layer, Points, type DomainType } from 'layerchart';
+	import {
+		Axis,
+		Chart,
+		ChartClipPath,
+		Circle,
+		Layer,
+		Points,
+		defaultChartPadding,
+		type DomainType
+	} from 'layerchart';
 	import { cls } from '@layerstack/tailwind';
 
 	const data = range(200).map((d) => {
@@ -20,7 +29,6 @@
 		y="y"
 		{yDomain}
 		yNice
-		padding={{ left: 16, bottom: 24 }}
 		brush={{
 			axis: 'both',
 			resetOnEnd: true,
@@ -29,6 +37,7 @@
 				yDomain = e.yDomain;
 			}
 		}}
+		padding={defaultChartPadding({ left: 20, bottom: 24 })}
 		height={400}
 	>
 		<Layer>
diff --git a/docs/src/examples/components/BrushContext/selection.svelte b/docs/src/examples/components/BrushContext/selection.svelte
index 9ee462326..47a09f66e 100644
--- a/docs/src/examples/components/BrushContext/selection.svelte
+++ b/docs/src/examples/components/BrushContext/selection.svelte
@@ -1,6 +1,14 @@
 <script lang="ts">
 	import { range } from 'd3-array';
-	import { Axis, Chart, Circle, Layer, Points, type DomainType } from 'layerchart';
+	import {
+		Axis,
+		Chart,
+		Circle,
+		Layer,
+		Points,
+		defaultChartPadding,
+		type DomainType
+	} from 'layerchart';
 	import { cls } from '@layerstack/tailwind';
 
 	const data = range(200).map((d) => {
@@ -18,7 +26,7 @@
 	y="y"
 	yDomain={[0, null]}
 	yNice
-	padding={{ left: 16, bottom: 24 }}
+	padding={defaultChartPadding({ top: 20, left: 20, bottom: 24 })}
 	brush={{
 		axis: 'both',
 		onChange: (e) => {
diff --git a/docs/src/examples/components/BrushContext/separate-chart-(clip-data).svelte b/docs/src/examples/components/BrushContext/separate-chart-(clip-data).svelte
index a59f502e7..979767d83 100644
--- a/docs/src/examples/components/BrushContext/separate-chart-(clip-data).svelte
+++ b/docs/src/examples/components/BrushContext/separate-chart-(clip-data).svelte
@@ -6,6 +6,7 @@
 		ChartClipPath,
 		Layer,
 		LinearGradient,
+		defaultChartPadding,
 		type DomainType
 	} from 'layerchart';
 	import { getAppleStock } from '$lib/data.remote';
@@ -22,7 +23,7 @@
 	{xDomain}
 	y="value"
 	yDomain={[0, null]}
-	padding={{ left: 16, bottom: 24 }}
+	padding={defaultChartPadding({ left: 25, bottom: 24 })}
 	height={300}
 >
 	<Layer>
diff --git a/docs/src/examples/components/BrushContext/separate-chart-(filter-data).svelte b/docs/src/examples/components/BrushContext/separate-chart-(filter-data).svelte
index 6e7f5530b..9351ae354 100644
--- a/docs/src/examples/components/BrushContext/separate-chart-(filter-data).svelte
+++ b/docs/src/examples/components/BrushContext/separate-chart-(filter-data).svelte
@@ -1,5 +1,13 @@
 <script lang="ts">
-	import { Area, Axis, Chart, Layer, LinearGradient, type DomainType } from 'layerchart';
+	import {
+		Area,
+		Axis,
+		Chart,
+		Layer,
+		LinearGradient,
+		defaultChartPadding,
+		type DomainType
+	} from 'layerchart';
 	import { getAppleStock } from '$lib/data.remote';
 
 	const data = await getAppleStock();
@@ -17,7 +25,7 @@
 	x="date"
 	y="value"
 	yDomain={[0, null]}
-	padding={{ left: 16, bottom: 24 }}
+	padding={defaultChartPadding({ left: 25, bottom: 24 })}
 	height={300}
 >
 	<Layer>
diff --git a/docs/src/examples/components/BrushContext/tooltip-interop.svelte b/docs/src/examples/components/BrushContext/tooltip-interop.svelte
index 1b9618f8a..54eec29da 100644
--- a/docs/src/examples/components/BrushContext/tooltip-interop.svelte
+++ b/docs/src/examples/components/BrushContext/tooltip-interop.svelte
@@ -8,6 +8,7 @@
 		Layer,
 		LinearGradient,
 		Tooltip,
+		defaultChartPadding,
 		type DomainType
 	} from 'layerchart';
 	import { format } from '@layerstack/utils';
@@ -25,7 +26,7 @@
 	{xDomain}
 	y="value"
 	yDomain={[0, null]}
-	padding={{ left: 16, bottom: 24 }}
+	padding={defaultChartPadding({ left: 25, bottom: 24 })}
 	tooltip={{ mode: 'quadtree-x' }}
 	brush={{
 		resetOnEnd: true,
diff --git a/docs/src/examples/components/Grid/integer-only.svelte b/docs/src/examples/components/Grid/integer-only.svelte
index 286f56c27..d1d01cde5 100644
--- a/docs/src/examples/components/Grid/integer-only.svelte
+++ b/docs/src/examples/components/Grid/integer-only.svelte
@@ -1,8 +1,8 @@
 <script>
-	import { Axis, Chart, Grid, Layer } from 'layerchart';
+	import { Axis, Chart, Grid, Layer, defaultChartPadding } from 'layerchart';
 </script>
 
-<Chart yDomain={[0, 2]} padding={{ left: 20 }} height={200}>
+<Chart yDomain={[0, 2]} padding={defaultChartPadding({ top: 10, bottom: 10 })} height={200}>
 	<Layer>
 		<Grid y yTicks={(scale) => scale.ticks?.().filter(Number.isInteger)} />
 		<Axis
diff --git a/docs/src/examples/components/LineChart/legend.svelte b/docs/src/examples/components/LineChart/legend.svelte
index e0728df25..2702e2724 100644
--- a/docs/src/examples/components/LineChart/legend.svelte
+++ b/docs/src/examples/components/LineChart/legend.svelte
@@ -26,7 +26,7 @@
 			color: 'var(--color-oranges)'
 		}
 	]}
-	padding={defaultChartPadding({ right: 10, bottom: 45 })}
+	padding={defaultChartPadding({ legend: true, right: 10 })}
 	height={300}
 	legend
 />
diff --git a/docs/src/examples/components/LineChart/series-individual-tooltip.svelte b/docs/src/examples/components/LineChart/series-individual-tooltip.svelte
index dfa39d761..fe1242289 100644
--- a/docs/src/examples/components/LineChart/series-individual-tooltip.svelte
+++ b/docs/src/examples/components/LineChart/series-individual-tooltip.svelte
@@ -38,7 +38,7 @@
 	props={{ tooltip: { context: { mode: 'quadtree' } } }}
 	brush
 	legend
-	padding={defaultChartPadding({ right: 10 })}
+	padding={defaultChartPadding({ legend: true, right: 10 })}
 	height={300}
 >
 	{#snippet marks({ context, visibleSeries, highlightKey })}
diff --git a/docs/src/examples/components/Rule/data-x-band.svelte b/docs/src/examples/components/Rule/data-x-band.svelte
index 61e46717c..16115089d 100644
--- a/docs/src/examples/components/Rule/data-x-band.svelte
+++ b/docs/src/examples/components/Rule/data-x-band.svelte
@@ -37,14 +37,7 @@
 	export { data };
 </script>
 
-<Chart
-	{data}
-	x="letter"
-	y="frequency"
-	yNice
-	padding={{ top: 20, bottom: 20, left: 30, right: 20 }}
-	height={300}
->
+<Chart {data} x="letter" y="frequency" yNice padding={{ left: 25, bottom: 20 }} height={300}>
 	<Layer>
 		<Axis placement="bottom" rule />
 		<Axis placement="left" />
diff --git a/docs/src/examples/components/Tooltip/anchor-location.svelte b/docs/src/examples/components/Tooltip/anchor-location.svelte
index 36c62bc9e..64e39979b 100644
--- a/docs/src/examples/components/Tooltip/anchor-location.svelte
+++ b/docs/src/examples/components/Tooltip/anchor-location.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { ComponentProps } from 'svelte';
 
-	import { Area, Axis, Chart, Layer, Highlight, Tooltip } from 'layerchart';
+	import { Area, Axis, Chart, Layer, Highlight, Tooltip, defaultChartPadding } from 'layerchart';
 	import TooltipContextControls2 from '$lib/components/controls/TooltipContextControls2.svelte';
 
 	import { createDateSeries } from '$lib/utils/data.js';
@@ -29,7 +29,7 @@
 	y="value"
 	yDomain={[0, null]}
 	yNice
-	padding={{ top: 5, left: 28, bottom: 24 }}
+	padding={defaultChartPadding({ top: 5, left: 28, bottom: 24, right: 15 })}
 	tooltip={{ mode: 'quadtree-x' }}
 	height={300}
 >
diff --git a/docs/src/examples/components/Tooltip/area.svelte b/docs/src/examples/components/Tooltip/area.svelte
index 2c945c6c2..62c7228a1 100644
--- a/docs/src/examples/components/Tooltip/area.svelte
+++ b/docs/src/examples/components/Tooltip/area.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { ComponentProps } from 'svelte';
-	import { Area, Axis, Chart, Layer, Highlight, Tooltip } from 'layerchart';
+	import { Area, Axis, Chart, Layer, Highlight, Tooltip, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 	import TooltipContextControls from '$lib/components/controls/TooltipContextControls.svelte';
 
@@ -30,7 +30,7 @@
 	y="value"
 	yDomain={[0, null]}
 	yNice
-	padding={{ top: 5, left: 28, bottom: 24 }}
+	padding={defaultChartPadding({ top: 5, left: 28, bottom: 24, right: 15 })}
 	tooltip={{
 		mode: settings.mode
 	}}
diff --git a/docs/src/examples/components/Tooltip/basic.svelte b/docs/src/examples/components/Tooltip/basic.svelte
index a7a8d12e3..dc22fa324 100644
--- a/docs/src/examples/components/Tooltip/basic.svelte
+++ b/docs/src/examples/components/Tooltip/basic.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Area, Axis, Chart, Layer, Highlight, Tooltip } from 'layerchart';
+	import { Area, Axis, Chart, Layer, Highlight, Tooltip, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({
@@ -19,7 +19,7 @@
 	y="value"
 	yDomain={[0, null]}
 	yNice
-	padding={{ top: 5, left: 28, bottom: 24 }}
+	padding={defaultChartPadding({ top: 5, left: 28, bottom: 24, right: 15 })}
 	tooltip={{ mode: 'quadtree-x' }}
 	height={300}
 >
diff --git a/docs/src/examples/components/Tooltip/color-swatch-using-theme.svelte b/docs/src/examples/components/Tooltip/color-swatch-using-theme.svelte
index 1c150d3da..50c9efb5c 100644
--- a/docs/src/examples/components/Tooltip/color-swatch-using-theme.svelte
+++ b/docs/src/examples/components/Tooltip/color-swatch-using-theme.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Area, Axis, Chart, Layer, Highlight, Tooltip } from 'layerchart';
+	import { Area, Axis, Chart, Layer, Highlight, defaultChartPadding, Tooltip } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({
@@ -19,7 +19,7 @@
 	y="value"
 	yDomain={[0, null]}
 	yNice
-	padding={{ top: 5, left: 28, bottom: 24 }}
+	padding={defaultChartPadding({ top: 5, left: 28, bottom: 24, right: 15 })}
 	tooltip={{ mode: 'quadtree-x' }}
 	height={300}
 >
diff --git a/docs/src/examples/components/Tooltip/color-swatch.svelte b/docs/src/examples/components/Tooltip/color-swatch.svelte
index 40822bd90..39d22a8c9 100644
--- a/docs/src/examples/components/Tooltip/color-swatch.svelte
+++ b/docs/src/examples/components/Tooltip/color-swatch.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Area, Axis, Chart, Layer, Highlight, Tooltip } from 'layerchart';
+	import { Area, Axis, Chart, Layer, Highlight, Tooltip, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({
@@ -19,7 +19,7 @@
 	y="value"
 	yDomain={[0, null]}
 	yNice
-	padding={{ top: 5, left: 28, bottom: 24 }}
+	padding={defaultChartPadding({ top: 5, left: 28, bottom: 24, right: 15 })}
 	tooltip={{ mode: 'quadtree-x' }}
 	height={300}
 >
diff --git a/docs/src/examples/components/Tooltip/custom-content.svelte b/docs/src/examples/components/Tooltip/custom-content.svelte
index af58af344..8790a13e6 100644
--- a/docs/src/examples/components/Tooltip/custom-content.svelte
+++ b/docs/src/examples/components/Tooltip/custom-content.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Area, Axis, Chart, Layer, Highlight, Tooltip } from 'layerchart';
+	import { Area, Axis, Chart, Layer, Highlight, Tooltip, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({
@@ -19,7 +19,7 @@
 	y="value"
 	yDomain={[0, null]}
 	yNice
-	padding={{ top: 5, left: 28, bottom: 24 }}
+	padding={defaultChartPadding({ top: 5, left: 28, bottom: 24, right: 15 })}
 	tooltip={{ mode: 'quadtree-x' }}
 	height={300}
 >
diff --git a/docs/src/examples/components/Tooltip/data-snapping.svelte b/docs/src/examples/components/Tooltip/data-snapping.svelte
index 185c7ee24..eb58a13ac 100644
--- a/docs/src/examples/components/Tooltip/data-snapping.svelte
+++ b/docs/src/examples/components/Tooltip/data-snapping.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Area, Axis, Chart, Layer, Highlight, Tooltip } from 'layerchart';
+	import { Area, Axis, Chart, Layer, Highlight, Tooltip, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({
@@ -19,7 +19,7 @@
 	y="value"
 	yDomain={[0, null]}
 	yNice
-	padding={{ top: 5, left: 28, bottom: 24 }}
+	padding={defaultChartPadding({ top: 5, left: 28, bottom: 24, right: 15 })}
 	tooltip={{ mode: 'quadtree-x' }}
 	height={300}
 >
diff --git a/docs/src/examples/components/Tooltip/default-mouse-position-with-offset.svelte b/docs/src/examples/components/Tooltip/default-mouse-position-with-offset.svelte
index a7a8d12e3..dc22fa324 100644
--- a/docs/src/examples/components/Tooltip/default-mouse-position-with-offset.svelte
+++ b/docs/src/examples/components/Tooltip/default-mouse-position-with-offset.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Area, Axis, Chart, Layer, Highlight, Tooltip } from 'layerchart';
+	import { Area, Axis, Chart, Layer, Highlight, Tooltip, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({
@@ -19,7 +19,7 @@
 	y="value"
 	yDomain={[0, null]}
 	yNice
-	padding={{ top: 5, left: 28, bottom: 24 }}
+	padding={defaultChartPadding({ top: 5, left: 28, bottom: 24, right: 15 })}
 	tooltip={{ mode: 'quadtree-x' }}
 	height={300}
 >
diff --git a/docs/src/examples/components/Tooltip/disable-motion.svelte b/docs/src/examples/components/Tooltip/disable-motion.svelte
index 5cc899491..9b31ab8c3 100644
--- a/docs/src/examples/components/Tooltip/disable-motion.svelte
+++ b/docs/src/examples/components/Tooltip/disable-motion.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Area, Axis, Chart, Layer, Highlight, Tooltip } from 'layerchart';
+	import { Area, Axis, Chart, Layer, Highlight, Tooltip, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({
@@ -19,7 +19,7 @@
 	y="value"
 	yDomain={[0, null]}
 	yNice
-	padding={{ top: 5, left: 28, bottom: 24 }}
+	padding={defaultChartPadding({ top: 5, left: 28, bottom: 24, right: 15 })}
 	tooltip={{ mode: 'quadtree-x' }}
 	height={300}
 >
diff --git a/docs/src/examples/components/Tooltip/duration.svelte b/docs/src/examples/components/Tooltip/duration.svelte
index 774409037..a0c7bbbce 100644
--- a/docs/src/examples/components/Tooltip/duration.svelte
+++ b/docs/src/examples/components/Tooltip/duration.svelte
@@ -2,7 +2,16 @@
 	import type { ComponentProps } from 'svelte';
 
 	import { Duration } from 'svelte-ux';
-	import { Axis, Chart, Layer, Highlight, Points, Tooltip, Rule } from 'layerchart';
+	import {
+		Axis,
+		Chart,
+		Layer,
+		Highlight,
+		Points,
+		Tooltip,
+		Rule,
+		defaultChartPadding
+	} from 'layerchart';
 	import TooltipContextControls from '$lib/components/controls/TooltipContextControls.svelte';
 
 	import { createTimeSeries } from '$lib/utils/data.js';
@@ -31,10 +40,11 @@
 	{data}
 	x={['startDate', 'endDate']}
 	y="name"
-	padding={{ left: 36, bottom: 36 }}
+	xNice
 	tooltip={{
 		mode: settings.mode
 	}}
+	padding={defaultChartPadding({ left: 36, bottom: 36, right: 20 })}
 	height={300}
 >
 	<Layer>
diff --git a/docs/src/examples/components/Tooltip/externally-access-tooltip-data.svelte b/docs/src/examples/components/Tooltip/externally-access-tooltip-data.svelte
index 13b815b59..b714947e5 100644
--- a/docs/src/examples/components/Tooltip/externally-access-tooltip-data.svelte
+++ b/docs/src/examples/components/Tooltip/externally-access-tooltip-data.svelte
@@ -1,5 +1,14 @@
 <script lang="ts">
-	import { Area, Axis, Chart, Layer, Highlight, Tooltip, type ChartContextValue } from 'layerchart';
+	import {
+		Area,
+		Axis,
+		Chart,
+		Layer,
+		Highlight,
+		Tooltip,
+		defaultChartPadding,
+		type ChartContextValue
+	} from 'layerchart';
 	import { format } from '@layerstack/utils';
 	import { createDateSeries } from '$lib/utils/data.js';
 
@@ -33,7 +42,7 @@
 	y="value"
 	yDomain={[0, null]}
 	yNice
-	padding={{ top: 5, left: 28, bottom: 24 }}
+	padding={defaultChartPadding({ top: 5, left: 28, bottom: 24, right: 15 })}
 	tooltip={{ mode: 'quadtree-x' }}
 	bind:context
 	height={300}
diff --git a/docs/src/examples/components/Tooltip/invert-variant.svelte b/docs/src/examples/components/Tooltip/invert-variant.svelte
index 1c32a5c44..0bcd1e1b1 100644
--- a/docs/src/examples/components/Tooltip/invert-variant.svelte
+++ b/docs/src/examples/components/Tooltip/invert-variant.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Area, Axis, Chart, Layer, Highlight, Tooltip } from 'layerchart';
+	import { Area, Axis, Chart, Layer, Highlight, Tooltip, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({
@@ -19,7 +19,7 @@
 	y="value"
 	yDomain={[0, null]}
 	yNice
-	padding={{ top: 5, left: 28, bottom: 24 }}
+	padding={defaultChartPadding({ top: 5, left: 28, bottom: 24, right: 15 })}
 	tooltip={{ mode: 'quadtree-x' }}
 	height={300}
 >
diff --git a/docs/src/examples/components/Tooltip/multiple-overlapping-durations.svelte b/docs/src/examples/components/Tooltip/multiple-overlapping-durations.svelte
index 58e3a16f6..d2057a005 100644
--- a/docs/src/examples/components/Tooltip/multiple-overlapping-durations.svelte
+++ b/docs/src/examples/components/Tooltip/multiple-overlapping-durations.svelte
@@ -1,6 +1,15 @@
 <script lang="ts">
 	import type { ComponentProps } from 'svelte';
-	import { Axis, Chart, Layer, Highlight, Points, Rule, Tooltip } from 'layerchart';
+	import {
+		Axis,
+		Chart,
+		Layer,
+		Highlight,
+		Points,
+		Rule,
+		Tooltip,
+		defaultChartPadding
+	} from 'layerchart';
 
 	import { Duration } from 'svelte-ux';
 	import TooltipContextControls from '$lib/components/controls/TooltipContextControls.svelte';
@@ -30,10 +39,11 @@
 	{data}
 	x={['startDate', 'endDate']}
 	y="name"
-	padding={{ left: 36, bottom: 36 }}
+	xNice
 	tooltip={{
 		mode: settings.mode
 	}}
+	padding={defaultChartPadding({ left: 36, bottom: 36, right: 20 })}
 	height={300}
 >
 	<Layer>
diff --git a/docs/src/examples/components/Tooltip/multiple-tooltips-with-fixed-single-axis.svelte b/docs/src/examples/components/Tooltip/multiple-tooltips-with-fixed-single-axis.svelte
index f10d0fec9..8bf39c1f5 100644
--- a/docs/src/examples/components/Tooltip/multiple-tooltips-with-fixed-single-axis.svelte
+++ b/docs/src/examples/components/Tooltip/multiple-tooltips-with-fixed-single-axis.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Area, Axis, Chart, Layer, Highlight, Tooltip } from 'layerchart';
+	import { Area, Axis, Chart, Layer, Highlight, Tooltip, defaultChartPadding } from 'layerchart';
 	import { format } from '@layerstack/utils';
 	import { createDateSeries } from '$lib/utils/data.js';
 
@@ -20,7 +20,7 @@
 	y="value"
 	yDomain={[0, null]}
 	yNice
-	padding={{ top: 5, left: 28, bottom: 24 }}
+	padding={defaultChartPadding({ top: 5, left: 28, bottom: 24, right: 15 })}
 	tooltip={{ mode: 'quadtree-x' }}
 	height={300}
 >
diff --git a/docs/src/examples/components/Tooltip/scatter-plot.svelte b/docs/src/examples/components/Tooltip/scatter-plot.svelte
index c2a360b23..8cb4adb9c 100644
--- a/docs/src/examples/components/Tooltip/scatter-plot.svelte
+++ b/docs/src/examples/components/Tooltip/scatter-plot.svelte
@@ -25,6 +25,8 @@
 	{data}
 	x="x"
 	y="y"
+	xNice
+	yNice
 	padding={{ left: 30, bottom: 30 }}
 	tooltip={{
 		mode: settings.mode
diff --git a/docs/src/examples/components/Tooltip/single-date-time.svelte b/docs/src/examples/components/Tooltip/single-date-time.svelte
index 20fd4a603..51d56c00c 100644
--- a/docs/src/examples/components/Tooltip/single-date-time.svelte
+++ b/docs/src/examples/components/Tooltip/single-date-time.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { ComponentProps } from 'svelte';
-	import { Axis, Chart, Layer, Highlight, Points, Tooltip } from 'layerchart';
+	import { Axis, Chart, Layer, Highlight, Points, Tooltip, defaultChartPadding } from 'layerchart';
 	import { createTimeSeries } from '$lib/utils/data.js';
 	import TooltipContextControls from '$lib/components/controls/TooltipContextControls.svelte';
 
@@ -28,7 +28,9 @@
 	{data}
 	x="startDate"
 	y="name"
-	padding={{ left: 36, bottom: 36 }}
+	xNice
+	yNice
+	padding={defaultChartPadding({ left: 36, bottom: 36, right: 20 })}
 	tooltip={{
 		mode: settings.mode
 	}}
diff --git a/docs/src/examples/components/Tooltip/stacked-area.svelte b/docs/src/examples/components/Tooltip/stacked-area.svelte
index 67dd20616..d030b76ea 100644
--- a/docs/src/examples/components/Tooltip/stacked-area.svelte
+++ b/docs/src/examples/components/Tooltip/stacked-area.svelte
@@ -1,7 +1,16 @@
 <script lang="ts">
 	import type { ComponentProps } from 'svelte';
 	import { stack } from 'd3-shape';
-	import { Area, asAny, Axis, Chart, Layer, Highlight, Tooltip } from 'layerchart';
+	import {
+		Area,
+		asAny,
+		Axis,
+		Chart,
+		Layer,
+		Highlight,
+		Tooltip,
+		defaultChartPadding
+	} from 'layerchart';
 	import { flatten } from '@layerstack/utils';
 	import { createDateSeries } from '$lib/utils/data.js';
 	import TooltipContextControls from '$lib/components/controls/TooltipContextControls.svelte';
@@ -38,7 +47,7 @@
 	c="key"
 	cDomain={keys}
 	cRange={['var(--color-apples)', 'var(--color-bananas)', 'var(--color-oranges)']}
-	padding={{ top: 5, left: 28, bottom: 24 }}
+	padding={defaultChartPadding({ top: 5, left: 28, bottom: 24, right: 15 })}
 	tooltip={{
 		mode: settings.mode
 	}}