From 7dbf7ec4fe776262279d3e7391ea5feb9c821ee5 Mon Sep 17 00:00:00 2001
From: Scott Rhamy <scott@rhamy.com>
Date: Sat, 6 Dec 2025 16:41:35 -0500
Subject: [PATCH] LineChart-padding

- used {...defaultChartPadding} + customs
- "axis-labels-inside" added y rule to call attention to labels inside, added xpadding and yNice.
- "oscilloscope-time" - added gradient
- "series-veritical" and "vertical" centered
---
 .../LineChart/axis-labels-inside.svelte       | 15 +++---
 .../components/LineChart/basic.svelte         | 10 +++-
 .../components/LineChart/brush.svelte         |  3 +-
 .../components/LineChart/curve.svelte         | 11 ++++-
 .../LineChart/custom-tooltip.svelte           |  4 +-
 .../components/LineChart/custom.svelte        | 12 ++++-
 .../LineChart/default-series-label.svelte     | 10 +++-
 .../examples/components/LineChart/draw.svelte | 10 +++-
 .../components/LineChart/dynamic-data.svelte  |  3 +-
 .../LineChart/gradient-encoding.svelte        |  2 +-
 .../LineChart/labels-with-points.svelte       | 13 ++++-
 .../LineChart/labels-within-points.svelte     |  6 ++-
 .../components/LineChart/labels.svelte        | 11 ++++-
 .../LineChart/large-radial-series.svelte      |  3 +-
 .../components/LineChart/large-series.svelte  |  3 +-
 .../components/LineChart/legend.svelte        |  3 +-
 .../LineChart/line-annotation.svelte          |  5 +-
 .../LineChart/null-dashed-gaps.svelte         |  4 +-
 .../components/LineChart/null-gaps.svelte     | 11 ++++-
 .../LineChart/oscilloscope-time.svelte        | 48 ++++++++++++++-----
 .../LineChart/override-color.svelte           |  3 +-
 .../LineChart/point-annotations.svelte        |  3 +-
 .../components/LineChart/points.svelte        | 12 ++++-
 .../components/LineChart/radar-rounded.svelte |  4 +-
 .../components/LineChart/radar-series.svelte  |  3 +-
 .../LineChart/range-annotation.svelte         |  5 +-
 .../components/LineChart/series-brush.svelte  |  3 +-
 .../series-custom-highlight-point.svelte      |  3 +-
 .../series-individual-tooltip.svelte          | 10 +++-
 .../LineChart/series-point-click.svelte       |  3 +-
 .../series-separate-data-diff-length.svelte   |  3 +-
 .../LineChart/series-separate-data.svelte     |  3 +-
 .../LineChart/series-vertical.svelte          | 41 ++++++++--------
 .../LineChart/series-with-nulls.svelte        |  3 +-
 .../components/LineChart/series.svelte        |  3 +-
 .../components/LineChart/single-axis-x.svelte | 11 ++++-
 .../components/LineChart/single-axis-y.svelte | 11 ++++-
 .../components/LineChart/tooltip-click.svelte |  5 +-
 .../components/LineChart/vertical.svelte      |  4 +-
 39 files changed, 227 insertions(+), 93 deletions(-)

diff --git a/docs/src/examples/components/LineChart/axis-labels-inside.svelte b/docs/src/examples/components/LineChart/axis-labels-inside.svelte
index 690bb538d..aeceb5f34 100644
--- a/docs/src/examples/components/LineChart/axis-labels-inside.svelte
+++ b/docs/src/examples/components/LineChart/axis-labels-inside.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { LineChart } from 'layerchart';
+	import { LineChart, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' });
@@ -10,19 +10,18 @@
 	{data}
 	x="date"
 	y="value"
+	xNice
 	height={300}
 	props={{
 		yAxis: {
 			tickLabelProps: {
 				textAnchor: 'start',
-				verticalAnchor: 'end'
+				verticalAnchor: 'end',
+				dx: 4
 			},
-			tickLength: 0
+			tickLength: 0,
+			rule: true
 		}
 	}}
-	padding={{
-		left: 0,
-		top: 10,
-		bottom: 24
-	}}
+	padding={{ ...defaultChartPadding(), top: 15, right: 10 }}
 />
diff --git a/docs/src/examples/components/LineChart/basic.svelte b/docs/src/examples/components/LineChart/basic.svelte
index 19e613f0f..ca504e931 100644
--- a/docs/src/examples/components/LineChart/basic.svelte
+++ b/docs/src/examples/components/LineChart/basic.svelte
@@ -1,9 +1,15 @@
 <script lang="ts">
-	import { LineChart } from 'layerchart';
+	import { LineChart, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' });
 	export { data };
 </script>
 
-<LineChart {data} x="date" y="value" height={300} />
+<LineChart
+	{data}
+	x="date"
+	y="value"
+	padding={{ ...defaultChartPadding(), right: 10 }}
+	height={300}
+/>
diff --git a/docs/src/examples/components/LineChart/brush.svelte b/docs/src/examples/components/LineChart/brush.svelte
index f19c8b562..6694984f9 100644
--- a/docs/src/examples/components/LineChart/brush.svelte
+++ b/docs/src/examples/components/LineChart/brush.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
+	import { LineChart, defaultChartPadding } from 'layerchart';
 	import { getAppleStock } from '$lib/data.remote';
-	import { LineChart } from 'layerchart';
 
 	const data = await getAppleStock();
 	export { data };
@@ -15,5 +15,6 @@
 		spline: { motion: { type: 'tween', duration: 200 } },
 		xAxis: { motion: { type: 'tween', duration: 200 }, tickMultiline: true }
 	}}
