diff --git a/docs/src/examples/components/Chart/compound-dual-axis-with-single-chart-using-remapped-scale.svelte b/docs/src/examples/components/Chart/compound-dual-axis-with-single-chart-using-remapped-scale.svelte
index d408945b3..7de2ae1f6 100644
--- a/docs/src/examples/components/Chart/compound-dual-axis-with-single-chart-using-remapped-scale.svelte
+++ b/docs/src/examples/components/Chart/compound-dual-axis-with-single-chart-using-remapped-scale.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { scaleLinear } from 'd3-scale';
 	import { Axis, Chart, Highlight, Layer, Spline, Tooltip } from 'layerchart';
+	import { scaleLinear } from 'd3-scale';
 	import { getNewPassengerCars } from '$lib/data.remote.js';
 
 	const data = await getNewPassengerCars();
diff --git a/docs/src/examples/components/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks.svelte b/docs/src/examples/components/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks.svelte
index 9688abb1b..07092f342 100644
--- a/docs/src/examples/components/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks.svelte
+++ b/docs/src/examples/components/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { BarChart, Spline, Tooltip } from 'layerchart';
+	import { BarChart, Spline, Tooltip, defaultChartPadding } from 'layerchart';
 	import { getAppleTicker } from '$lib/data.remote.js';
 
 	const data = await getAppleTicker();
@@ -15,11 +15,11 @@
 		yNice
 		axis={false}
 		grid={false}
-		padding={{ left: 16, bottom: 16 }}
-		height={300}
 		props={{
 			bars: { radius: 1, class: 'stroke-none fill-surface-content/10' }
 		}}
+		padding={{ ...defaultChartPadding(), left: 25 }}
+		height={300}
 	/>
 
 	<!-- Second chart (line), responsible for tooltip -->
@@ -29,12 +29,12 @@
 		y={['open', 'close']}
 		yNice
 		yDomain={null}
-		padding={{ left: 16, bottom: 16 }}
 		height={300}
 		props={{
 			xAxis: { ticks: 10, rule: true },
 			tooltip: { context: { mode: 'band' } }
 		}}
+		padding={{ ...defaultChartPadding(), left: 25 }}
 	>
 		{#snippet marks()}
 			<Spline y="open" class="stroke-primary" />
diff --git a/docs/src/examples/components/Chart/compound-separate-scales-with-stacked-charts-with-inverted-range-top-down.svelte b/docs/src/examples/components/Chart/compound-separate-scales-with-stacked-charts-with-inverted-range-top-down.svelte
index bea177fdf..b18431a07 100644
--- a/docs/src/examples/components/Chart/compound-separate-scales-with-stacked-charts-with-inverted-range-top-down.svelte
+++ b/docs/src/examples/components/Chart/compound-separate-scales-with-stacked-charts-with-inverted-range-top-down.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
+	import { Axis, BarChart, Tooltip, defaultChartPadding } from 'layerchart';
+	1;
 	import { scaleTime } from 'd3-scale';
 	import { extent } from 'd3-array';
-	import { Axis, BarChart, Tooltip } from 'layerchart';
 	import { getHydro } from '$lib/data.remote.js';
 
 	const data = await getHydro();
@@ -31,7 +32,6 @@
 		{data}
 		x="date"
 		yDomain={[0, 1000]}
-		padding={{ left: 32, right: 32, bottom: 20 }}
 		series={[
 			{
 				key: 'infiltration',
@@ -59,6 +59,7 @@
 			}
 		]}
 		seriesLayout="stack"
+		padding={{ ...defaultChartPadding(), top: 20, bottom: 30, right: 32, left: 32 }}
 		height={300}
 	>
 		{#snippet axis({ context })}