padding-all-marks

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';

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' });

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' });

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' });

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({

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({

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}
 >

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'];

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'];

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 })}

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>

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 })}

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({

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({

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({

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({

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' });

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' });