+	padding={{ ...defaultChartPadding(), left: 25 }}
 	height={300}
 />
diff --git a/docs/src/examples/components/LineChart/curve.svelte b/docs/src/examples/components/LineChart/curve.svelte
index 1d836b1a9..ed45cf4aa 100644
--- a/docs/src/examples/components/LineChart/curve.svelte
+++ b/docs/src/examples/components/LineChart/curve.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { LineChart } from 'layerchart';
+	import { LineChart, defaultChartPadding } from 'layerchart';
 	import { curveCatmullRom } from 'd3-shape';
 	import { createDateSeries } from '$lib/utils/data.js';
 
@@ -7,4 +7,11 @@
 	export { data };
 </script>
 
-<LineChart {data} x="date" y="value" height={300} props={{ spline: { curve: curveCatmullRom } }} />
+<LineChart
+	{data}
+	x="date"
+	y="value"
+	props={{ spline: { curve: curveCatmullRom } }}
+	padding={{ ...defaultChartPadding(), right: 10 }}
+	height={300}
+/>
diff --git a/docs/src/examples/components/LineChart/custom-tooltip.svelte b/docs/src/examples/components/LineChart/custom-tooltip.svelte
index cae0ee067..7463004aa 100644
--- a/docs/src/examples/components/LineChart/custom-tooltip.svelte
+++ b/docs/src/examples/components/LineChart/custom-tooltip.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { LineChart, Tooltip } from 'layerchart';
+	import { LineChart, Tooltip, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 	import { format } from '@layerstack/utils';
 
@@ -7,7 +7,7 @@
 	export { data };
 </script>
 
-<LineChart {data} x="date" y="value" height={300}>
+<LineChart {data} x="date" y="value" padding={{ ...defaultChartPadding(), right: 10 }} height={300}>
 	{#snippet tooltip({ context })}
 		<Tooltip.Root
 			x={context.padding.left}
diff --git a/docs/src/examples/components/LineChart/custom.svelte b/docs/src/examples/components/LineChart/custom.svelte
index d6f6b38cf..8066b94a3 100644
--- a/docs/src/examples/components/LineChart/custom.svelte
+++ b/docs/src/examples/components/LineChart/custom.svelte
@@ -1,5 +1,13 @@
 <script lang="ts">
-	import { Axis, Highlight, Layer, LineChart, Spline, Tooltip } from 'layerchart';
+	import {
+		LineChart,
+		Axis,
+		Highlight,
+		Layer,
+		defaultChartPadding,
+		Spline,
+		Tooltip
+	} from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 	import { format } from '@layerstack/utils';
 
@@ -7,7 +15,7 @@
 	export { data };
 </script>
 
-<LineChart {data} x="date" y="value" height={300}>
+<LineChart {data} x="date" y="value" padding={{ ...defaultChartPadding(), right: 10 }} height={300}>
 	{#snippet children({ context })}
 		<Layer>
 			<Axis placement="left" grid rule />
diff --git a/docs/src/examples/components/LineChart/default-series-label.svelte b/docs/src/examples/components/LineChart/default-series-label.svelte
index 969fe2792..1a977daa6 100644
--- a/docs/src/examples/components/LineChart/default-series-label.svelte
+++ b/docs/src/examples/components/LineChart/default-series-label.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { LineChart } from 'layerchart';
+	import { LineChart, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' }).map((d) => {
@@ -11,4 +11,10 @@
 	export { data };
 </script>
 
-<LineChart {data} x="date" y="visits" height={300} />
+<LineChart
+	{data}
+	x="date"
+	y="visits"
+	padding={{ ...defaultChartPadding(), right: 10 }}
+	height={300}
+/>
diff --git a/docs/src/examples/components/LineChart/draw.svelte b/docs/src/examples/components/LineChart/draw.svelte
index de5ee4ac4..b635d97d1 100644
--- a/docs/src/examples/components/LineChart/draw.svelte
+++ b/docs/src/examples/components/LineChart/draw.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { LineChart } from 'layerchart';
+	import { LineChart, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 	import { slide } from 'svelte/transition';
 	import ShowControls from '$lib/components/controls/fields/ShowField.svelte';
@@ -14,6 +14,12 @@
 
 <div class="h-[300px]">
 	{#if show}
-		<LineChart {data} x="date" y="value" props={{ spline: { draw: true } }} />
+		<LineChart
+			{data}
+			x="date"
+			y="value"
+			padding={{ ...defaultChartPadding(), right: 10 }}
+			props={{ spline: { draw: true } }}
+		/>
 	{/if}
 </div>
diff --git a/docs/src/examples/components/LineChart/dynamic-data.svelte b/docs/src/examples/components/LineChart/dynamic-data.svelte
index 623995623..519492ee6 100644
--- a/docs/src/examples/components/LineChart/dynamic-data.svelte
+++ b/docs/src/examples/components/LineChart/dynamic-data.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { LineChart } from 'layerchart';
+	import { LineChart, defaultChartPadding } from 'layerchart';
 	import { ticks } from 'd3-array';
 
 	let data = $state(ticks(-2, 2, 200).map(Math.sin));
@@ -36,6 +36,7 @@
 			//   },
 			// },
 		}}
+		padding={{ ...defaultChartPadding(), right: 10 }}
 		height={300}
 	/>
 </div>
diff --git a/docs/src/examples/components/LineChart/gradient-encoding.svelte b/docs/src/examples/components/LineChart/gradient-encoding.svelte
index efef3ae43..6083373de 100644
--- a/docs/src/examples/components/LineChart/gradient-encoding.svelte
+++ b/docs/src/examples/components/LineChart/gradient-encoding.svelte
@@ -7,11 +7,11 @@
 	import { interpolateTurbo } from 'd3-scale-chromatic';
 
 	const data = await getDailyTemperature();
-	export { data };
 
 	const temperatureColor = $derived(
 		scaleSequential(extent(data, (d) => d.value as number) as [number, number], interpolateTurbo)
 	);
+	export { data };
 </script>
 
 <LineChart {data} x="date" y="value" yDomain={null} height={300}>
diff --git a/docs/src/examples/components/LineChart/labels-with-points.svelte b/docs/src/examples/components/LineChart/labels-with-points.svelte
index 7d233a204..15e788a8b 100644
--- a/docs/src/examples/components/LineChart/labels-with-points.svelte
+++ b/docs/src/examples/components/LineChart/labels-with-points.svelte
@@ -1,9 +1,18 @@
 <script lang="ts">
-	import { LineChart } from 'layerchart';
+	import { LineChart, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' });
 	export { data };
 </script>
 
-<LineChart {data} x="date" y="value" height={300} points labels={{ offset: 10 }} />
+<LineChart
+	{data}
+	x="date"
+	y="value"
+	xNice
+	padding={{ ...defaultChartPadding(), top: 25, right: 10 }}
+	height={300}
+	points
+	labels={{ offset: 10 }}
+/>
diff --git a/docs/src/examples/components/LineChart/labels-within-points.svelte b/docs/src/examples/components/LineChart/labels-within-points.svelte
index 9d4496438..bc79d7bdd 100644
--- a/docs/src/examples/components/LineChart/labels-within-points.svelte
+++ b/docs/src/examples/components/LineChart/labels-within-points.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { LineChart } from 'layerchart';
+	import { LineChart, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' });
@@ -10,7 +10,7 @@
 	{data}
 	x="date"
 	y="value"
-	height={300}
+	xNice
 	points={{ r: 12 }}
 	labels={{ placement: 'center', class: 'text-xs fill-surface-300' }}
 	props={{
@@ -18,4 +18,6 @@
 			points: false
 		}
 	}}
+	padding={{ ...defaultChartPadding(), top: 25, right: 10 }}
+	height={300}
 />
diff --git a/docs/src/examples/components/LineChart/labels.svelte b/docs/src/examples/components/LineChart/labels.svelte
index 06ee42b7e..22d0d34b9 100644
--- a/docs/src/examples/components/LineChart/labels.svelte
+++ b/docs/src/examples/components/LineChart/labels.svelte
@@ -1,9 +1,16 @@
 <script lang="ts">
-	import { LineChart } from 'layerchart';
+	import { LineChart, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' });
 	export { data };
 </script>
 
-<LineChart {data} x="date" y="value" height={300} labels={{ offset: 10 }} />
+<LineChart
+	{data}
+	x="date"
+	y="value"
+	padding={{ ...defaultChartPadding(), right: 10, top: 25 }}
+	height={300}
+	labels={{ offset: 10 }}
+/>
diff --git a/docs/src/examples/components/LineChart/large-radial-series.svelte b/docs/src/examples/components/LineChart/large-radial-series.svelte
index 90a6678c3..c82493513 100644
--- a/docs/src/examples/components/LineChart/large-radial-series.svelte
+++ b/docs/src/examples/components/LineChart/large-radial-series.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { LineChart } from 'layerchart';
+	import { LineChart, defaultChartPadding } from 'layerchart';
 	import { flatGroup } from 'd3-array';
 	import { getDailyTemperatures } from '$lib/data.remote';
 
@@ -35,5 +35,6 @@
 			props: { opacity: year === 2024 ? 1 : year === 2023 ? 0.5 : 0.1 }
 		};
 	})}
+	padding={{ ...defaultChartPadding(), top: 15, bottom: 15 }}
 	height={500}
 />
diff --git a/docs/src/examples/components/LineChart/large-series.svelte b/docs/src/examples/components/LineChart/large-series.svelte
index 5e3ae99db..8be9e430c 100644
--- a/docs/src/examples/components/LineChart/large-series.svelte
+++ b/docs/src/examples/components/LineChart/large-series.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { LineChart } from 'layerchart';
+	import { LineChart, defaultChartPadding } from 'layerchart';
 	import { flatGroup } from 'd3-array';
 	import { getDailyTemperatures } from '$lib/data.remote';
 
@@ -30,5 +30,6 @@
 			props: { opacity: year === 2024 ? 1 : year === 2023 ? 0.5 : 0.1 }
 		};
 	})}
