diff --git a/docs/src/lib/components/Code.svelte b/docs/src/lib/components/Code.svelte
index 181e7b63e..98af9c8d9 100644
--- a/docs/src/lib/components/Code.svelte
+++ b/docs/src/lib/components/Code.svelte
@@ -1,5 +1,6 @@
 <script module>
 	import { createHighlighter } from 'shiki';
+	import { transformerMetaHighlight } from '@shikijs/transformers';
 
 	const highlighter = createHighlighter({
 		themes: ['github-light-default', 'github-dark-default'],
@@ -26,6 +27,8 @@
 		language?: string;
 		title?: string;
 		copyButton?: boolean | 'hover';
+		showLineNumbers?: boolean;
+		highlight?: string;
 		classes?: { root?: string; pre?: string; code?: string };
 		class?: string;
 	}
@@ -35,6 +38,8 @@
 		source = null,
 		language = 'svelte',
 		copyButton = true,
+		showLineNumbers = false,
+		highlight,
 		classes = {},
 		class: className
 	}: Props & HTMLAttributes<HTMLDivElement> = $props();
@@ -69,7 +74,8 @@
 		class={cls(
 			'Code',
 			'relative bg-surface-200 dark:bg-surface-300 p-4 overflow-auto not-prose [tab-size:2]',
-			copyButton === 'hover' && 'group'
+			copyButton === 'hover' && 'group',
+			showLineNumbers && 'show-line-numbers'
 		)}
 	>
 		{#if source}
@@ -84,7 +90,9 @@
 							themes: {
 								light: 'github-light-default',
 								dark: 'github-dark-default'
-							}
+							},
+							meta: highlight ? { __raw: `{${highlight}}` } : undefined,
+							transformers: highlight ? [transformerMetaHighlight()] : undefined
 						})}
 					{:catch error}
 						<div class="text-red-500">Error loading code highlighting: {error.message}</div>
@@ -124,4 +132,33 @@
 		font-weight: var(--shiki-dark-font-weight) !important;
 		text-decoration: var(--shiki-dark-text-decoration) !important;
 	}
+
+	/* Line highlighting */
+	:global(.shiki .line.highlighted) {
+		background-color: rgba(101, 117, 133, 0.16);
+		margin: 0 -1rem;
+		padding: 0 1rem;
+		display: inline-block;
+		width: calc(100% + 2rem);
+	}
+
+	:global(html.dark .shiki .line.highlighted) {
+		background-color: rgba(142, 150, 170, 0.14);
+	}
+
+	/* Line numbers */
+	.show-line-numbers :global(.shiki code) {
+		counter-reset: line;
+	}
+
+	.show-line-numbers :global(.shiki .line::before) {
+		counter-increment: line;
+		content: counter(line);
+		display: inline-block;
+		width: 2rem;
+		margin-right: 1rem;
+		text-align: right;
+		color: rgba(115, 138, 148, 0.4);
+		user-select: none;
+	}
 </style>
diff --git a/docs/src/lib/components/Example.svelte b/docs/src/lib/components/Example.svelte
index 74d98d438..14d42920a 100644
--- a/docs/src/lib/components/Example.svelte
+++ b/docs/src/lib/components/Example.svelte
@@ -21,7 +21,10 @@
 	let {
 		component = page.params.name!,
 		name,
+		path,
 		showCode = false,
+		showLineNumbers = false,
+		highlight,
 		variant = 'default',
 		noResize = false,
 		clip = false,
@@ -29,17 +32,41 @@
 	}: {
 		component?: string;
 		name?: string;
+		path?: string;
 		showCode?: boolean;
+		showLineNumbers?: boolean;
+		highlight?: string;
 		variant?: 'default' | 'basic';
 		noResize?: boolean;
 		clip?: boolean;
 		class?: string;
 	} = $props();
 
