diff --git a/docs/src/examples/components/GeoCircle/earthquake-globe.svelte b/docs/src/examples/components/GeoCircle/earthquake-globe.svelte
index dbf521017..aeb1a2e57 100644
--- a/docs/src/examples/components/GeoCircle/earthquake-globe.svelte
+++ b/docs/src/examples/components/GeoCircle/earthquake-globe.svelte
@@ -1,11 +1,6 @@
 <script lang="ts">
 	import { geoOrthographic } from 'd3-geo';
 	import { scaleSqrt } from 'd3-scale';
-	import { feature } from 'topojson-client';
-
-	import EarthquakeControls from '$lib/components/controls/GeoCircleEarthquakeControls.svelte';
-	import { TimerState } from '@layerstack/svelte-state';
-
 	import {
 		Chart,
 		GeoCircle,
@@ -13,8 +8,13 @@
 		Graticule,
 		Layer,
 		Tooltip,
+		defaultChartPadding,
 		type ChartContextValue
 	} from 'layerchart';
+	import { feature } from 'topojson-client';
+
+	import EarthquakeControls from '$lib/components/controls/GeoCircleEarthquakeControls.svelte';
+	import { TimerState } from '@layerstack/svelte-state';
 
 	import { getTectonicPlates, getEarthquakes, getCountriesTopology } from '$lib/geo.remote.js';
 
@@ -64,6 +64,7 @@
 		applyTransform: ['rotate']
 	}}
 	ondragstart={timer.stop}
+	padding={{ ...defaultChartPadding, top: 10, left: 20, right: 20 }}
 	height={600}
 >
 	{#snippet children({ context })}
diff --git a/docs/src/examples/components/GeoCircle/playground.svelte b/docs/src/examples/components/GeoCircle/playground.svelte
index 6e9aa1ade..03cc5e35a 100644
--- a/docs/src/examples/components/GeoCircle/playground.svelte
+++ b/docs/src/examples/components/GeoCircle/playground.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Chart, GeoCircle, GeoPath, Graticule, Layer } from 'layerchart';
+	import { Chart, GeoCircle, GeoPath, Graticule, Layer, defaultChartPadding } from 'layerchart';
 	import {
 		geoAlbersUsa,
 		geoAlbers,
@@ -57,6 +57,7 @@
 		projection: config.projection,
 		fitGeojson: geojson
 	}}
+	padding={{ ...defaultChartPadding, left: 10, right: 10 }}
 	height={600}
 >
 	<Layer>
diff --git a/docs/src/examples/components/GeoPath/animated-globe.svelte b/docs/src/examples/components/GeoPath/animated-globe.svelte
index cb8f43e23..e47fef053 100644
--- a/docs/src/examples/components/GeoPath/animated-globe.svelte
+++ b/docs/src/examples/components/GeoPath/animated-globe.svelte
@@ -10,6 +10,7 @@
 		Graticule,
 		Layer,
 		Tooltip,
+		defaultChartPadding,
 		type ChartContextValue
 	} from 'layerchart';
 	import { Button } from 'svelte-ux';
@@ -132,6 +133,7 @@
 		}}
 		tooltip={{ touchEvents: 'none' }}
 		bind:context
+		padding={{ ...defaultChartPadding, left: 5, right: 5 }}
 		height={600}
 	>
 		{#snippet children()}
diff --git a/docs/src/examples/components/GeoPath/sketchy-globe.svelte b/docs/src/examples/components/GeoPath/sketchy-globe.svelte
index a91bde3ba..08b5385ba 100644
--- a/docs/src/examples/components/GeoPath/sketchy-globe.svelte
+++ b/docs/src/examples/components/GeoPath/sketchy-globe.svelte
@@ -4,7 +4,14 @@
 	import { feature } from 'topojson-client';
 	import { presimplify, simplify } from 'topojson-simplify';
 
-	import { Chart, GeoPath, Graticule, Layer, type ChartContextValue } from 'layerchart';
+	import {
+		Chart,
+		GeoPath,
+		Graticule,
+		Layer,
+		defaultChartPadding,
+		type ChartContextValue
+	} from 'layerchart';
 	import GeoPathGlobeControls2 from '$lib/components/controls/GeoPathGlobeControls2.svelte';
 	import { TimerState } from '@layerstack/svelte-state';
 
@@ -47,6 +54,7 @@
 	}}
 	ondragstart={timer.stop}
 	bind:context
+	padding={{ ...defaultChartPadding, top: 5 }}
 	height={600}
 >
 	<Layer>
diff --git a/docs/src/examples/components/GeoPath/submarine-cables-globe.svelte b/docs/src/examples/components/GeoPath/submarine-cables-globe.svelte
index 1023857e9..074f4bb62 100644
--- a/docs/src/examples/components/GeoPath/submarine-cables-globe.svelte
+++ b/docs/src/examples/components/GeoPath/submarine-cables-globe.svelte
@@ -13,7 +13,8 @@
 		Graticule,
 		Layer,
 		Tooltip,