+	padding={{ ...defaultChartPadding(), left: 30 }}
 	height={500}
 />
diff --git a/docs/src/examples/components/LineChart/legend.svelte b/docs/src/examples/components/LineChart/legend.svelte
index eaaafbdae..fe062c7b3 100644
--- a/docs/src/examples/components/LineChart/legend.svelte
+++ b/docs/src/examples/components/LineChart/legend.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { LineChart } from 'layerchart';
+	import { LineChart, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({
@@ -26,6 +26,7 @@
 			color: 'var(--color-oranges)'
 		}
 	]}
+	padding={{ ...defaultChartPadding(), right: 10 }}
 	height={300}
 	legend
 />
diff --git a/docs/src/examples/components/LineChart/line-annotation.svelte b/docs/src/examples/components/LineChart/line-annotation.svelte
index fc5d76c9d..5fba6577a 100644
--- a/docs/src/examples/components/LineChart/line-annotation.svelte
+++ b/docs/src/examples/components/LineChart/line-annotation.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { LineChart } from 'layerchart';
+	import { LineChart, defaultChartPadding } from 'layerchart';
 	import { getAppleStock } from '$lib/data.remote';
 
 	const data = await getAppleStock();
@@ -10,7 +10,6 @@
 	{data}
 	x="date"
 	y="value"