+	/**
+	 * Resolve a relative or absolute path to a full path from /src
+	 */
+	function resolveExamplePath(examplePath: string, currentPath: string): string {
+		if (examplePath.startsWith('./')) {
+			return `/src/routes${currentPath}/${examplePath.slice(2)}`;
+		} else if (examplePath.startsWith('/')) {
+			return `/src${examplePath}`;
+		} else {
+			return `/src/routes${currentPath}/${examplePath}`;
+		}
+	}
+
 	// Get example from context (eagerly loaded by layout)
-	let example = $derived(
-		component && name ? examples.get()?.current[component]?.[name] : undefined
-	);
+	let example = $derived.by(() => {
+		if (path) {
+			// Path-based example
+			const resolvedPath = resolveExamplePath(path, page.url.pathname);
+			return examples.get()?.current['__path__']?.[resolvedPath];
+		} else if (component && name) {
+			// Component/name-based example
+			return examples.get()?.current[component]?.[name];
+		}
+		return undefined;
+	});
 
 	let containerEl = $state<HTMLElement | null>(null);
 	let containerWidth = $state<number | undefined>(undefined);
@@ -132,7 +159,7 @@
 
 		{#if showCode}
 			<div transition:slide class={cls('border border-t-0', showCode && 'rounded-b-sm')}>
-				<Code source={example.source} class="outline-none" />
+				<Code source={example.source} {showLineNumbers} {highlight} class="outline-none" />
 			</div>
 		{/if}
 
@@ -206,8 +233,8 @@
 		{/if}
 	{:else}
 		<div class="border border-danger bg-danger/5 text-danger px-4 py-2 rounded-md">
-			Example <span class="font-bold">`{name ?? path}`</span>
-			{#if component}
+			Example <span class="font-bold">`{path ?? name}`</span>
+			{#if component && !path}
 				for <span class="font-bold">`{component}`</span>
 			{/if}
 			not found.
diff --git a/docs/src/lib/examples.ts b/docs/src/lib/examples.ts
index f1dfb291e..d57987c0f 100644
--- a/docs/src/lib/examples.ts
+++ b/docs/src/lib/examples.ts
@@ -57,3 +57,35 @@ export async function loadExamples(
 
 	return results;
 }
+
+/**
+ * Load an example by its path (relative to /src/routes or absolute from /src)
+ * @param resolvedPath - The resolved path (e.g., "/src/routes/docs/guides/styles/color-schemes.svelte")
+ */
+export async function loadExampleByPath(resolvedPath: string): Promise<LoadedExample | null> {
+	try {
+		// Use import.meta.glob to load path-based examples
+		// This is necessary because dynamic imports with fully dynamic paths don't work in Vite
+		const modules = import.meta.glob<{ default: Component }>('/src/routes/**/*.svelte');
+		const rawModules = import.meta.glob<{ default: string }>('/src/routes/**/*.svelte', {
+			query: '?raw',
+			import: 'default'
+		});
+
+		const componentModule = await modules[resolvedPath]?.();
+		const rawSource = await rawModules[resolvedPath]?.();
+
+		if (!componentModule || rawSource === undefined) {
+			console.warn(`Failed to load example by path: ${resolvedPath}`);
+			return null;
+		}
+
+		const comp = componentModule.default as Component;
+		const source = (rawSource as string).replace(/^.*export .*;.*$/gm, '');
+
+		return { component: comp, source };
+	} catch (e) {
+		console.warn(`Failed to load example by path: ${resolvedPath}`, e);
+		return null;
+	}
+}
diff --git a/docs/src/lib/markdown/utils.ts b/docs/src/lib/markdown/utils.ts
index 3cc05ae7e..2e012cf84 100644
--- a/docs/src/lib/markdown/utils.ts
+++ b/docs/src/lib/markdown/utils.ts
@@ -10,7 +10,7 @@ import {
 } from 'content-collections';
 
 import type { Examples } from '$lib/types.js';
-import { loadExample } from '$lib/examples.js';
+import { loadExample, loadExampleByPath } from '$lib/examples.js';
 
 /**
  * Get markdown document component and metadata (frontmatter)
@@ -60,6 +60,22 @@ function getMetadata(
 	return allComponents.find((c) => c.slug === slug) as any;
 }
 
+/**
+ * Resolve a relative or absolute path to a full path from /src
+ * @param path - The path from the example (e.g., "./color-schemes.svelte" or "/routes/docs/guides/styles/color-schemes.svelte")
+ * @param currentPath - The current page URL pathname (e.g., "/docs/guides/styles")
+ * @returns The resolved path (e.g., "/src/routes/docs/guides/styles/color-schemes.svelte")
+ */
+export function resolveExamplePath(path: string, currentPath: string): string {
+	if (path.startsWith('./')) {
+		return `/src/routes${currentPath}/${path.slice(2)}`;
+	} else if (path.startsWith('/')) {
+		return `/src${path}`;
+	} else {
+		return `/src/routes${currentPath}/${path}`;
+	}
+}
+
 /**
  * Extract examples from markdown content and eagerly load them.
  *
@@ -69,12 +85,14 @@ function getMetadata(
  * @param markdownContent - The markdown content to extract examples from
  * @param defaultComponent - Optional default component name (from route params)
  * @param type - The type of content ('components' or 'utils')
+ * @param currentPath - The current page URL pathname (needed for resolving relative paths)
  * @returns Examples object with loaded components and sources
  */
 export async function loadExamplesFromMarkdown(
 	markdownContent: string,
 	defaultComponent?: string,
-	type: 'components' | 'utils' = 'components'
+	type: 'components' | 'utils' = 'components',
+	currentPath?: string
 ): Promise<Examples> {
 	// Extract all <Example component="..." name="..."> from markdown content
 	// Also support :example{component="..." name="..."} syntax
@@ -83,29 +101,55 @@ export async function loadExamplesFromMarkdown(
 	const componentMatches = [...markdownContent.matchAll(componentRegex)];
 	const mdcMatches = [...markdownContent.matchAll(mdcRegex)];
 	const matches = [...componentMatches, ...mdcMatches];
-	const pageExamples = matches.map((match) => {
+
+	const componentExamples: Array<{ component: string; name: string }> = [];
+	const pathExamples: Array<{ path: string; resolvedPath: string }> = [];
+
+	for (const match of matches) {
 		const attrs = match[1];
-		const component = attrs.match(/component="([^"]*?)"/)?.[1] || defaultComponent;
-		const name = attrs.match(/name="([^"]*?)"/)?.[1] || null;
-		return { component, name };
-	});
+		const path = attrs.match(/path="([^"]*?)"/)?.[1];
+
+		if (path && currentPath) {
+			// Path-based example
+			const resolvedPath = resolveExamplePath(path, currentPath);
+			pathExamples.push({ path, resolvedPath });
+		} else {
+			// Component/name-based example
+			const component = attrs.match(/component="([^"]*?)"/)?.[1] || defaultComponent;
+			const name = attrs.match(/name="([^"]*?)"/)?.[1] || null;
+			if (component && name) {
+				componentExamples.push({ component, name });
+			}
+		}
+	}
 
 	const examples: Examples = {};
 