-		type ChartContextValue
+		type ChartContextValue,
+		defaultChartPadding
 	} from 'layerchart';
 	import GeoPathSubmarineControls from '$lib/components/controls/GeoPathSubmarineControls.svelte';
 
@@ -61,6 +62,7 @@
 	}}
 	ondragstart={timer.stop}
 	bind:context
+	padding={{ ...defaultChartPadding, top: 5 }}
 	height={600}
 >
 	{#snippet children({ context })}
diff --git a/docs/src/examples/components/GeoPath/translucent-globe.svelte b/docs/src/examples/components/GeoPath/translucent-globe.svelte
index 1e4ce0468..60a8f7e15 100644
--- a/docs/src/examples/components/GeoPath/translucent-globe.svelte
+++ b/docs/src/examples/components/GeoPath/translucent-globe.svelte
@@ -9,6 +9,7 @@
 		Graticule,
 		Layer,
 		Tooltip,
+		defaultChartPadding,
 		type ChartContextValue
 	} from 'layerchart';
 	import GeoPathTranslucentControls from '$lib/components/controls/GeoPathGlobeControls2.svelte';
@@ -50,6 +51,7 @@
 	}}
 	ondragstart={timer.stop}
 	bind:context
+	padding={{ ...defaultChartPadding, top: 5 }}
 	height={600}
 >
 	{#snippet children({ context })}
diff --git a/docs/src/examples/components/GeoSpline/draggable-globe.svelte b/docs/src/examples/components/GeoSpline/draggable-globe.svelte
index 14e3b6cb4..c06473889 100644
--- a/docs/src/examples/components/GeoSpline/draggable-globe.svelte
+++ b/docs/src/examples/components/GeoSpline/draggable-globe.svelte
@@ -2,7 +2,16 @@
 	import { geoOrthographic } from 'd3-geo';
 	import { feature } from 'topojson-client';
 
-	import { Chart, GeoEdgeFade, GeoPath, GeoPoint, GeoSpline, Graticule, Layer } from 'layerchart';
+	import {
+		Chart,
+		GeoEdgeFade,
+		GeoPath,
+		GeoPoint,
+		GeoSpline,
+		Graticule,
+		Layer,
+		defaultChartPadding
+	} from 'layerchart';
 
 	import { getWorldLinks, getCountriesTopology } from '$lib/geo.remote.js';
 
@@ -20,7 +29,7 @@
 		fitGeojson: countries,
 		applyTransform: ['rotate']
 	}}
-	padding={{ top: 100, bottom: 100 }}
+	padding={{ ...defaultChartPadding, top: 80, bottom: 80, left: 80, right: 80 }}
 	height={800}
 >
 	<Layer>
diff --git a/packages/layerchart/src/routes/docs/examples/Choropleth/+page.svelte b/packages/layerchart/src/routes/docs/examples/Choropleth/+page.svelte
index 8dc42a78a..f2278579b 100644
--- a/packages/layerchart/src/routes/docs/examples/Choropleth/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Choropleth/+page.svelte
@@ -82,6 +82,68 @@
             />
           {/each}
 
+<<<<<<< HEAD
+=======
+      <Legend
+        scale={colorScale}
+        title="Population"
+        tickFormat={(d) => format(d, 'metric', { maximumSignificantDigits: 2 })}
+        class="absolute bg-surface-100/80 px-2 py-1 backdrop-blur-sm rounded m-1"
+      />
+
+      <Tooltip.Root let:data>
+        {@const d = populationByFips.get(data.id)}
+        <Tooltip.Header>
+          {data.properties.name + ' - ' + data.properties.data?.state}
+        </Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item
+            label="Total Population"
+            value={d?.population}
+            format="integer"
+            valueAlign="right"
+          />
+          <Tooltip.Item
+            label="Est. Population under 18"
+            value={d?.populationUnder18}
+            format="integer"
+            valueAlign="right"
+          />
+          <Tooltip.Item
+            label="Est. Percent under 18"
+            value={d ? d.percentUnder18 / 100 : 0}
+            format="percentRound"
+            valueAlign="right"
+          />
+        </Tooltip.List>
+      </Tooltip.Root>
+    </Chart>
+  </div>
+</Preview>
+
+<h2>Canvas</h2>
+
+<Preview data={states}>
+  <div class="h-[600px]">
+    <Chart
+      geo={{
+        projection,
+        fitGeojson: states,
+      }}
+      transform={{
+        mode: 'canvas',
+        initialScrollMode: 'scale',
+      }}
+      padding={{ top: 60 }}
+      let:tooltip
+      let:transform
+    >
+      {@const strokeWidth = 1 / transform.scale}
+      <TransformControls />
+
+      <Canvas>
+        {#each enrichedCountiesFeatures as feature}
+>>>>>>> origin
           <GeoPath
             geojson={states}
             class="fill-none stroke-black/30 pointer-events-none"