diff --git a/docs/src/examples/components/Bars/horizontal-grouped-stacked-or-both-transition.svelte b/docs/src/examples/components/Bars/horizontal-grouped-stacked-or-both-transition.svelte
index e41e99d6d..47182c9f0 100644
--- a/docs/src/examples/components/Bars/horizontal-grouped-stacked-or-both-transition.svelte
+++ b/docs/src/examples/components/Bars/horizontal-grouped-stacked-or-both-transition.svelte
@@ -1,19 +1,23 @@
 <script lang="ts">
+	import {
+		Bar,
+		Axis,
+		Chart,
+		Highlight,
+		Layer,
+		Tooltip,
+		defaultChartPadding,
+		groupStackData
+	} from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruitColors';
 	import { scaleBand } from 'd3-scale';
 	import { sum } from 'd3-array';
-	import { Bar, Axis, Chart, Highlight, Layer, Tooltip, groupStackData } from 'layerchart';
 	import GroupedStackedComboControls from '$lib/components/controls/BarsControls.svelte';
 	import { longData } from '$lib/utils/data.js';
 	import { unique } from '@layerstack/utils';
 	import { cubicInOut } from 'svelte/easing';
 
 	const colorKeys = [...new Set(longData.map((x) => x.fruit))];
-	const keyColors = [
-		'var(--color-info)',
-		'var(--color-success)',
-		'var(--color-warning)',
-		'var(--color-danger)'
-	];
 
 	let chartMode = $state<'group' | 'stack' | 'groupStack'>('group');
 
@@ -63,12 +67,12 @@
 	yScale={scaleBand().paddingInner(0.2).paddingOuter(0.1)}
 	c="fruit"
 	cDomain={colorKeys}
-	cRange={keyColors}
+	cRange={fruitColors}
 	y1={groupBy}
 	y1Scale={groupBy ? scaleBand().padding(0.1) : undefined}
 	y1Domain={groupBy ? unique(data.map((d) => d[groupBy])) : undefined}
 	y1Range={({ yScale }) => [0, yScale.bandwidth()]}
-	padding={{ left: 32, bottom: 20, right: 8 }}
+	padding={{ ...defaultChartPadding, left: 30, right: 15, bottom: 20 }}
 	tooltip={{ mode: 'band' }}
 	height={400}
 >
diff --git a/docs/src/examples/components/Bars/horizontal-tooltip-and-click-handlers-for-individual-stack-grouped-bar.svelte b/docs/src/examples/components/Bars/horizontal-tooltip-and-click-handlers-for-individual-stack-grouped-bar.svelte
index 5e733c8db..4bafd7af1 100644
--- a/docs/src/examples/components/Bars/horizontal-tooltip-and-click-handlers-for-individual-stack-grouped-bar.svelte
+++ b/docs/src/examples/components/Bars/horizontal-tooltip-and-click-handlers-for-individual-stack-grouped-bar.svelte
@@ -1,18 +1,21 @@
 <script lang="ts">
+	import {
+		Bar,
+		Axis,
+		Chart,
+		Layer,
+		Tooltip,
+		defaultChartPadding,
+		groupStackData
+	} from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruitColors';
 	import { scaleBand } from 'd3-scale';
-	import { Bar, Axis, Chart, Layer, Tooltip, groupStackData } from 'layerchart';
 	import GroupedStackedComboControls from '$lib/components/controls/BarsControls.svelte';
 	import { longData } from '$lib/utils/data.js';
 	import { unique } from '@layerstack/utils';
 	import { cubicInOut } from 'svelte/easing';
 
 	const colorKeys = [...new Set(longData.map((x) => x.fruit))];
-	const keyColors = [
-		'var(--color-info)',
-		'var(--color-success)',
-		'var(--color-warning)',
-		'var(--color-danger)'
-	];
 
 	let chartMode = $state<'group' | 'stack' | 'groupStack'>('group');
 
@@ -63,12 +66,12 @@
 	yScale={scaleBand().paddingInner(0.2).paddingOuter(0.1)}
 	c="fruit"
 	cDomain={colorKeys}
-	cRange={keyColors}
+	cRange={fruitColors}
 	y1={groupBy}
 	y1Scale={groupBy ? scaleBand().padding(0.1) : undefined}
 	y1Domain={groupBy ? unique(data.map((d) => d[groupBy])) : undefined}
 	y1Range={({ yScale }) => [0, yScale.bandwidth()]}
-	padding={{ left: 32, bottom: 20, right: 8 }}
+	padding={{ ...defaultChartPadding, left: 30, right: 15, bottom: 20 }}
 	height={400}
 >
 	{#snippet children({ context })}
diff --git a/docs/src/examples/components/Bars/vertical-tooltip-and-click-handlers-for-individual-stack-grouped-bar.svelte b/docs/src/examples/components/Bars/vertical-tooltip-and-click-handlers-for-individual-stack-grouped-bar.svelte
index b2e9004b9..75dc15045 100644
--- a/docs/src/examples/components/Bars/vertical-tooltip-and-click-handlers-for-individual-stack-grouped-bar.svelte
+++ b/docs/src/examples/components/Bars/vertical-tooltip-and-click-handlers-for-individual-stack-grouped-bar.svelte
@@ -1,18 +1,21 @@
 <script lang="ts">
+	import {
+		Axis,
+		Bar,
+		Chart,
+		Layer,
+		Tooltip,
+		defaultChartPadding,
+		groupStackData
+	} from 'layerchart';
+	import { fruitColors } from '$lib/utils/fruitColors';
 	import { scaleBand } from 'd3-scale';
-	import { Axis, Bar, Chart, Layer, Tooltip, groupStackData } from 'layerchart';
 	import { longData } from '$lib/utils/data.js';
 	import { cubicInOut } from 'svelte/easing';
 	import { unique } from '@layerstack/utils';
 	import GroupedStackedComboField from '$lib/components/controls/fields/GroupedStackedComboField.svelte';
 
 	const colorKeys = [...new Set(longData.map((x) => x.fruit))];
-	const keyColors = [
-		'var(--color-info)',
-		'var(--color-success)',
-		'var(--color-warning)',
-		'var(--color-danger)'
-	];
 
 	let chartMode = $state<'group' | 'stack' | 'groupStack'>('group');
 
@@ -63,7 +66,7 @@
 	yNice
 	c="fruit"
 	cDomain={colorKeys}
-	cRange={keyColors}
+	cRange={fruitColors}
 	x1={groupBy}
 	x1Scale={groupBy ? scaleBand().padding(0.1) : undefined}
 	x1Domain={groupBy ? unique(data.map((d) => d[groupBy])) : undefined}