-	// Load examples in parallel using dynamic imports
+	// Load component-based examples in parallel
 	await Promise.all(
-		pageExamples
-			.filter((ex) => ex.component && ex.name)
-			.map(async (ex) => {
-				const loaded = await loadExample(ex.component!, ex.name!, type);
+		componentExamples.map(async (ex) => {
+			const loaded = await loadExample(ex.component, ex.name, type);
+			if (loaded) {
+				if (!examples[ex.component]) {
+					examples[ex.component] = {};
+				}
+				examples[ex.component][ex.name] = loaded;
+			}
+		})
+	);
+
+	// Load path-based examples in parallel
+	if (pathExamples.length > 0) {
+		examples['__path__'] = {};
+		await Promise.all(
+			pathExamples.map(async (ex) => {
+				const loaded = await loadExampleByPath(ex.resolvedPath);
 				if (loaded) {
-					if (!examples[ex.component!]) {
-						examples[ex.component!] = {};
-					}
-					examples[ex.component!][ex.name!] = loaded;
+					examples['__path__']![ex.resolvedPath] = loaded;
 				}
 			})
-	);
+		);
+	}
 
 	return examples;
 }
diff --git a/docs/src/routes/docs/+layout.ts b/docs/src/routes/docs/+layout.ts
index 1be40324b..8c2dbddca 100644
--- a/docs/src/routes/docs/+layout.ts
+++ b/docs/src/routes/docs/+layout.ts
@@ -33,7 +33,8 @@ export const load = async ({ url }) => {
 					examples = await loadExamplesFromMarkdown(
 						markdownContent,
 						undefined, // no default component
-						'components'
+						'components',
+						pathname // for resolving relative paths
 					);
 					break;
 				} catch (e) {
diff --git a/docs/src/routes/docs/guides/styles/+page.md b/docs/src/routes/docs/guides/styles/+page.md
index 0d5e1e127..f84da58aa 100644
--- a/docs/src/routes/docs/guides/styles/+page.md
+++ b/docs/src/routes/docs/guides/styles/+page.md
@@ -1,3 +1,256 @@
-# Styles
+# Styling
 
-> TODO
+## Colors
+
+Colors represent the main style requirement for Layerchart.
+
+Instead of requiring explicit color props for each element, LayerChart leverages CSS’s [CSS currentColor](https://www.digitalocean.com/community/tutorials/css-currentcolor) under the hood. This allows developers to style charts using familiar, standard CSS color utilities, rather than targeting different attributes for each rendering layer (svg, canvas, or html).
+
+Color is simply inherited and propagated through the component tree, and LayerChart automatically applies it appropriately for each display layer—using `fill` or `stroke` for SVG, `fillStyle`, `fillRect` for canvas, and `color` or `background-color` for HTML.
+
+If you can think of a way to define a color, Layerchart probably [supports it](#user-defined-options)!
+
+### Canvas
+
+Primitives rendered within Canvas layers support the same CSS classes and inline styles as Svg, allowing for use of `fill`, `stroke`, `font`, and even `paint-order`. Canvas layers also support CSS variables and light/dark mode, and will respond with media queries changes.
+
+### Global CSS colors
+
+By default, LayerChart uses `currentColor` for default colors, but you can override these defaults by defining CSS variables in your global stylesheet. LayerChart defines a set of CSS variables that can be customized to change the default appearance of charts.
+
+- **--color-primary**: The primary color used for marks (e.g., lines, bars).
+- **--color-surface-100**: A light surface color used for surface/backgrounds.
+- **--color-surface-200**: A medium surface color used for surface/backgrounds.
+- **--color-surface-300**: A darker surface color used for surface/backgrounds.
+- **--color-surface-content**: The color used for text and content.
+
+You can apply a base "theme" in `app.css` to globally style base elements of your charts including primary color of chart visualization (i.e. line of LineChart), backgrounds, axises and text content.
+
+#### User defined global CSS colors
+
+:::tip
+If you are not seeing the chart, or it is colored incorrectly, then the probably likely residesing in this file. Debug via browser devtools to see CSS color variables.
+:::
+
+```css title="app.css"
+.lc-root-container {
+	/* Default marks color when not using explicit color or color scale */
+	--color-primary: var(--color-blue-500);
+
+	/* Progressively darker shades representing surfaces (backgrounds). */
+	--color-surface-100: var(--color-white);
+	--color-surface-200: var(--color-gray-100);
+	--color-surface-300: var(--color-gray-300);
+
+	/* Content (text) color */
+	--color-surface-content: var(--color-gray-900);
+}
+```
+
+and for dark mode support:
+
+```css title="app.css"
+@media (prefers-color-scheme: dark) {
+	.lc-root-container {
+		--color-primary: var(--color-blue-400);
+		--color-surface-100: var(--color-gray-900);
+		--color-surface-200: var(--color-gray-800);
+		--color-surface-300: var(--color-gray-700);
+		--color-surface-content: var(--color-gray-100);
+	}
+}
+```
+
+#### Third party framework colors
+
+If you're already using one of these popular UI frameworks, use can easily leverage it's theming with built-in integrations to map the framework's theme into layerchart colors.
+
+:::tabs{key="framework"}
+
+    ::tab{label="shadcn-svelte" icon="custom-brands:shadcnsvelte"}
+    ```css title="app.css"
+    @import 'layerchart/shadcn-svelte.css';
+    ```
+    ::
+
+
+    ::tab{label="Skeleton" icon="custom-brands:skeleton"}
+    ```css title="app.css"
+    /* v3 */
+    @import 'layerchart/skeleton-3.css';
+
+    /* v4 */
+    @import 'layerchart/skeleton-4.css';
+    ```
+    ::
+
+    ::tab{label="Svelte UX" icon="custom-brands:svelteux"}
+    ```css title="app.css"
+    /* Works out of the box! */
+    ```
+    ::
+
+    ::tab{label="daisyUI" icon="custom-brands:daisyUI"}
+    ```css title="app.css"
+    @import 'layerchart/daisyui-5.css';
+    ```
+    ::
+
+:::
+
+### User Defined options
+
+Each component can be customized via style attributes and CSS classes. This allows you to define colors in a variety of ways.
+
+#### Per-component styling
+
+::tip
+Inline options are recommended for one-off color definitions. Use [global options](#global-css-colors) for base colors.
+::
+
+:::tabs{key="framework"}
+
+    ::tab{label="Tailwind / UnoCSS"}
+    Here the color is set via HTML class attribute supporting tailwindcss and unoCSS.
+    ```svelte live {8}
+    <script lang="ts">
+      import { Chart, Layer, Text } from 'layerchart';
+    </script>
+
+    <Chart height={60}>
+      <Layer center>
+        <Text
+          class="text-red-500 text-4xl"
+          value="LayerChart"
+          textAnchor="middle"
+          verticalAnchor="middle"
+        />
+      </Layer>
+    </Chart>
+    ```
+    ::
+
+    ::tab{label="Vanilla CSS"}
+    Here the color is set via HTML style attribute.
+    ```svelte live {8}
+    <script lang="ts">
+      import { Chart, Layer, Text } from 'layerchart';
+    </script>
+
+    <Chart height={60}>
+      <Layer center>
+        <Text
+          style="color: yellow; font-size: 2.25rem;"
+          value="LayerChart"
+          textAnchor="middle"
+          verticalAnchor="middle"
+        />
+      </Layer>
+    </Chart>
+    ```
+    ::
+
+    ::tab{label="CSS Variables"}
+    Here the color is set via a class using CSS variables.
+    ```svelte live {8}
+    <script lang="ts">
+      import { Chart, Layer, Text } from 'layerchart';
+    </script>
+
+    <Chart height={60}>
+      <Layer center>
+        <Text
+          class="text-4xl text-(--color-orange-500)"
+          value="LayerChart"
+          textAnchor="middle"
+          verticalAnchor="middle"
+        />
+      </Layer>
+    </Chart>
+    ```
+    ::
+
+
+
+    ::tab{label="SVG style attributes"}
+    Here the color is set via [SVG Attributes]("https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute") such as `stroke`, `fill`, `strokeWidth`.
+    ```svelte live {8}
+    <script lang="ts">
+      import { Chart, Layer, Text } from 'layerchart';
+    </script>
+
+    <Chart height={60}>
+      <Layer center>
+        <Text
+          fill="blue"
+          font-size="2.25rem"
+          value="LayerChart"
+          textAnchor="middle"
+          verticalAnchor="middle"
+        />
+      </Layer>
+    </Chart>
+    ```
+
+    ::
+
+:::
+
+#### Nested components / elements
+
+Along with `class` and `style` props for direct component styling, some components have internal components and elements that can be targetted via `props` and `classes` props to style these nested elements for complex components.
+
+In this example we can target the `AnnotationPoint`'s internal `circle` and `label` components.
+
+:example{ component="AnnotationPoint" name="series-annotation" showCode noResize highlight="26-27" }
+
+#### Color scales
+
+Picking a color isn't easy. Picking many colors that appear cohesive is even tougher. Why not use designer crafted color schemes?
+
+::info
+more info [Color Schemes](/docs/components/ColorRamp#schemes)
+::
+
+:example{ path="./color-schemes.svelte" noResize showCode highight="40" }
+
+#### Data Driven Colors (choropleth, color prop on data for pie chart, etc)
+
+#### Color Enhancements
+
+:::tabs{key="color-enhancements"}
+
+    ::tab{label="Linear gradient"}
+    :example{ component="AreaChart" name="gradient" noResize showCode highlight="11-15" }
+    ::
+
+    ::tab{label="Radial gradient"}
+      ```svelte live {7-10}
+        <script lang="ts">
+          import { Chart, Circle, Layer, RadialGradient } from 'layerchart';
+        </script>
+
+        <Chart height={300}>
+          <Layer center>
+            <RadialGradient stops={['hsl(60 100% 50%)', 'hsl(30 100% 40%)']}>
+              {#snippet children({ gradient })}
+                <Circle r={150} fill={gradient} />
+              {/snippet}
+            </RadialGradient>
+          </Layer>
+        </Chart>
+      ```
+    ::
+
+    ::tab{label="Pattern"}
+      :example{ component="AnnotationRange" name="vertical-with-pattern-range" noResize showCode highlight="14-20" }
+    ::
+
+:::
+
+## Padding
+
+Chart padding is the only other commonly styled element.
+`Can xPadding and yPadding be added to example below?`
+
+:example{ path="./padding.svelte" noResize }
diff --git a/docs/src/routes/docs/guides/styles/color-schemes.svelte b/docs/src/routes/docs/guides/styles/color-schemes.svelte
new file mode 100644
index 000000000..fff8e4e62
--- /dev/null
+++ b/docs/src/routes/docs/guides/styles/color-schemes.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { PieChart } from 'layerchart';
+	import { longData } from '$lib/utils/data';
+	import {
+		schemeAccent,
+		schemeCategory10,
+		schemeDark2,
+		schemePaired,
+		schemePastel1,
+		schemePastel2,
+		schemeSet1,
+		schemeSet2,
+		schemeSet3,
+		schemeTableau10
+	} from 'd3-scale-chromatic';
+
+	const schemes = [
+		{ label: 'Tableau10', value: schemeTableau10 },
+		{ label: 'Accent', value: schemeAccent },
+		{ label: 'Category10', value: schemeCategory10 },
+		{ label: 'Dark2', value: schemeDark2 },
+		{ label: 'Paired', value: schemePaired },
+		{ label: 'Pastel1', value: schemePastel1 },
+		{ label: 'Pastel2', value: schemePastel2 },
+		{ label: 'Set1', value: schemeSet1 },
+		{ label: 'Set2', value: schemeSet2 },
+		{ label: 'Set3', value: schemeSet3 }
+	];
+	const data = longData.filter((d) => d.year === 2019);
+	let selectedScheme = $state<(typeof schemes)[number]['value'] | undefined>(undefined);
+</script>
+
+<select class="w-50 p-2 border rounded" bind:value={selectedScheme}>
+	{#each schemes as scheme}
+		<option value={scheme.value}>{scheme.label}</option>
+	{/each}
+</select>
+<PieChart {data} key="fruit" value="value" height={300} cRange={selectedScheme} />
diff --git a/docs/src/routes/docs/guides/styles/padding.svelte b/docs/src/routes/docs/guides/styles/padding.svelte
new file mode 100644
index 000000000..2313c0796
--- /dev/null
+++ b/docs/src/routes/docs/guides/styles/padding.svelte
@@ -0,0 +1,221 @@
+<script lang="ts">
+	import { ScatterChart, defaultChartPadding } from 'layerchart';
+	import { Icon, Radio, RangeField, Switch, Button } from 'svelte-ux';
+	import { flatGroup } from 'd3-array';
+	import circleCheck from '~icons/lucide/circle-check';
+	import circleX from '~icons/lucide/circle-x';
+	import Code from '$lib/components/Code.svelte';
+	import { getPenguins } from '$lib/data.remote';
+	import { schemeTableau10 } from 'd3-scale-chromatic';
+
+	const colors = schemeTableau10;
+	const data = $derived(
+		flatGroup(
+			(await getPenguins()).filter(
+				(d) => d.flipper_length_mm !== 'NA' && d.bill_length_mm !== 'NA'
+			),
+			(d) => d.species
+		)
+	);
+
+	const maxPadding = 70;
+	let legend = $state(true);
+	let axis = $state(true);
+	let xNice = $state(true);
+	let paddingOption = $state(0);
+	let paddingAll = $state(20);
+	const defaultPadding = defaultChartPadding() ?? {
+		top: 4,
+		left: 20,
+		bottom: 20,
+		right: 4
+	};
+
+	let statePadding = $state(defaultPadding);
+
+	// Handle custom padding changes
+	function handlePaddingOptionChange() {
+		if (paddingOption === 0) {
+			statePadding = {
+				left: statePadding.left,
+				right: statePadding.right,
+				bottom: statePadding.bottom,
+				top: statePadding.top
+			};
+		} else if (paddingOption === 1) {
+			statePadding = {
+				left: paddingAll,
+				right: paddingAll,
+				bottom: paddingAll,
+				top: paddingAll
+			};
+		}
+	}
+
+	// Handle paddingAll changes when in symmetric mode
+	function handlePaddingAll() {
+		if (paddingOption === 1) {
+			statePadding = {
+				left: paddingAll,
+				right: paddingAll,
+				bottom: paddingAll,
+				top: paddingAll
+			};
+		}
+	}
+
+	let paddingPseudoCode = $derived.by(() => {
+		let code = [];
+		let padding = '';
+		if (!axis) code.push('axis={false}');
+		if (legend) code.push('legend');
+		if (!xNice) code.push('xNice');
+		if (paddingOption === 0) {
+			let pad = [];
+			if (statePadding.left !== defaultPadding.left) pad.push(`left: ${statePadding.left}`);
+			if (statePadding.right !== defaultPadding.right) pad.push(`right: ${statePadding.right}`);
+			if (statePadding.bottom !== defaultPadding.bottom) pad.push(`bottom: ${statePadding.bottom}`);
+			if (statePadding.top !== defaultPadding.top) pad.push(`top: ${statePadding.top}`);
+			let padding = pad.length ? `${pad.join(',\n\t')}` : '';
+			if (padding) code.push(`padding: {{\n\t${padding}\n}}`);
+		} else if (paddingOption === 1) code.push(`padding: {${paddingAll}}`);
+		return `<ScatterChart ${code.join('\n\t')} />`;
+	});
+
+	function resetPadding() {
+		statePadding.left = defaultPadding.left;
+		statePadding.right = defaultPadding.right;
+		statePadding.bottom = defaultPadding.bottom;
+		statePadding.top = defaultPadding.top;
+		paddingOption = 0;
+	}
+</script>
+
+<div class="grid grid-cols-[auto_1fr] gap-6">
+	<!-- Options -->
+	<div class="flex flex-col gap-2">
+		<Radio name="padding" value={0} bind:group={paddingOption} on:change={handlePaddingOptionChange}
+			>Customize Padding</Radio
+		>
+		<Radio name="padding" value={1} bind:group={paddingOption} on:change={handlePaddingOptionChange}
+			>Symmetric Padding</Radio
+		>
+		<div class="flex flex-col gap-2">
+			<label class="flex gap-2 items-center text-sm">
+				<Switch bind:checked={legend}>
+					{#if legend}
+						<Icon data={circleCheck} class="text-primary" size=".8em" />
+					{:else}
+						<Icon data={circleX} class="text-surface-content" size=".8em" />
+					{/if}
+				</Switch>
+				<span>Legend</span>
+			</label>
+			<label class="flex gap-2 items-center text-sm">
+				<Switch bind:checked={axis}>
+					{#if axis}
+						<Icon data={circleCheck} class="text-primary" size=".8em" />
+					{:else}
+						<Icon data={circleX} class="text-surface-content" size=".8em" />
+					{/if}
+				</Switch>
+				<span>Axis</span>
+			</label>
+			<label class="flex gap-2 items-center text-sm">
+				<Switch bind:checked={xNice}>
+					{#if xNice}
+						<Icon data={circleCheck} class="text-primary" size=".8em" />
+					{:else}
+						<Icon data={circleX} class="text-surface-content" size=".8em" />
+					{/if}
+				</Switch>
+				<span>xNice</span>
+			</label>
+		</div>
+	</div>
+	<!-- Controls -->
+	{#if paddingOption === 1}
+		<div class="col-span-2">
+			<RangeField
+				label="All Sides"
+				disabled={false}
+				min={0}
+				max={maxPadding}
+				step={1}
+				bind:value={paddingAll}
+				on:change={handlePaddingAll}
+			/>
+		</div>
+	{:else}
+		<div class="grid grid-cols-[1fr_1fr] gap-2">
+			<RangeField
+				label="Top"
+				min={0}
+				max={maxPadding}
+				bind:value={statePadding.top}
+				on:change={handlePaddingOptionChange}
+			/>
+			<RangeField label="Bottom" min={0} max={maxPadding} bind:value={statePadding.bottom} />
+			<RangeField label="Left" min={0} max={maxPadding} bind:value={statePadding.left} />
+			<RangeField label="Right" min={0} max={maxPadding} bind:value={statePadding.right} />
+		</div>
+	{/if}
+
+	<!-- Code -->
+	<div class="col-span-3 relative">
+		<Code source={paddingPseudoCode} language="svelte" copyButton={false} />
+		<Button
+			variant="fill-light"
+			color="primary"
+			class="absolute top-3 right-3"
+			size="sm"
+			onclick={resetPadding}>Reset</Button
+		>
+	</div>
+	<ScatterChart
+		class="col-span-3"
+		{legend}
+		{axis}
+		{xNice}
+		x="flipper_length_mm"
+		y="bill_length_mm"
+		series={data.map(([species, data], i) => {
+			const color = colors[i];
+			return {
+				label: species + ' 🐧',
+				key: species,
+				data,
+				color,
+				props: {
+					stroke: color,
+					fillOpacity: 0.3
+				}
+			};
+		})}
+		props={{
+			xAxis: {
+				rule: true,
+				label: 'Flipper Length (mm)',
+				labelProps: {
+					dy: -(statePadding.bottom + 5)
+				}
+			},
+			yAxis: {
+				rule: true,
+				label: 'Bill Length (mm)',
+				labelProps: {
+					dx: statePadding.left + 5
+				}
+			}
+		}}
+		padding={defaultChartPadding({
+			axis: axis,
+			legend: legend,
+			left: statePadding.left,
+			right: statePadding.right,
+			bottom: statePadding.bottom,
+			top: statePadding.top
+		})}
+		height={400}
+	/>
+</div>
diff --git a/packages/layerchart/src/lib/utils/common.ts b/packages/layerchart/src/lib/utils/common.ts
index 4d9ee873a..cbfd0721d 100644
--- a/packages/layerchart/src/lib/utils/common.ts
+++ b/packages/layerchart/src/lib/utils/common.ts
@@ -62,7 +62,7 @@ export function defaultChartPadding<TData, SeriesComponent extends Component, TS
   return {
     top: top ?? (axis === true || axis === 'y' ? 4 : 0),
     left: left ?? (axis === true || axis === 'y' ? 20 : 0),
-    bottom: bottom ?? (axis === true || axis === 'x' ? 20 : 0) + (legend ? 32 : 0),
+    bottom: (bottom ?? (axis === true || axis === 'x' ? 20 : 0)) + (legend ? 32 : 0),
     right: right ?? (axis === true || axis === 'x' ? 4 : 0),
   };
 }