diff --git a/docs/src/examples/components/Area/clip-tween-on-mount.svelte b/docs/src/examples/components/Area/clip-tween-on-mount.svelte
index bceadb0c0..2ffb9a09c 100644
--- a/docs/src/examples/components/Area/clip-tween-on-mount.svelte
+++ b/docs/src/examples/components/Area/clip-tween-on-mount.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cubicInOut } from 'svelte/easing';
 	import { Area, Axis, Chart, ChartClipPath, Layer } from 'layerchart';
+	import { cubicInOut } from 'svelte/easing';
 	import ShowControl from '$lib/components/controls/fields/ShowField.svelte';
 
 	import { createDateSeries } from '$lib/utils/data.js';
diff --git a/docs/src/examples/components/Area/explicit-axis-ticks-min-max.svelte b/docs/src/examples/components/Area/explicit-axis-ticks-min-max.svelte
index eb018a552..a743abdc1 100644
--- a/docs/src/examples/components/Area/explicit-axis-ticks-min-max.svelte
+++ b/docs/src/examples/components/Area/explicit-axis-ticks-min-max.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { Area, Axis, Chart, Layer, Text } from 'layerchart';
-
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' });
diff --git a/docs/src/examples/components/Area/gradient-separate-stroke.svelte b/docs/src/examples/components/Area/gradient-separate-stroke.svelte
index 4c42998fe..2d43beb60 100644
--- a/docs/src/examples/components/Area/gradient-separate-stroke.svelte
+++ b/docs/src/examples/components/Area/gradient-separate-stroke.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { Area, Axis, Chart, Layer, LinearGradient } from 'layerchart';
-
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' });
diff --git a/docs/src/examples/components/Area/gradient.svelte b/docs/src/examples/components/Area/gradient.svelte
index 6e388550b..1a1f58b71 100644
--- a/docs/src/examples/components/Area/gradient.svelte
+++ b/docs/src/examples/components/Area/gradient.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { Area, Axis, Chart, Layer, LinearGradient } from 'layerchart';
-
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' });
diff --git a/docs/src/examples/components/Area/highlight-color-based-on-value-using-color-scale.svelte b/docs/src/examples/components/Area/highlight-color-based-on-value-using-color-scale.svelte
index a8221fd76..af9cfffea 100644
--- a/docs/src/examples/components/Area/highlight-color-based-on-value-using-color-scale.svelte
+++ b/docs/src/examples/components/Area/highlight-color-based-on-value-using-color-scale.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { Area, Axis, Chart, Highlight, Layer, RectClipPath, Rule, Tooltip } from 'layerchart';
-
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({
diff --git a/docs/src/examples/components/Area/highlight-color-based-on-value-using-tooltip-slot-prop.svelte b/docs/src/examples/components/Area/highlight-color-based-on-value-using-tooltip-slot-prop.svelte
index 302ed6784..c9e0c9efe 100644
--- a/docs/src/examples/components/Area/highlight-color-based-on-value-using-tooltip-slot-prop.svelte
+++ b/docs/src/examples/components/Area/highlight-color-based-on-value-using-tooltip-slot-prop.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { Area, Axis, Chart, Highlight, Layer, RectClipPath, Rule, Tooltip } from 'layerchart';
-
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({
diff --git a/docs/src/examples/components/Area/multiple-series-highlight-on-hover.svelte b/docs/src/examples/components/Area/multiple-series-highlight-on-hover.svelte
index 9e6389b85..47359cb68 100644
--- a/docs/src/examples/components/Area/multiple-series-highlight-on-hover.svelte
+++ b/docs/src/examples/components/Area/multiple-series-highlight-on-hover.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { flatGroup } from 'd3-array';
 	import {
 		Area,
 		Axis,
@@ -10,10 +9,11 @@
 		Point,
 		Text,
 		Tooltip,
+		defaultChartPadding,
 		pivotLonger
 	} from 'layerchart';
+	import { flatGroup } from 'd3-array';
 	import { cls } from '@layerstack/tailwind';
-
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const keys = ['apples', 'bananas', 'oranges'];
@@ -46,7 +46,7 @@
 	c="fruit"
 	cDomain={Object.keys(fruitColors)}
 	cRange={Object.values(fruitColors)}
-	padding={{ top: 20, left: 20, right: 48, bottom: 20 }}
+	padding={{ ...defaultChartPadding, top: 10, bottom: 20, left: 20, right: 60 }}
 	tooltip={{ mode: 'quadtree' }}
 	height={300}
 >
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 24622b288..6705f07bb 100644
--- a/docs/src/examples/components/Area/multiple-series-using-overrides.svelte
+++ b/docs/src/examples/components/Area/multiple-series-using-overrides.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { Area, Axis, Chart, Highlight, Layer, Tooltip } from 'layerchart';
-
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const keys = ['apples', 'bananas', 'oranges'];
diff --git a/docs/src/examples/components/Area/multiple-series-with-labels.svelte b/docs/src/examples/components/Area/multiple-series-with-labels.svelte
index 0b4e35a86..542b5709e 100644
--- a/docs/src/examples/components/Area/multiple-series-with-labels.svelte
+++ b/docs/src/examples/components/Area/multiple-series-with-labels.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { flatGroup } from 'd3-array';
 	import { Area, Axis, Chart, Highlight, Labels, Layer, Tooltip, pivotLonger } from 'layerchart';
-
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const keys = ['apples', 'bananas', 'oranges'];
diff --git a/docs/src/examples/components/Area/multiple-series.svelte b/docs/src/examples/components/Area/multiple-series.svelte
index 44a64a2bb..f85779802 100644
--- a/docs/src/examples/components/Area/multiple-series.svelte
+++ b/docs/src/examples/components/Area/multiple-series.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { flatGroup } from 'd3-array';
 	import {
 		Area,
 		Axis,
@@ -10,9 +9,10 @@
 		Point,
 		Text,
 		Tooltip,
+		defaultChartPadding,
 		pivotLonger
 	} from 'layerchart';
-
+	import { flatGroup } from 'd3-array';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const keys = ['apples', 'bananas', 'oranges'];
@@ -45,8 +45,8 @@
 	c="fruit"
 	cDomain={Object.keys(fruitColors)}
 	cRange={Object.values(fruitColors)}
-	padding={{ top: 20, left: 20, bottom: 20, right: 48 }}
 	tooltip={{ mode: 'quadtree' }}
+	padding={{ ...defaultChartPadding, top: 10, bottom: 10, left: 20, right: 60 }}
 	height={300}
 >
 	{#snippet children({ context })}
diff --git a/docs/src/examples/components/Area/stack-with-gradient.svelte b/docs/src/examples/components/Area/stack-with-gradient.svelte
index 765ffa989..de432050a 100644
--- a/docs/src/examples/components/Area/stack-with-gradient.svelte
+++ b/docs/src/examples/components/Area/stack-with-gradient.svelte
@@ -1,9 +1,17 @@
 <script lang="ts">
+	import {
+		Area,
+		Axis,
+		Chart,
+		Layer,
+		LinearGradient,
+		asAny,
+		chartDataArray,
+		defaultChartPadding
+	} from 'layerchart';
 	import { stack, type Series } from 'd3-shape';
-	import { Area, Axis, Chart, Layer, LinearGradient, asAny, chartDataArray } from 'layerchart';
-
-	import { createDateSeries } from '$lib/utils/data.js';
 	import flatten from '$lib/utils/flatten.js';
+	import { createDateSeries } from '$lib/utils/data.js';
 
 	const keys = ['apples', 'bananas', 'oranges'];
 
@@ -33,7 +41,7 @@
 	x={(d) => asAny(d).data.date}
 	y={[0, 1]}
 	yNice
-	padding={20}
+	padding={{ ...defaultChartPadding, left: 25, bottom: 20 }}
 	height={300}
 >
 	<Layer>
diff --git a/docs/src/examples/components/Area/stack.svelte b/docs/src/examples/components/Area/stack.svelte
index de51a496b..c31740b31 100644
--- a/docs/src/examples/components/Area/stack.svelte
+++ b/docs/src/examples/components/Area/stack.svelte
@@ -1,9 +1,17 @@
 <script lang="ts">
+	import {
+		Area,
+		Axis,
+		Chart,
+		Highlight,
+		Layer,
+		Tooltip,
+		asAny,
+		defaultChartPadding
+	} from 'layerchart';
 	import { stack, type Series } from 'd3-shape';
-	import { Area, Axis, Chart, Highlight, Layer, Tooltip, asAny } from 'layerchart';
-
-	import { createDateSeries } from '$lib/utils/data.js';
 	import flatten from '$lib/utils/flatten.js';
+	import { createDateSeries } from '$lib/utils/data.js';
 
 	const keys = ['apples', 'bananas', 'oranges'];
 	const multiSeriesData = createDateSeries({
@@ -41,8 +49,8 @@
 	c="key"
 	cDomain={Object.keys(fruitColors)}
 	cRange={Object.values(fruitColors)}
-	padding={20}
 	tooltip={{ mode: 'quadtree-x' }}
+	padding={{ ...defaultChartPadding, left: 25, bottom: 20 }}
 	height={300}
 >
 	{#snippet children({ context })}
diff --git a/docs/src/examples/components/Area/threshold-with-lineargradient-over-under.svelte b/docs/src/examples/components/Area/threshold-with-lineargradient-over-under.svelte
index afa8b90e9..3b5666637 100644
--- a/docs/src/examples/components/Area/threshold-with-lineargradient-over-under.svelte
+++ b/docs/src/examples/components/Area/threshold-with-lineargradient-over-under.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { Area, Axis, Chart, Layer, LinearGradient, Rule } from 'layerchart';
-
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({
diff --git a/docs/src/examples/components/Area/threshold-with-lineargradient.svelte b/docs/src/examples/components/Area/threshold-with-lineargradient.svelte
index 3b53c9376..a3f0522d5 100644
--- a/docs/src/examples/components/Area/threshold-with-lineargradient.svelte
+++ b/docs/src/examples/components/Area/threshold-with-lineargradient.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { Area, Axis, Chart, Layer, LinearGradient, Rule } from 'layerchart';
-
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({
diff --git a/docs/src/examples/components/Area/threshold-with-rectclippath-over-under.svelte b/docs/src/examples/components/Area/threshold-with-rectclippath-over-under.svelte
index ee1131ff6..245b4d259 100644
--- a/docs/src/examples/components/Area/threshold-with-rectclippath-over-under.svelte
+++ b/docs/src/examples/components/Area/threshold-with-rectclippath-over-under.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { Area, Axis, Chart, Layer, RectClipPath, Rule } from 'layerchart';
-
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({
diff --git a/docs/src/examples/components/Area/threshold-with-rectclippath.svelte b/docs/src/examples/components/Area/threshold-with-rectclippath.svelte
index 94a3e23de..e6089e98e 100644
--- a/docs/src/examples/components/Area/threshold-with-rectclippath.svelte
+++ b/docs/src/examples/components/Area/threshold-with-rectclippath.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { Area, Axis, Chart, Layer, RectClipPath, Rule } from 'layerchart';
-
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({
diff --git a/docs/src/examples/components/Area/with-labels.svelte b/docs/src/examples/components/Area/with-labels.svelte
index 4af21290e..5cd75a0de 100644
--- a/docs/src/examples/components/Area/with-labels.svelte
+++ b/docs/src/examples/components/Area/with-labels.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { Area, Axis, Chart, Labels, Layer } from 'layerchart';
-
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' });
diff --git a/docs/src/examples/components/Area/with-tooltip-and-highlight.svelte b/docs/src/examples/components/Area/with-tooltip-and-highlight.svelte
index 285c039e3..48a983388 100644
--- a/docs/src/examples/components/Area/with-tooltip-and-highlight.svelte
+++ b/docs/src/examples/components/Area/with-tooltip-and-highlight.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { Area, Axis, Chart, Highlight, Layer, Tooltip } from 'layerchart';
-
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' });