-	height={300}
 	annotations={[
 		{
 			type: 'line',
@@ -24,4 +23,6 @@
 			}
 		}
 	]}
+	padding={{ ...defaultChartPadding(), left: 25 }}
+	height={300}
 />
diff --git a/docs/src/examples/components/LineChart/null-dashed-gaps.svelte b/docs/src/examples/components/LineChart/null-dashed-gaps.svelte
index 18a25010d..c1e85b1d7 100644
--- a/docs/src/examples/components/LineChart/null-dashed-gaps.svelte
+++ b/docs/src/examples/components/LineChart/null-dashed-gaps.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { LineChart, Spline } from 'layerchart';
+	import { LineChart, Spline, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' }).map((d) => {
@@ -11,7 +11,7 @@
 	export { data };
 </script>
 
-<LineChart {data} x="date" y="value" height={300}>
+<LineChart {data} x="date" y="value" padding={{ ...defaultChartPadding(), right: 10 }} height={300}>
 	{#snippet belowMarks({ series })}
 		{#each series as s}
 			<Spline
diff --git a/docs/src/examples/components/LineChart/null-gaps.svelte b/docs/src/examples/components/LineChart/null-gaps.svelte
index 84a924c3b..7ac1dea63 100644
--- a/docs/src/examples/components/LineChart/null-gaps.svelte
+++ b/docs/src/examples/components/LineChart/null-gaps.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { LineChart } from 'layerchart';
+	import { LineChart, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' }).map((d) => {
@@ -11,4 +11,11 @@
 	export { data };
 </script>
 
-<LineChart {data} x="date" y="value" points height={300} />
+<LineChart
+	{data}
+	x="date"
+	y="value"
+	points
+	padding={{ ...defaultChartPadding(), right: 10 }}
+	height={300}
+/>
diff --git a/docs/src/examples/components/LineChart/oscilloscope-time.svelte b/docs/src/examples/components/LineChart/oscilloscope-time.svelte
index b6fce62a9..bdca0f1aa 100644
--- a/docs/src/examples/components/LineChart/oscilloscope-time.svelte
+++ b/docs/src/examples/components/LineChart/oscilloscope-time.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	import { LineChart } from 'layerchart';
+	import { LinearGradient, LineChart, Highlight, Spline, Tooltip } from 'layerchart';
 	import OscilloscopeField from '$lib/components/controls/fields/OscilloscopeField.svelte';
+	import { extent, ticks } from 'd3-array';
+	import { format } from '@layerstack/utils';
+	import { scaleSequential } from 'd3-scale';
+	import { interpolateRainbow } from 'd3-scale-chromatic';
 
 	const FFT_SIZE = 1024;
 
@@ -18,6 +22,10 @@
 	let isListening = $state(false);
 	let error = $state('');
 
+	const valueColor = $derived(
+		scaleSequential(extent(data, (d) => d.value as number) as [number, number], interpolateRainbow)
+	);
+
 	$effect(() => {
 		if (!isListening) {
 			data = mockData;
@@ -91,14 +99,30 @@
 
 <OscilloscopeField bind:isListening bind:error {startMicrophone} {stopMicrophone} />
 
-<LineChart
-	{data}
-	x="key"
-	y="value"
-	yDomain={[-256, 512]}
-	axis={false}
-	grid={false}
-	props={{ spline: { class: 'stroke-surface-content' } }}
-	tooltip={{ mode: 'manual' }}
-	height={200}
-/>
+<LineChart {data} x="key" y="value" yDomain={[-256, 512]} axis="y" grid={false} height={200}>
+	{#snippet marks()}
+		<LinearGradient stops={ticks(1, 0, 10).map(valueColor.interpolator())} vertical>
+			{#snippet children({ gradient })}
+				<Spline stroke={gradient} />
+			{/snippet}
+		</LinearGradient>
+	{/snippet}
+
+	{#snippet highlight({ context })}
+		{#if context.tooltip.data}
+			<Highlight lines points={{ fill: valueColor(context.y(context.tooltip.data)) }} />
+		{/if}
+	{/snippet}
+
+	{#snippet tooltip({ context })}
+		<Tooltip.Root>
+			{#snippet children({ data })}
+				{@const value = context.y(data)}
+				<Tooltip.Header>{format(context.x(data))}</Tooltip.Header>
+				<Tooltip.List>
+					<Tooltip.Item label="value" {value} color={valueColor(value)} />
+				</Tooltip.List>
+			{/snippet}
+		</Tooltip.Root>
+	{/snippet}
+</LineChart>
diff --git a/docs/src/examples/components/LineChart/override-color.svelte b/docs/src/examples/components/LineChart/override-color.svelte
index 0878dea29..aca69b3df 100644
--- a/docs/src/examples/components/LineChart/override-color.svelte
+++ b/docs/src/examples/components/LineChart/override-color.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { LineChart } from 'layerchart';
+	import { LineChart, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' }).map((d) => {
@@ -15,5 +15,6 @@
 	{data}
 	x="date"
 	series={[{ key: 'value', color: 'var(--color-secondary)' }]}
+	padding={{ ...defaultChartPadding(), right: 10 }}
 	height={300}
 />
diff --git a/docs/src/examples/components/LineChart/point-annotations.svelte b/docs/src/examples/components/LineChart/point-annotations.svelte
index 54fe75ea7..1275d372f 100644
--- a/docs/src/examples/components/LineChart/point-annotations.svelte
+++ b/docs/src/examples/components/LineChart/point-annotations.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { LineChart, Tooltip } from 'layerchart';
+	import { LineChart, Tooltip, defaultChartPadding } from 'layerchart';
 	import { format, sortFunc } from '@layerstack/utils';
 	import { getAppleStock } from '$lib/data.remote';
 
@@ -37,6 +37,7 @@
 			}
 		};
 	})}
+	padding={{ ...defaultChartPadding(), left: 30 }}
 	height={300}
 >
 	{#snippet tooltip({ context })}
diff --git a/docs/src/examples/components/LineChart/points.svelte b/docs/src/examples/components/LineChart/points.svelte
index 7f73b6e97..08b1cbd09 100644
--- a/docs/src/examples/components/LineChart/points.svelte
+++ b/docs/src/examples/components/LineChart/points.svelte
@@ -1,9 +1,17 @@
 <script lang="ts">
-	import { LineChart } from 'layerchart';
+	import { LineChart, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' });
 	export { data };
 </script>
 
-<LineChart {data} x="date" y="value" height={300} points />
+<LineChart
+	{data}
+	x="date"
+	y="value"
+	xNice
+	padding={{ ...defaultChartPadding(), right: 10 }}
+	height={300}
+	points
+/>
diff --git a/docs/src/examples/components/LineChart/radar-rounded.svelte b/docs/src/examples/components/LineChart/radar-rounded.svelte
index 9db3334b2..a8c22e67f 100644
--- a/docs/src/examples/components/LineChart/radar-rounded.svelte
+++ b/docs/src/examples/components/LineChart/radar-rounded.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { LineChart } from 'layerchart';
+	import { LineChart, defaultChartPadding } from 'layerchart';
 	import { curveLinearClosed } from 'd3-shape';
 
 	const data = [
@@ -16,7 +16,6 @@
 	{data}
 	x="name"
 	y="value"
-	padding={{ top: 8 }}
 	radial
 	points
 	props={{
@@ -43,5 +42,6 @@
 			}
 		}
 	}}
+	padding={{ ...defaultChartPadding(), top: 20 }}
 	height={300}
 />
diff --git a/docs/src/examples/components/LineChart/radar-series.svelte b/docs/src/examples/components/LineChart/radar-series.svelte
index d4fdd0419..daaac6e30 100644
--- a/docs/src/examples/components/LineChart/radar-series.svelte
+++ b/docs/src/examples/components/LineChart/radar-series.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { LineChart } from 'layerchart';
+	import { LineChart, defaultChartPadding } from 'layerchart';
 	import { curveLinearClosed } from 'd3-shape';
 
 	const data = [
@@ -77,5 +77,6 @@
 			}
 		}
 	}}
+	padding={{ ...defaultChartPadding(), top: 10 }}
 	height={300}
 />
diff --git a/docs/src/examples/components/LineChart/range-annotation.svelte b/docs/src/examples/components/LineChart/range-annotation.svelte
index 45e6b3aa3..5ae69109a 100644
--- a/docs/src/examples/components/LineChart/range-annotation.svelte
+++ b/docs/src/examples/components/LineChart/range-annotation.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { LineChart } from 'layerchart';
+	import { LineChart, defaultChartPadding } from 'layerchart';
 	import { getAppleStock } from '$lib/data.remote';
 
 	const data = await getAppleStock();
@@ -10,7 +10,6 @@
 	{data}
 	x="date"
 	y="value"
-	height={300}
 	annotations={[
 		{
 			type: 'range',
@@ -27,4 +26,6 @@
 			}
 		}
 	]}
+	padding={{ ...defaultChartPadding(), left: 30 }}
+	height={300}
 />
diff --git a/docs/src/examples/components/LineChart/series-brush.svelte b/docs/src/examples/components/LineChart/series-brush.svelte
index 7af151a04..ab46c4bc2 100644
--- a/docs/src/examples/components/LineChart/series-brush.svelte
+++ b/docs/src/examples/components/LineChart/series-brush.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { LineChart } from 'layerchart';
+	import { LineChart, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({
@@ -31,5 +31,6 @@
 		alert(JSON.stringify(detail));
 	}}
 	brush
+	padding={{ ...defaultChartPadding(), right: 10 }}
 	height={300}
 />
diff --git a/docs/src/examples/components/LineChart/series-custom-highlight-point.svelte b/docs/src/examples/components/LineChart/series-custom-highlight-point.svelte
index a1819583c..aacc5cdfd 100644
--- a/docs/src/examples/components/LineChart/series-custom-highlight-point.svelte
+++ b/docs/src/examples/components/LineChart/series-custom-highlight-point.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { LineChart } from 'layerchart';
+	import { LineChart, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({
@@ -27,5 +27,6 @@
 		}
 	]}
 	props={{ highlight: { points: { r: 8, strokeWidth: 4 } } }}
+	padding={{ ...defaultChartPadding(), right: 10 }}
 	height={300}
 />
diff --git a/docs/src/examples/components/LineChart/series-individual-tooltip.svelte b/docs/src/examples/components/LineChart/series-individual-tooltip.svelte
index d966759ea..82fd8b83b 100644
--- a/docs/src/examples/components/LineChart/series-individual-tooltip.svelte
+++ b/docs/src/examples/components/LineChart/series-individual-tooltip.svelte
@@ -1,5 +1,12 @@
 <script lang="ts">
-	import { LineChart, Highlight, pivotLonger, Spline, Tooltip } from 'layerchart';
+	import {
+		LineChart,
+		Highlight,
+		pivotLonger,
+		Spline,
+		Tooltip,
+		defaultChartPadding
+	} from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 	import { group } from 'd3-array';
 	import { cls } from '@layerstack/tailwind';
@@ -31,6 +38,7 @@
 	props={{ tooltip: { context: { mode: 'quadtree' } } }}
 	brush
 	legend
+	padding={{ ...defaultChartPadding(), right: 10 }}
 	height={300}
 >
 	{#snippet marks({ context, visibleSeries, highlightKey })}
diff --git a/docs/src/examples/components/LineChart/series-point-click.svelte b/docs/src/examples/components/LineChart/series-point-click.svelte
index c73402d7f..f15b75f7c 100644
--- a/docs/src/examples/components/LineChart/series-point-click.svelte
+++ b/docs/src/examples/components/LineChart/series-point-click.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { LineChart } from 'layerchart';
+	import { LineChart, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({
@@ -30,5 +30,6 @@
 		console.log(e, detail);
 		alert(JSON.stringify(detail));
 	}}
+	padding={{ ...defaultChartPadding(), right: 10 }}
 	height={300}
 />
diff --git a/docs/src/examples/components/LineChart/series-separate-data-diff-length.svelte b/docs/src/examples/components/LineChart/series-separate-data-diff-length.svelte
index 68ad63733..cdaf9467e 100644
--- a/docs/src/examples/components/LineChart/series-separate-data-diff-length.svelte
+++ b/docs/src/examples/components/LineChart/series-separate-data-diff-length.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { LineChart, pivotLonger } from 'layerchart';
+	import { LineChart, pivotLonger, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 	import { group } from 'd3-array';
 
@@ -37,5 +37,6 @@
 			color: 'var(--color-oranges)'
 		}
 	]}
+	padding={{ ...defaultChartPadding(), right: 10 }}
 	height={300}
 />
diff --git a/docs/src/examples/components/LineChart/series-separate-data.svelte b/docs/src/examples/components/LineChart/series-separate-data.svelte
index 5dc015873..cdad78fe4 100644
--- a/docs/src/examples/components/LineChart/series-separate-data.svelte
+++ b/docs/src/examples/components/LineChart/series-separate-data.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { LineChart, pivotLonger } from 'layerchart';
+	import { LineChart, pivotLonger, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 	import { group } from 'd3-array';
 
@@ -37,5 +37,6 @@
 			color: 'var(--color-warning)'
 		}
 	]}
+	padding={{ ...defaultChartPadding(), right: 10 }}
 	height={300}
 />
diff --git a/docs/src/examples/components/LineChart/series-vertical.svelte b/docs/src/examples/components/LineChart/series-vertical.svelte
index 80af7b13d..68adfb5c9 100644
--- a/docs/src/examples/components/LineChart/series-vertical.svelte
+++ b/docs/src/examples/components/LineChart/series-vertical.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { LineChart } from 'layerchart';
+	import { LineChart, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({
@@ -12,21 +12,24 @@
 	export { data };
 </script>
 
-<LineChart
-	{data}
-	y="date"
-	series={[
-		{ key: 'apples', color: 'var(--color-apples)' },
-		{
-			key: 'bananas',
-			color: 'var(--color-bananas)'
-		},
-		{
-			key: 'oranges',
-			color: 'var(--color-oranges)'
-		}
-	]}
-	orientation="vertical"
-	height={600}
-	width={400}
-/>
+<div class="flex justify-center">
+	<LineChart
+		{data}
+		y="date"
+		series={[
+			{ key: 'apples', color: 'var(--color-apples)' },
+			{
+				key: 'bananas',
+				color: 'var(--color-bananas)'
+			},
+			{
+				key: 'oranges',
+				color: 'var(--color-oranges)'
+			}
+		]}
+		orientation="vertical"
+		padding={{ ...defaultChartPadding(), bottom: 25, left: 25 }}
+		height={600}
+		width={400}
+	/>
+</div>
diff --git a/docs/src/examples/components/LineChart/series-with-nulls.svelte b/docs/src/examples/components/LineChart/series-with-nulls.svelte
index 165270652..b39a9f879 100644
--- a/docs/src/examples/components/LineChart/series-with-nulls.svelte
+++ b/docs/src/examples/components/LineChart/series-with-nulls.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { LineChart, Spline } from 'layerchart';
+	import { LineChart, Spline, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 	import { cls } from '@layerstack/tailwind';
 
@@ -30,6 +30,7 @@
 		{ key: 'oranges', color: 'var(--color-oranges)' }
 	]}
 	height={300}
+	padding={{ ...defaultChartPadding(), right: 10 }}
 >
 	{#snippet belowMarks({ visibleSeries, highlightKey })}
 		{#each visibleSeries as s}
diff --git a/docs/src/examples/components/LineChart/series.svelte b/docs/src/examples/components/LineChart/series.svelte
index b68dfdc79..44ed06ca3 100644
--- a/docs/src/examples/components/LineChart/series.svelte
+++ b/docs/src/examples/components/LineChart/series.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { LineChart } from 'layerchart';
+	import { LineChart, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({
@@ -26,5 +26,6 @@
 			color: 'var(--color-oranges)'
 		}
 	]}
+	padding={{ ...defaultChartPadding(), right: 10 }}
 	height={300}
 />
diff --git a/docs/src/examples/components/LineChart/single-axis-x.svelte b/docs/src/examples/components/LineChart/single-axis-x.svelte
index e2749f8ec..52a648aa1 100644
--- a/docs/src/examples/components/LineChart/single-axis-x.svelte
+++ b/docs/src/examples/components/LineChart/single-axis-x.svelte
@@ -1,9 +1,16 @@
 <script lang="ts">
-	import { LineChart } from 'layerchart';
+	import { LineChart, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' });
 	export { data };
 </script>
 
-<LineChart {data} x="date" y="value" axis="x" height={300} />
+<LineChart
+	{data}
+	x="date"
+	y="value"
+	axis="x"
+	padding={{ ...defaultChartPadding(), right: 10 }}
+	height={300}
+/>
diff --git a/docs/src/examples/components/LineChart/single-axis-y.svelte b/docs/src/examples/components/LineChart/single-axis-y.svelte
index 5828d4a9b..8aeab5182 100644
--- a/docs/src/examples/components/LineChart/single-axis-y.svelte
+++ b/docs/src/examples/components/LineChart/single-axis-y.svelte
@@ -1,9 +1,16 @@
 <script lang="ts">
-	import { LineChart } from 'layerchart';
+	import { LineChart, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' });
 	export { data };
 </script>
 
-<LineChart {data} x="date" y="value" axis="y" height={300} />
+<LineChart
+	{data}
+	x="date"
+	y="value"
+	axis="y"
+	padding={{ ...defaultChartPadding(), bottom: 10 }}
+	height={300}
+/>
diff --git a/docs/src/examples/components/LineChart/tooltip-click.svelte b/docs/src/examples/components/LineChart/tooltip-click.svelte
index e987fa762..657e9c377 100644
--- a/docs/src/examples/components/LineChart/tooltip-click.svelte
+++ b/docs/src/examples/components/LineChart/tooltip-click.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { LineChart } from 'layerchart';
+	import { LineChart, defaultChartPadding } from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 
 	const data = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' });
@@ -10,9 +10,10 @@
 	{data}
 	x="date"
 	y="value"
-	height={300}
 	onTooltipClick={(e, detail) => {
 		console.log(e, detail);
 		alert(JSON.stringify(detail));
 	}}
+	padding={{ ...defaultChartPadding(), right: 10 }}
+	height={300}
 />
diff --git a/docs/src/examples/components/LineChart/vertical.svelte b/docs/src/examples/components/LineChart/vertical.svelte
index b962ea18d..a6afe40ed 100644
--- a/docs/src/examples/components/LineChart/vertical.svelte
+++ b/docs/src/examples/components/LineChart/vertical.svelte
@@ -6,4 +6,6 @@
 	export { data };
 </script>
 
-<LineChart {data} x="value" y="date" orientation="vertical" width={400} height={600} />
+<div class="flex justify-center">
+	<LineChart {data} x="value" y="date" orientation="vertical" width={400} height={600} />
+</div>