diff --git a/src/_components/AxisX.html.svelte b/src/_components/AxisX.html.svelte
deleted file mode 100644
index 81313c04..00000000
--- a/src/_components/AxisX.html.svelte
+++ /dev/null
@@ -1,103 +0,0 @@
-<!--
-	@component
-	Generates an HTML x-axis, useful for server-side rendered charts.  This component is also configured to detect if your x-scale is an ordinal scale. If so, it will place the markers in the middle of the bandwidth.
- -->
-<script>
-	import { getContext } from 'svelte';
-
-	const { xScale } = getContext('LayerCake');
-
-	/** @type {Boolean} [gridlines=true] - Extend lines from the ticks into the chart space. */
-	export let gridlines = true;
-
-	/** @type {Boolean} [tickMarks=false] - Show a vertical mark for each tick. */
-	export let tickMarks = false;
-
-	/** @type {Boolean} [baseline=false] – Show a solid line at the bottom. */
-	export let baseline = false;
-
-	/** @type {Boolean} [snapTicks=false] - Instead of centering the text on the first and the last items, align them to the edges of the chart. */
-	export let snapTicks = false;
-
-	/** @type {Function} [formatTick=d => d] - A function that passes the current tick value and expects a nicely formatted value in return. */
-	export let formatTick = d => d;
-
-	/** @type {Number|Array|Function} [ticks] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. If nothing, it uses the default ticks supplied by the D3 function. */
-	export let ticks = undefined;
-
-	/** @type {Number} [yTick=7] - The distance from the baseline to place each tick value, in pixels. */
-	export let yTick = 7;
-
-	$: isBandwidth = typeof $xScale.bandwidth === 'function';
-
-	$: tickVals = Array.isArray(ticks) ? ticks :
-		isBandwidth ?
-			$xScale.domain() :
-			typeof ticks === 'function' ?
-				ticks($xScale.ticks()) :
-					$xScale.ticks(ticks);
-</script>
-
-<div class='axis x-axis' class:snapTicks>
-	{#each tickVals as tick, i (tick)}
-		{#if gridlines !== false}
-			<div class="gridline" style='left:{$xScale(tick)}%;top: 0px;bottom: 0;'></div>
-		{/if}
-		{#if tickMarks === true}
-			<div class="tick-mark" style='left:{$xScale(tick) + (isBandwidth ? $xScale.bandwidth() / 2 : 0)}%;height:6px;bottom: -6px;'></div>
-		{/if}
-		<div
-			class='tick tick-{ i }'
-			style='left:{$xScale(tick) + (isBandwidth ? $xScale.bandwidth() / 2 : 0)}%;top:100%;'>
-			<div
-				class="text"
-				style='top:{(yTick)}px;'>{formatTick(tick)}</div>
-		</div>
-	{/each}
-	{#if baseline === true}
-		<div class="baseline" style='top: 100%;width: 100%;'></div>
-	{/if}
-</div>
-
-<style>
-	.axis,
-	.tick,
-	.tick-mark,
-	.gridline,
-	.baseline {
-		position: absolute;
-	}
-	.axis {
-		width: 100%;
-		height: 100%;
-	}
-	.tick {
-		font-size: .725em;
-		font-weight: 200;
-	}
-
-	.gridline {
-		border-left: 1px dashed #aaa;
-	}
-
-	.tick-mark {
-		border-left: 1px solid #aaa;
-	}
-	.baseline {
-		border-top: 1px solid #aaa;
-	}
-
-	.tick .text {
-		color: #666;
-		position: relative;
-		white-space: nowrap;
-		transform: translateX(-50%);
-	}
-	/* This looks a little better at 40 percent than 50 */
-	.axis.snapTicks .tick:last-child {
-		transform: translateX(-40%);
-	}
-	.axis.snapTicks .tick.tick-0 {
-		transform: translateX(40%);
-	}
-</style>
diff --git a/src/_components/AxisX.percent-range.html.svelte b/src/_components/AxisX.percent-range.html.svelte
new file mode 100644
index 00000000..7ab3b5e2
--- /dev/null
+++ b/src/_components/AxisX.percent-range.html.svelte
@@ -0,0 +1,131 @@
+<!--
+	@component
+	Generates an HTML x-axis, useful for server-side rendered charts.  This component is also configured to detect if your x-scale is an ordinal scale. If so, it will place the markers in the middle of the bandwidth.
+ -->
+<script>
+	import { getContext } from 'svelte';
+
+	const { width, height, xScale, yRange } = getContext('LayerCake');
+
+	/** @type {Boolean} [tickMarks=false] - Show a vertical mark for each tick. */
+	export let tickMarks = false;
+
+	/** @type {Boolean} [gridlines=true] - Show gridlines extending into the chart area. */
+	export let gridlines = true;
+
+	/** @type {Number} [tickMarkLength=6] - The length of the tick mark. */
+	export let tickMarkLength = 6;
+
+	/** @type {Boolean} [baseline=false] – Show a solid line at the bottom. */
+	export let baseline = false;
+
+	/** @type {Boolean} [snapLabels=false] - Instead of centering the text labels on the first and the last items, align them to the edges of the chart. */
+	export let snapLabels = false;
+
+	/** @type {Function} [format=d => d] - A function that passes the current tick value and expects a nicely formatted value in return. */
+	export let format = d => d;
+
+	/** @type {Number|Array|Function} [ticks] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. If nothing, it uses the default ticks supplied by the D3 function. */
+	export let ticks = undefined;
+
+	/** @type {Number} [tickGutter=0] - The amount of whitespace between the start of the tick and the chart drawing area (the yRange min). */
+	export let tickGutter = 0;
+
+	/** @type {Number} [dx=0] - Any optional value passed to the `dx` attribute on the text label. */
+	export let dx = 0;
+
+	/** @type {Number} [dy=0] - Any optional value passed to the `dy` attribute on the text label. */
+	export let dy = 1;
+
+	$: tickLen = tickMarks === true
+		? tickMarkLength ?? 6
+		: 0;
+
+	$: isBandwidth = typeof $xScale.bandwidth === 'function';
+
+	$: tickVals = Array.isArray(ticks) ? ticks :
+		isBandwidth ?
+			$xScale.domain() :
+			typeof ticks === 'function' ?
+				ticks($xScale.ticks()) :
+					$xScale.ticks(ticks);
+
+	$: halfBand = isBandwidth ? $xScale.bandwidth() / 2 : 0
+</script>
+
+<div class='axis x-axis' class:snapLabels>
+	{#each tickVals as tick, i (tick)}
+		{@const tickValPx = $xScale(tick)}
+
+		{#if baseline === true}
+			<div class="baseline" style='top:100%; width:100%;'></div>
+		{/if}
+
+		{#if gridlines === true}
+			<div
+				class="gridline"
+				style:left='{tickValPx}%'
+				style='top:0; bottom:0;'></div>
+		{/if}
+		{#if tickMarks === true}
+			<div
+				class="tick-mark"
+				style:left='{tickValPx + halfBand}%'
+				style:height='{tickLen}px'
+				style:bottom='{-tickLen - tickGutter}px'
+			></div>
+		{/if}
+		<div
+			class='tick tick-{i}'
+			style:left='{tickValPx + halfBand}%'
+			style='top:calc(100% + {tickGutter}px);'>
+			<div
+				class="text"
+				style:top='{tickLen}px'
+				style:transform='translate(calc(-50% + {dx}px), {dy}px)'
+			>{format(tick)}</div>
+		</div>
+	{/each}
+</div>
+
+<style>
+	.axis,
+	.tick,
+	.tick-mark,
+	.gridline,
+	.baseline {
+		position: absolute;
+	}
+	.axis {
+		width: 100%;
+		height: 100%;
+	}
+	.tick {
+		font-size: 11px;
+	}
+
+	.gridline {
+		border-left: 1px dashed #aaa;
+	}
+
+	.tick-mark {
+		border-left: 1px solid #aaa;
+	}
+	.baseline {
+		border-top: 1px solid #aaa;
+	}
+
+	.tick .text {
+		color: #666;
+		position: relative;
+		white-space: nowrap;
+		transform: translateX(-50%);
+	}
+	/* This looks a little better at 40 percent than 50 */
+	.axis.snapLabels .tick:last-child {
+		transform: translateX(-40%);
+	}
+	.axis.snapLabels .tick.tick-0 {
+		transform: translateX(40%);
+	}
+</style>
diff --git a/src/_components/AxisX.svelte b/src/_components/AxisX.svelte
index e45c34d0..91990390 100644
--- a/src/_components/AxisX.svelte
+++ b/src/_components/AxisX.svelte
@@ -4,43 +4,41 @@
  -->
 <script>
 	import { getContext } from 'svelte';
-	const { width, height, xScale, yRange } = getContext('LayerCake');
 
-	/** @type {Boolean} [gridlines=true] - Extend lines from the ticks into the chart space */
-	export let gridlines = true;
+	const { width, height, xScale, yRange } = getContext('LayerCake');
 
 	/** @type {Boolean} [tickMarks=false] - Show a vertical mark for each tick. */
 	export let tickMarks = false;
 
+	/** @type {Boolean} [gridlines=true] - Show gridlines extending into the chart area. */
+	export let gridlines = true;
+
+	/** @type {Number} [tickMarkLength=6] - The length of the tick mark. */
+	export let tickMarkLength = 6;
+
 	/** @type {Boolean} [baseline=false] – Show a solid line at the bottom. */
 	export let baseline = false;
 
-	/** @type {Boolean} [snapTicks=false] - Instead of centering the text on the first and the last items, align them to the edges of the chart. */
-	export let snapTicks = false;
+	/** @type {Boolean} [snapLabels=false] - Instead of centering the text labels on the first and the last items, align them to the edges of the chart. */
+	export let snapLabels = false;
 
-	/** @type {Function} [formatTick=d => d] - A function that passes the current tick value and expects a nicely formatted value in return. */
-	export let formatTick = d => d;
+	/** @type {Function} [format=d => d] - A function that passes the current tick value and expects a nicely formatted value in return. */
+	export let format = d => d;
 
 	/** @type {Number|Array|Function} [ticks] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. If nothing, it uses the default ticks supplied by the D3 function. */
 	export let ticks = undefined;
 
-	/** @type {Number} [xTick=0] - How far over to position the text marker. */
-	export let xTick = 0;
-
-	/** @type {Number} [yTick=16] - The distance from the baseline to place each tick value. */
-	export let yTick = 16;
+	/** @type {Number} [tickGutter=0] - The amount of whitespace between the start of the tick and the chart drawing area (the yRange min). */
+	export let tickGutter = 0;
 
-	$: isBandwidth = typeof $xScale.bandwidth === 'function';
+	/** @type {Number} [dx=0] - Any optional value passed to the `dx` attribute on the text label. */
+	export let dx = 0;
 
-	$: tickVals = Array.isArray(ticks) ? ticks :
-		isBandwidth ?
-			$xScale.domain() :
-			typeof ticks === 'function' ?
-				ticks($xScale.ticks()) :
-					$xScale.ticks(ticks);
+	/** @type {Number} [dy=12] - Any optional value passed to the `dy` attribute on the text label. */
+	export let dy = 12;
 
-	function textAnchor(i) {
-		if (snapTicks === true) {
+	function textAnchor(i, sl) {
+		if (sl === true) {
 			if (i === 0) {
 				return 'start';
 			}
@@ -50,41 +48,68 @@
 		}
 		return 'middle';
 	}
+
+	$: tickLen = tickMarks === true
+		? tickMarkLength ?? 6
+		: 0;
+
+	$: isBandwidth = typeof $xScale.bandwidth === 'function';
+
+	$: tickVals = Array.isArray(ticks) ? ticks :
+		isBandwidth ?
+			$xScale.domain() :
+			typeof ticks === 'function' ?
+				ticks($xScale.ticks()) :
+					$xScale.ticks(ticks);
+
+	$: halfBand = isBandwidth ? $xScale.bandwidth() / 2 : 0
 </script>
 
-<g class="axis x-axis" class:snapTicks>
+<g class="axis x-axis" class:snapLabels>
 	{#each tickVals as tick, i (tick)}
+		{#if baseline === true}
+			<line
+				class="baseline"
+				y1={$height}
+				y2={$height}
+				x1="0"
+				x2={$width}
+			/>
+		{/if}
+
 		<g class="tick tick-{i}" transform="translate({$xScale(tick)},{Math.max(...$yRange)})">
-			{#if gridlines !== false}
-				<line class="gridline" y1={$height * -1} y2="0" x1="0" x2="0" />
+			{#if gridlines === true}
+				<line
+					class="gridline"
+					x1={halfBand}
+					x2={halfBand}
+					y1={-$height}
+					y2="0"
+				/>
 			{/if}
 			{#if tickMarks === true}
 				<line
 					class="tick-mark"
-					y1={0}
-					y2={6}
-					x1={isBandwidth ? $xScale.bandwidth() / 2 : 0}
-					x2={isBandwidth ? $xScale.bandwidth() / 2 : 0}
+					x1={halfBand}
+					x2={halfBand}
+					y1={tickGutter}
+					y2={tickGutter + tickLen}
 				/>
 			{/if}
 			<text
-				x={isBandwidth ? ($xScale.bandwidth() / 2 + xTick) : xTick}
-				y={yTick}
-				dx=""
-				dy=""
-				text-anchor={textAnchor(i)}>{formatTick(tick)}</text
+				x={halfBand}
+				y={tickGutter + tickLen}
+				{dx}
+				{dy}
+				text-anchor={textAnchor(i, snapLabels)}>{format(tick)}</text
 			>
 		</g>
 	{/each}
-	{#if baseline === true}
-		<line class="baseline" y1={$height + 0.5} y2={$height + 0.5} x1="0" x2={$width} />
-	{/if}
 </g>
 
 <style>
 	.tick {
-		font-size: 0.725em;
-		font-weight: 200;
+		font-size: 11px;
 	}
 
 	line,
@@ -102,10 +127,10 @@
 		stroke-dasharray: 0;
 	}
 	/* This looks slightly better */
-	.axis.snapTicks .tick:last-child text {
+	.axis.snapLabels .tick:last-child text {
 		transform: translateX(3px);
 	}
-	.axis.snapTicks .tick.tick-0 text {
+	.axis.snapLabels .tick.tick-0 text {
 		transform: translateX(-3px);
 	}
 </style>
diff --git a/src/_components/AxisXTop.percent-range.html.svelte b/src/_components/AxisXTop.percent-range.html.svelte
new file mode 100644
index 00000000..595faf56
--- /dev/null
+++ b/src/_components/AxisXTop.percent-range.html.svelte
@@ -0,0 +1,132 @@
+<!--
+	@component
+	Generates an HTML top x-axis, useful for server-side rendered charts.  This component is also configured to detect if your x-scale is an ordinal scale. If so, it will place the markers in the middle of the bandwidth.
+ -->
+ <script>
+	import { getContext } from 'svelte';
+
+	const { width, height, xScale, yRange } = getContext('LayerCake');
+
+	/** @type {Boolean} [tickMarks=false] - Show a vertical mark for each tick. */
+	export let tickMarks = false;
+
+	/** @type {Boolean} [gridlines=true] - Show gridlines extending into the chart area. */
+	export let gridlines = true;
+
+	/** @type {Number} [tickMarkLength=6] - The length of the tick mark. */
+	export let tickMarkLength = 6;
+
+	/** @type {Boolean} [baseline=false] – Show a solid line at the bottom. */
+	export let baseline = false;
+
+	/** @type {Boolean} [snapLabels=false] - Instead of centering the text labels on the first and the last items, align them to the edges of the chart. */
+	export let snapLabels = false;
+
+	/** @type {Function} [format=d => d] - A function that passes the current tick value and expects a nicely formatted value in return. */
+	export let format = d => d;
+
+	/** @type {Number|Array|Function} [ticks] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. If nothing, it uses the default ticks supplied by the D3 function. */
+	export let ticks = undefined;
+
+	/** @type {Number} [tickGutter=0] - The amount of whitespace between the start of the tick and the chart drawing area (the yRange min). */
+	export let tickGutter = 0;
+
+	/** @type {Number} [dx=0] - Any optional value passed to the `dx` attribute on the text label. */
+	export let dx = 0;
+
+	/** @type {Number} [dy=0] - Any optional value passed to the `dy` attribute on the text label. */
+	export let dy = 0;
+
+	$: tickLen = tickMarks === true
+		? tickMarkLength ?? 6
+		: 0;
+
+	$: isBandwidth = typeof $xScale.bandwidth === 'function';
+
+	$: tickVals = Array.isArray(ticks) ? ticks :
+		isBandwidth ?
+			$xScale.domain() :
+			typeof ticks === 'function' ?
+				ticks($xScale.ticks()) :
+					$xScale.ticks(ticks);
+
+	$: halfBand = isBandwidth ? $xScale.bandwidth() / 2 : 0
+</script>
+
+<div class='axis x-axis' class:snapLabels>
+	{#each tickVals as tick, i (tick)}
+		{@const tickValPx = $xScale(tick)}
+
+		{#if baseline === true}
+			<div class="baseline" style='top:0; width:100%;'></div>
+		{/if}
+
+		{#if gridlines === true}
+			<div
+				class="gridline"
+				style:left={tickValPx + '%'}
+				style='top:0; bottom:0;'
+			></div>
+		{/if}
+		{#if tickMarks === true}
+			<div
+				class="tick-mark"
+				style:left={(tickValPx + halfBand) + '%'}
+				style:height={tickLen + 'px'}
+				style:top={(-tickLen - tickGutter) + 'px'}
+			></div>
+		{/if}
+		<div
+			class='tick tick-{i}'
+			style:left={(tickValPx + halfBand) + '%'}
+			style='top:{-tickGutter}px;'>
+			<div
+				class="text"
+				style:top={(-tickLen + 2) + 'px'}
+				style:transform={`translate(calc(-50% + ${dx}px), calc(-100% + ${dy}px))`}
+			>{format(tick)}</div>
+		</div>
+	{/each}
+</div>
+
+<style>
+	.axis,
+	.tick,
+	.tick-mark,
+	.gridline,
+	.baseline {
+		position: absolute;
+	}
+	.axis {
+		width: 100%;
+		height: 100%;
+	}
+	.tick {
+		font-size: 11px;
+	}
+
+	.gridline {
+		border-left: 1px dashed #aaa;
+	}
+
+	.tick-mark {
+		border-left: 1px solid #aaa;
+	}
+	.baseline {
+		border-top: 1px solid #aaa;
+	}
+
+	.tick .text {
+		color: #666;
+		position: relative;
+		white-space: nowrap;
+		transform: translateX(-50%);
+	}
+	/* This looks a little better at 40 percent than 50 */
+	.axis.snapLabels .tick:last-child {
+		transform: translateX(-40%);
+	}
+	.axis.snapLabels .tick.tick-0 {
+		transform: translateX(40%);
+	}
+</style>
diff --git a/src/_components/AxisXTop.svelte b/src/_components/AxisXTop.svelte
new file mode 100644
index 00000000..35106c21
--- /dev/null
+++ b/src/_components/AxisXTop.svelte
@@ -0,0 +1,130 @@
+<!--
+	@component
+	Generates an SVG top x-axis. This component is also configured to detect if your x-scale is an ordinal scale. If so, it will place the markers in the middle of the bandwidth.
+ -->
+ <script>
+	import { getContext } from 'svelte';
+
+	const { width, height, xScale, yRange } = getContext('LayerCake');
+
+	/** @type {Boolean} [tickMarks=false] - Show a vertical mark for each tick. */
+	export let tickMarks = false;
+
+	/** @type {Boolean} [gridlines=true] - Show gridlines extending into the chart area. */
+	export let gridlines = true;
+
+	/** @type {Number} [tickMarkLength=6] - The length of the tick mark. */
+	export let tickMarkLength = 6;
+
+	/** @type {Boolean} [baseline=false] – Show a solid line at the bottom. */
+	export let baseline = false;
+
+	/** @type {Boolean} [snapLabels=false] - Instead of centering the text labels on the first and the last items, align them to the edges of the chart. */
+	export let snapLabels = false;
+
+	/** @type {Function} [format=d => d] - A function that passes the current tick value and expects a nicely formatted value in return. */
+	export let format = d => d;
+
+	/** @type {Number|Array|Function} [ticks] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. If nothing, it uses the default ticks supplied by the D3 function. */
+	export let ticks = undefined;
+
+	/** @type {Number} [tickGutter=0] - The amount of whitespace between the start of the tick and the chart drawing area (the xRange min). */
+	export let tickGutter = 0;
+
+	/** @type {Number} [dx=0] - Any optional value passed to the `dx` attribute on the text label. */
+	export let dx = 0;
+
+	/** @type {Number} [dy=-4] - Any optional value passed to the `dy` attribute on the text label. */
+	export let dy = -4;
+
+	function textAnchor(i, sl) {
+		if (sl === true) {
+			if (i === 0) {
+				return 'start';
+			}
+			if (i === tickVals.length - 1) {
+				return 'end';
+			}
+		}
+		return 'middle';
+	}
+
+	$: tickLen = tickMarks === true
+		? tickMarkLength ?? 6
+		: 0;
+
+	$: isBandwidth = typeof $xScale.bandwidth === 'function';
+
+	$: tickVals = Array.isArray(ticks) ? ticks :
+		isBandwidth ?
+			$xScale.domain() :
+			typeof ticks === 'function' ?
+				ticks($xScale.ticks()) :
+					$xScale.ticks(ticks);
+
+	$: halfBand = isBandwidth ? $xScale.bandwidth() / 2 : 0
+</script>
+
+<g class="axis x-axis" class:snapLabels>
+	{#each tickVals as tick, i (tick)}
+		{#if baseline === true}
+			<line class="baseline" y1='0' y2='0' x1="0" x2={$width} />
+		{/if}
+
+		<g class="tick tick-{i}" transform="translate({$xScale(tick)},{Math.min(...$yRange)})">
+			{#if gridlines === true}
+				<line
+					class="gridline"
+					x1="0"
+					x2="0"
+					y1={$height}
+					y2="0"
+				/>
+			{/if}
+			{#if tickMarks === true}
+				<line
+					class="tick-mark"
+					x1={halfBand}
+					x2={halfBand}
+					y1={-tickGutter}
+					y2={-tickLen - tickGutter}
+				/>
+			{/if}
+			<text
+				x={halfBand}
+				y={-tickGutter - tickLen}
+				{dx}
+				{dy}
+				text-anchor={textAnchor(i, snapLabels)}>{format(tick)}</text
+			>
+		</g>
+	{/each}
+</g>
+
+<style>
+	.tick {
+		font-size: 11px;
+	}
+
+	line,
+	.tick line {
+		stroke: #aaa;
+		stroke-dasharray: 2;
+	}
+
+	.tick text {
+		fill: #666;
+	}
+
+	.tick .tick-mark,
+	.baseline {
+		stroke-dasharray: 0;
+	}
+	/* This looks slightly better */
+	.axis.snapLabels .tick:last-child text {
+		transform: translateX(3px);
+	}
+	.axis.snapLabels .tick.tick-0 text {
+		transform: translateX(-3px);
+	}
+</style>
diff --git a/src/_components/AxisY.html.svelte b/src/_components/AxisY.html.svelte
deleted file mode 100644
index 48037a00..00000000
--- a/src/_components/AxisY.html.svelte
+++ /dev/null
@@ -1,98 +0,0 @@
-<!--
-	@component
-	Generates an HTML y-axis.
- -->
-<script>
-	import { getContext } from 'svelte';
-
-	const { padding, xRange, yScale } = getContext('LayerCake');
-
-	/** @type {Boolean} [gridlines=true] - Extend lines from the ticks into the chart space */
-	export let gridlines = true;
-
-	/** @type {Boolean} [tickMarks=false] - Show a vertical mark for each tick. */
-	export let tickMarks = false;
-
-	/** @type {Boolean} [baseline=false] – Show a solid line at the bottom. */
-	export let baseline = false;
-
-	/** @type {Function} [formatTick=d => d] - A function that passes the current tick value and expects a nicely formatted value in return. */
-	export let formatTick = d => d;
-
-	/** @type {Number|Array|Function} [ticks=4] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. */
-	export let ticks = 4;
-
-	/** @type {Number} [xTick=-4] - How far over to position the text marker. */
-	export let xTick = -4;
-
-	/** @type {Number} [yTick=-1] - How far up and down to position the text marker. */
-	export let yTick = -1;
-
-	$: isBandwidth = typeof $yScale.bandwidth === 'function';
-
-	$: tickVals = Array.isArray(ticks) ? ticks :
-		isBandwidth ?
-			$yScale.domain() :
-			typeof ticks === 'function' ?
-				ticks($yScale.ticks()) :
-					$yScale.ticks(ticks);
-</script>
-
-<div class='axis y-axis' style='transform:translate(-{$padding.left}px, 0)'>
-	{#each tickVals as tick, i (tick)}
-		<div class='tick tick-{i}' style='top:{$yScale(tick) + (isBandwidth ? $yScale.bandwidth () / 2 : 0)}%;left:{$xRange[0]}%;'>
-			{#if gridlines !== false}
-				<div class="gridline" style='top:0;left:{isBandwidth ? $padding.left : 0}px;right:-{$padding.left + $padding.right}px;'></div>
-			{/if}
-			{#if baseline !== false && i === 0}
-				<div class="gridline baseline" style='top:0;left:{isBandwidth ? $padding.left : 0};right:-{$padding.left + $padding.right}px;'></div>
-			{/if}
-			{#if tickMarks === true}
-				<div class="tick-mark" style='top:0;left:{isBandwidth ? $padding.left - 6 : 0}px;width:6px;'></div>
-			{/if}
-			<div
-				class="text"
-				style='
-					top:{yTick}px;
-					left:{isBandwidth ? ($padding.left + xTick - 4) : 0}px;
-					transform: translate({isBandwidth ? '-100%' : 0}, {isBandwidth ? -50 - Math.floor($yScale.bandwidth() / -2) : '-100'}%);
-				'
-			>{formatTick(tick)}</div>
-		</div>
-	{/each}
-</div>
-
-<style>
-	.axis,
-	.tick,
-	.tick-mark,
-	.gridline,
-	.baseline,
-	.text {
-		position: absolute;
-	}
-	.axis {
-		width: 100%;
-		height: 100%;
-	}
-	.tick {
-		font-size: 12px;
-		width: 100%;
-		font-weight: 100;
-	}
-
-	.gridline {
-		border-top: 1px dashed #aaa;
-	}
-	.tick-mark {
-		border-top: 1px solid #aaa;
-	}
-
-	.baseline.gridline {
-		border-top-style: solid;
-	}
-
-	.tick .text {
-		color: #666;
-	}
-</style>
diff --git a/src/_components/AxisY.percent-range.html.svelte b/src/_components/AxisY.percent-range.html.svelte
new file mode 100644
index 00000000..6f9d2866
--- /dev/null
+++ b/src/_components/AxisY.percent-range.html.svelte
@@ -0,0 +1,136 @@
+<!--
+	@component
+	Generates an HTML y-axis. This component is also configured to detect if your y-scale is an ordinal scale. If so, it will place the tickMarks in the middle of the bandwidth.
+ -->
+ <script>
+	import { getContext } from 'svelte';
+
+	const { xRange, yScale, width } = getContext('LayerCake');
+
+	/** @type {Boolean} [tickMarks=true] - Show marks next to the tick label. */
+	export let tickMarks = true;
+
+	/** @type {String} [labelPosition='even'] - Whether the label sits even with its value ('even') or sits on top ('above') the tick mark. Default is 'even'. */
+	export let labelPosition = 'even';
+
+	/** @type {Boolean} [snapBaselineLabel=false] - When labelPosition='even', adjust the lowest label so that it sits above the tick mark. */
+	export let snapBaselineLabel = false;
+
+	/** @type {Boolean} [gridlines=true] - Show gridlines extending into the chart area. */
+	export let gridlines = true;
+
+	/** @type {Number} [tickMarkLength=undefined] - The length of the tick mark. If not set, becomes the length of the widest tick. */
+	export let tickMarkLength = undefined;
+
+	/** @type {Function} [format=d => d] - A function that passes the current tick value and expects a nicely formatted value in return. */
+	export let format = d => d ;
+
+	/** @type {Number|Array|Function} [ticks=4] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. */
+	export let ticks = 4;
+
+	/** @type {Number} [tickGutter=0] - The amount of whitespace between the start of the tick and the chart drawing area (the xRange min). */
+	export let tickGutter = 0;
+
+	/** @type {Number} [dx=0] - Any optional value passed to the `dx` attribute on the text label. */
+	export let dx = 0;
+
+	/** @type {Number} [dy=-3] - Any optional value passed to the `dy` attribute on the text label. */
+	export let dy = -3;
+
+	/** @type {Number} [charPixelWidth=7.25] - Used to calculate the widest label length to offset labels. Adjust if the automatic tick length doesn't look right because you have a bigger font (or just set `tickMarkLength` to a pixel value). */
+	export let charPixelWidth = 7.25;
+
+	$: isBandwidth = typeof $yScale.bandwidth === 'function';
+
+	$: tickVals = Array.isArray(ticks) ? ticks :
+		isBandwidth ?
+			$yScale.domain() :
+			typeof ticks === 'function' ?
+				ticks($yScale.ticks()) :
+					$yScale.ticks(ticks);
+
+	function calcStringLength(sum, val) {
+		if (val === ',' || val === '.') return sum + charPixelWidth * 0.5;
+		return sum + charPixelWidth;
+	}
+
+	$: tickLen = tickMarks === true
+		? labelPosition === 'above'
+			? tickMarkLength ?? widestTickLen
+			: tickMarkLength ?? 6
+		: 0;
+
+	$: widestTickLen = Math.max(10, Math.max(...tickVals.map(d => format(d).toString().split('').reduce(calcStringLength, 0))));
+
+	$: x1 = -tickGutter - (labelPosition === 'above' ? widestTickLen : tickLen);
+	$: y = isBandwidth ? $yScale.bandwidth() / 2 : 0;
+
+	$: maxTickValPx = Math.max(...tickVals.map($yScale));
+</script>
+
+<div class='axis y-axis'>
+	{#each tickVals as tick, i (tick)}
+		{@const tickValPx = $yScale(tick)}
+
+		<div class='tick tick-{i}' style='left:{$xRange[0]}%;top:{tickValPx}%;'>
+			{#if gridlines === true}
+				<div
+					class="gridline"
+					style="top:0;"
+					style:left='{x1}px'
+					style:right='0px'
+				></div>
+			{/if}
+			{#if tickMarks === true}
+				<div
+					class="tick-mark"
+					style="top:0;"
+					style:left='{x1}px'
+					style:width='{tickLen}px'
+				></div>
+			{/if}
+			<div
+				class="text"
+				style:top='{y}px'
+				style:text-align='{labelPosition === 'even' ? 'right' : 'left'}'
+				style:width='{widestTickLen}px'
+				style:left='{-widestTickLen - tickGutter - (labelPosition === 'even' ? tickLen : 0)}px'
+				style:transform='translate({dx + (labelPosition === 'even' ? -3 : 0)}px, calc(-50% + {dy + (labelPosition === 'above' || (snapBaselineLabel === true && tickValPx === maxTickValPx) ? -3 : 4)}px))'
+			>{format(tick)}</div>
+		</div>
+	{/each}
+</div>
+
+<style>
+	.axis,
+	.tick,
+	.tick-mark,
+	.gridline,
+	.baseline,
+	.text {
+		position: absolute;
+	}
+	.axis {
+		width: 100%;
+		height: 100%;
+	}
+	.tick {
+		font-size: 11px;
+		width: 100%;
+	}
+
+	.gridline {
+		border-top: 1px dashed #aaa;
+	}
+	.tick-mark {
+		border-top: 1px solid #aaa;
+	}
+
+	.baseline.gridline {
+		border-top-style: solid;
+	}
+
+	.tick .text {
+		color: #666;
+	}
+</style>
diff --git a/src/_components/AxisY.svelte b/src/_components/AxisY.svelte
index 38439862..0393dd45 100644
--- a/src/_components/AxisY.svelte
+++ b/src/_components/AxisY.svelte
@@ -1,38 +1,44 @@
 <!--
 	@component
-	Generates an SVG y-axis. This component is also configured to detect if your y-scale is an ordinal scale. If so, it will place the markers in the middle of the bandwidth.
+	Generates an SVG y-axis. This component is also configured to detect if your y-scale is an ordinal scale. If so, it will place the tickMarks in the middle of the bandwidth.
  -->
 <script>
 	import { getContext } from 'svelte';
 
-	const { padding, xRange, yScale } = getContext('LayerCake');
+	const { xRange, yScale, width } = getContext('LayerCake');
 
-	/** @type {Boolean} [gridlines=true] - Extend lines from the ticks into the chart space */
+	/** @type {Boolean} [tickMarks=false] - Show marks next to the tick label. */
+	export let tickMarks = false;
+
+	/** @type {String} [labelPosition='even'] - Whether the label sits even with its value ('even') or sits on top ('above') the tick mark. Default is 'even'. */
+	export let labelPosition = 'even';
+
+	/** @type {Boolean} [snapBaselineLabel=false] - When labelPosition='even', adjust the lowest label so that it sits above the tick mark. */
+	export let snapBaselineLabel = false;
+
+	/** @type {Boolean} [gridlines=true] - Show gridlines extending into the chart area. */
 	export let gridlines = true;
 
-	/** @type {Boolean} [tickMarks=false] - Show a vertical mark for each tick. */
-	export let tickMarks = false;
+	/** @type {Number} [tickMarkLength=undefined] - The length of the tick mark. If not set, becomes the length of the widest tick. */
+	export let tickMarkLength = undefined;
 
-	/** @type {Function} [formatTick=d => d] - A function that passes the current tick value and expects a nicely formatted value in return. */
-	export let formatTick = d => d;
+	/** @type {Function} [format=d => d] - A function that passes the current tick value and expects a nicely formatted value in return. */
+	export let format = d => d ;
 
 	/** @type {Number|Array|Function} [ticks=4] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. */
 	export let ticks = 4;
 
-	/** @type {Number} [xTick=0] - How far over to position the text marker. */
-	export let xTick = 0;
-
-	/** @type {Number} [yTick=0] - How far up and down to position the text marker. */
-	export let yTick = 0;
+	/** @type {Number} [tickGutter=0] - The amount of whitespace between the start of the tick and the chart drawing area (the xRange min). */
+	export let tickGutter = 0;
 
-	/** @type {Number} [dxTick=0] - Any optional value passed to the `dx` attribute on the text marker and tick mark (if visible). This is ignored on the text marker if your scale is ordinal. */
-	export let dxTick = 0;
+	/** @type {Number} [dx=0] - Any optional value passed to the `dx` attribute on the text label. */
+	export let dx = 0;
 
-	/** @type {Number} [dyTick=-4] - Any optional value passed to the `dy` attribute on the text marker and tick mark (if visible). This is ignored on the text marker if your scale is ordinal. */
-	export let dyTick = -4;
+	/** @type {Number} [dy=0] - Any optional value passed to the `dy` attribute on the text label. */
+	export let dy = 0;
 
-	/** @type {String} [textAnchor='start'] The CSS `text-anchor` passed to the label. This is automatically set to "end" if the scale has a bandwidth method, like in ordinal scales. */
-	export let textAnchor = 'start';
+	/** @type {Number} [charPixelWidth=7.25] - Used to calculate the widest label length to offset labels. Adjust if the automatic tick length doesn't look right because you have a bigger font (or just set `tickMarkLength` to a pixel value). */
+	export let charPixelWidth = 7.25;
 
 	$: isBandwidth = typeof $yScale.bandwidth === 'function';
 
@@ -42,43 +48,62 @@
 			typeof ticks === 'function' ?
 				ticks($yScale.ticks()) :
 					$yScale.ticks(ticks);
+
+	function calcStringLength(sum, val) {
+		if (val === ',' || val === '.') return sum + charPixelWidth * 0.5;
+		return sum + charPixelWidth;
+	}
+
+	$: tickLen = tickMarks === true
+		? labelPosition === 'above'
+			? tickMarkLength ?? widestTickLen
+			: tickMarkLength ?? 6
+		: 0;
+
+	$: widestTickLen = Math.max(10, Math.max(...tickVals.map(d => format(d).toString().split('').reduce(calcStringLength, 0))));
+
+	$: x1 = -tickGutter - (labelPosition === 'above' ? widestTickLen : tickLen);
+	$: y = isBandwidth ? $yScale.bandwidth() / 2 : 0;
+
+	$: maxTickValPx = Math.max(...tickVals.map($yScale));
 </script>
 
-<g class='axis y-axis' transform='translate({-$padding.left}, 0)'>
+<g class='axis y-axis'>
 	{#each tickVals as tick (tick)}
-		<g class='tick tick-{tick}' transform='translate({$xRange[0] + (isBandwidth ? $padding.left : 0)}, {$yScale(tick)})'>
-			{#if gridlines !== false}
+		{@const tickValPx = $yScale(tick)}
+		<g class='tick tick-{tick}' transform='translate({$xRange[0]}, {tickValPx})'>
+			{#if gridlines === true}
 				<line
 					class="gridline"
-					x2='100%'
-					y1={(isBandwidth ? ($yScale.bandwidth() / 2) : 0)}
-					y2={(isBandwidth ? ($yScale.bandwidth() / 2) : 0)}
+					{x1}
+					x2='{$width}'
+					y1={y}
+					y2={y}
 				></line>
 			{/if}
 			{#if tickMarks === true}
 				<line
 					class='tick-mark'
-					x1='0'
-					x2='{isBandwidth ? -6 : 6}'
-					y1={(isBandwidth ? ($yScale.bandwidth() / 2) : 0)}
-					y2={(isBandwidth ? ($yScale.bandwidth() / 2) : 0)}
+					{x1}
+					x2={x1 + tickLen}
+					y1={y}
+					y2={y}
 				></line>
 			{/if}
 			<text
-				x='{xTick}'
-				y='{(isBandwidth ? ($yScale.bandwidth() / 2) + yTick : yTick)}'
-				dx='{isBandwidth ? -9 : dxTick}'
-				dy='{isBandwidth ? 4 : dyTick}'
-				style="text-anchor:{isBandwidth ? 'end' : textAnchor};"
-			>{formatTick(tick)}</text>
+				x='{x1}'
+				{y}
+				dx={dx + (labelPosition === 'even' ? -3 : 0)}
+				text-anchor={labelPosition === 'above' ? 'start' : 'end'}
+				dy='{dy + (labelPosition === 'above' || (snapBaselineLabel === true && tickValPx === maxTickValPx) ? -3 : 4)}'
+			>{format(tick)}</text>
 		</g>
 	{/each}
 </g>
 
 <style>
 	.tick {
-		font-size: .725em;
-		font-weight: 200;
+		font-size: 11px;
 	}
 
 	.tick line {
diff --git a/src/_components/AxisYRight.percent-range.html.svelte b/src/_components/AxisYRight.percent-range.html.svelte
new file mode 100644
index 00000000..f1b0a81c
--- /dev/null
+++ b/src/_components/AxisYRight.percent-range.html.svelte
@@ -0,0 +1,133 @@
+<!--
+	@component
+	Generates an HTML y-axis on the right-hand side. This component is also configured to detect if your y-scale is an ordinal scale. If so, it will place the markers in the middle of the bandwidth.
+ -->
+ <script>
+	import { getContext } from 'svelte';
+
+	const { xRange, yScale, width } = getContext('LayerCake');
+
+	/** @type {Boolean} [tickMarks=true] - Show marks next to the tick label. */
+	export let tickMarks = true;
+
+	/** @type {String} [labelPosition='even'] - Whether the label sits even with its value ('even') or sits on top ('above') the tick mark. Default is 'even'. */
+	export let labelPosition = 'even';
+
+	/** @type {Boolean} [snapBaselineLabel=false] - When labelPosition='even', adjust the lowest label so that it sits above the tick mark. */
+	export let snapBaselineLabel = false;
+
+	/** @type {Boolean} [gridlines=true] - When labelPosition='even', adjust the lowest label so that it sits above the tick mark. */
+	export let gridlines = true;
+
+	/** @type {Number} [tickMarkLength=undefined] - The length of the tick mark. If not set, becomes the length of the widest tick. */
+	export let tickMarkLength = undefined;
+
+	/** @type {Function} [format=d => d] - A function that passes the current tick value and expects a nicely formatted value in return. */
+	export let format = d => d ;
+
+	/** @type {Number|Array|Function} [ticks=4] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. */
+	export let ticks = 4;
+
+	/** @type {Number} [tickGutter=5] - The amount of whitespace between the start of the tick and the chart drawing area (the xRange min). */
+	export let tickGutter = 5;
+
+	/** @type {Number} [dx=0] - Any optional value passed to the `dx` attribute on the text label. */
+	export let dx = 0;
+
+	/** @type {Number} [dy=-3] - Any optional value passed to the `dy` attribute on the text label. */
+	export let dy = -3;
+
+	/** @type {Number} [charPixelWidth=7.25] - Used to calculate the widest label length to offset labels. Adjust if the automatic tick length doesn't look right because you have a bigger font (or just set `tickMarkLength` to a pixel value). */
+	export let charPixelWidth = 7.25;
+
+	$: isBandwidth = typeof $yScale.bandwidth === 'function';
+
+	$: tickVals = Array.isArray(ticks) ? ticks :
+		isBandwidth ?
+			$yScale.domain() :
+			typeof ticks === 'function' ?
+				ticks($yScale.ticks()) :
+					$yScale.ticks(ticks);
+
+	function calcStringLength(sum, val) {
+		if (val === ',' || val === '.') return sum + charPixelWidth * 0.5;
+		return sum + charPixelWidth;
+	}
+
+	$: tickLen = tickMarks === true
+		? labelPosition === 'above'
+			? tickMarkLength ?? widestTickLen
+			: tickMarkLength ?? 6
+		: 0;
+
+	$: widestTickLen = Math.max(10, Math.max(...tickVals.map(d => format(d).toString().split('').reduce(calcStringLength, 0))));
+
+	$: y = isBandwidth ? $yScale.bandwidth() / 2 : 0;
+
+	$: maxTickValPx = Math.max(...tickVals.map($yScale));
+</script>
+
+<div class='axis y-axis'>
+	{#each tickVals as tick, i (tick)}
+		{@const tickValPx = $yScale(tick)}
+
+		<div class='tick tick-{i}' style='left:{$xRange[0]}%;top:{tickValPx}%;'>
+			{#if gridlines === true}
+				<div
+					class="gridline"
+					style='{y}px'
+					style:left='0px'
+					style:right='{(labelPosition === 'above' ? -widestTickLen : -tickLen) - tickGutter}px'
+				></div>
+			{/if}
+			{#if tickMarks === true}
+				<div
+					class="tick-mark"
+					style:top='{y}px'
+					style:left='{$width + tickGutter}px'
+					style:width='{tickLen}px'
+				></div>
+			{/if}
+			<div
+				class="text"
+				style:top='{y}px'
+				style:left='calc(100% + {tickGutter + (labelPosition === 'even' ? tickLen : 0)}px)'
+				style:transform='translate({dx + (labelPosition === 'even' ? 3 : 0)}px, calc(-50% + {dy + (labelPosition === 'above' || (snapBaselineLabel === true && tickValPx === maxTickValPx) ? -3 : 4)}px))'
+			>{format(tick)}</div>
+		</div>
+	{/each}
+</div>
+
+<style>
+	.axis,
+	.tick,
+	.tick-mark,
+	.gridline,
+	.baseline,
+	.text {
+		position: absolute;
+	}
+	.axis {
+		width: 100%;
+		height: 100%;
+	}
+	.tick {
+		font-size: 11px;
+		width: 100%;
+	}
+
+	.gridline {
+		border-top: 1px dashed #aaa;
+	}
+	.tick-mark {
+		border-top: 1px solid #aaa;
+	}
+
+	.baseline.gridline {
+		border-top-style: solid;
+	}
+
+	.tick .text {
+		color: #666;
+	}
+</style>
diff --git a/src/_components/AxisYRight.svelte b/src/_components/AxisYRight.svelte
new file mode 100644
index 00000000..a67d9fd7
--- /dev/null
+++ b/src/_components/AxisYRight.svelte
@@ -0,0 +1,123 @@
+<!--
+	@component
+	Generates an SVG y-axis. This component is also configured to detect if your y-scale is an ordinal scale. If so, it will place the markers in the middle of the bandwidth.
+ -->
+ <script>
+	import { getContext } from 'svelte';
+
+	const { xRange, yScale, width } = getContext('LayerCake');
+
+	/** @type {Boolean} [tickMarks=false] - Show marks next to the tick label. */
+	export let tickMarks = false;
+
+	/** @type {String} [labelPosition='above'] - Whether the label sits even with its value ('even') or sits on top ('above') the tick mark. */
+	export let labelPosition = 'above';
+
+	/** @type {Boolean} [snapBaselineLabel=false] - When labelPosition='even', adjust the lowest label so that it sits above the tick mark. */
+	export let snapBaselineLabel = false;
+
+	/** @type {Boolean} [gridlines=true] - When labelPosition='even', adjust the lowest label so that it sits above the tick mark. */
+	export let gridlines = true;
+
+	/** @type {Number} [tickMarkLength=undefined] - The length of the tick mark. If not set, becomes the length of the widest tick. */
+	export let tickMarkLength = undefined;
+
+	/** @type {Function} [format=d => d] - A function that passes the current tick value and expects a nicely formatted value in return. */
+	export let format = d => d ;
+
+	/** @type {Number|Array|Function} [ticks=4] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. */
+	export let ticks = 4;
+
+	/** @type {Number} [tickGutter=5] - The amount of whitespace between the start of the tick and the chart drawing area (the xRange min). */
+	export let tickGutter = 5;
+
+	/** @type {Number} [dx=0] - Any optional value passed to the `dx` attribute on the text label. */
+	export let dx = 0;
+
+	/** @type {Number} [dy=0] - Any optional value passed to the `dy` attribute on the text label. */
+	export let dy = 0;
+
+	/** @type {Number} [charPixelWidth=7.25] - Used to calculate the widest label length to offset labels. Adjust if the automatic tick length doesn't look right because you have a bigger font (or just set `tickMarkLength` to a pixel value). */
+	export let charPixelWidth = 7.25;
+
+	$: isBandwidth = typeof $yScale.bandwidth === 'function';
+
+	$: tickVals = Array.isArray(ticks) ? ticks :
+		isBandwidth ?
+			$yScale.domain() :
+			typeof ticks === 'function' ?
+				ticks($yScale.ticks()) :
+					$yScale.ticks(ticks);
+
+	function calcStringLength(sum, val) {
+		if (val === ',' || val === '.') return sum + charPixelWidth * 0.5;
+		return sum + charPixelWidth;
+	}
+
+	$: tickLen = tickMarks === true
+		? labelPosition === 'above'
+			? tickMarkLength ?? widestTickLen
+			: tickMarkLength ?? 6
+		: 0;
+
+	$: widestTickLen = Math.max(10, Math.max(...tickVals.map(d => format(d).toString().split('').reduce(calcStringLength, 0))));
+
+	$: x2 = $width + tickGutter + (labelPosition === 'above' ? widestTickLen : tickLen);
+	$: y = isBandwidth ? $yScale.bandwidth() / 2 : 0;
+
+	$: maxTickValPx = Math.max(...tickVals.map($yScale));
+</script>
+
+<g class='axis y-axis'>
+	{#each tickVals as tick (tick)}
+		{@const tickValPx = $yScale(tick)}
+		<g class='tick tick-{tick}' transform='translate({$xRange[0]}, {tickValPx})'>
+			{#if gridlines === true}
+				<line
+					class="gridline"
+					x1="0"
+					{x2}
+					y1={y}
+					y2={y}
+				></line>
+			{/if}
+			{#if tickMarks === true}
+				<line
+					class='tick-mark'
+					x1="{$width + tickGutter}"
+					x2='{$width + tickGutter + tickLen}'
+					y1={y}
+					y2={y}
+				></line>
+			{/if}
+
+			<text
+				x='{$width + tickGutter + (labelPosition === 'even' ? tickLen : 0)}'
+				{y}
+				dx={dx + (labelPosition === 'even' ? 3 : 0)}
+				dy='{dy + (labelPosition === 'above' || (snapBaselineLabel === true && tickValPx === maxTickValPx) ? -3 : 4)}'
+			>{format(tick)}</text>
+		</g>
+	{/each}
+</g>
+
+<style>
+	.tick {
+		font-size: 11px;
+	}
+
+	.tick line {
+		stroke: #aaa;
+	}
+	.tick .gridline {
+		stroke-dasharray: 2;
+	}
+
+	.tick text {
+		fill: #666;
+	}
+
+	.tick.tick-0 line {
+		stroke-dasharray: 0;
+	}
+</style>
diff --git a/src/_components/SyncedBrushWrapper.percent-range.svelte b/src/_components/SyncedBrushWrapper.percent-range.svelte
index 886c24e6..bc8f90fa 100644
--- a/src/_components/SyncedBrushWrapper.percent-range.svelte
+++ b/src/_components/SyncedBrushWrapper.percent-range.svelte
@@ -3,8 +3,8 @@
 
 	import Line from './Line.svelte';
 	import Area from './Area.svelte';
-	import AxisX from './AxisX.html.svelte';
-	import AxisY from './AxisY.html.svelte';
+	import AxisX from './AxisX.percent-range.html.svelte';
+	import AxisY from './AxisY.percent-range.html.svelte';
 	import Brush from './Brush.html.svelte';
 
 	export let min = null;
diff --git a/src/routes/_components.js b/src/routes/_components.js
index 26be9403..0e4cf255 100644
--- a/src/routes/_components.js
+++ b/src/routes/_components.js
@@ -6,7 +6,9 @@ import AreaD3 from './_components/Area-D3.svelte';
 import AreaStacked from './_components/AreaStacked.svelte';
 import AxisRadial from './_components/AxisRadial.svelte';
 import AxisX from './_components/AxisX.svelte';
+import AxisXTop from './_components/AxisXTop.svelte';
 import AxisY from './_components/AxisY.svelte';
+import AxisYRight from './_components/AxisYRight.svelte';
 import Bar from './_components/Bar.svelte';
 import BarStacked from './_components/BarStacked.svelte';
 import Beeswarm from './_components/Beeswarm.svelte';
@@ -43,22 +45,31 @@ import Tooltip from './_components/Tooltip.html.svelte';
 import SharedTooltip from './_components/SharedTooltip.html.svelte';
 import SharedTooltipPercentRange from './_components_ssr/SharedTooltip.percent-range.html.svelte';
 import AxisXHtml from './_components_ssr/AxisX.html.svelte';
+import AxisXTopHtml from './_components_ssr/AxisXTop.html.svelte';
 import AxisYHtml from './_components_ssr/AxisY.html.svelte';
+import AxisYRightHtml from './_components_ssr/AxisYRight.html.svelte';
 import ScatterHtml from './_components_ssr/Scatter.html.svelte';
 import Key from './_components_ssr/Key.html.svelte';
 import QuadTree from './_components/QuadTree.html.svelte';
 import QuadTreePercentRange from './_components_ssr/QuadTree.percent-range.html.svelte';
 
 export default [
-	{ name: 'axis',
+	{
+		name: 'axis',
 		components: [
 			{ slug: 'AxisX.svelte', component: AxisX },
 			{ slug: 'AxisY.svelte', component: AxisY },
-			{ slug: 'AxisX.html.svelte', component: AxisXHtml },
-			{ slug: 'AxisY.html.svelte', component: AxisYHtml },
-			{ slug: 'AxisRadial.svelte', component: AxisRadial },
-		] },
-	{ name: 'chart',
+			{ slug: 'AxisYRight.svelte', component: AxisYRight },
+			{ slug: 'AxisXTop.svelte', component: AxisXTop },
+			{ slug: 'AxisX.percent-range.html.svelte', component: AxisXHtml },
+			{ slug: 'AxisXTop.percent-range.html.svelte', component: AxisXTopHtml },
+			{ slug: 'AxisY.percent-range.html.svelte', component: AxisYHtml },
+			{ slug: 'AxisYRight.percent-range.html.svelte', component: AxisYRightHtml },
+			{ slug: 'AxisRadial.svelte', component: AxisRadial }
+		]
+	},
+	{
+		name: 'chart',
 		components: [
 			{ slug: 'Area.svelte', component: Area },
 			{ slug: 'Area-D3.svelte', component: AreaD3 },
@@ -85,9 +96,11 @@ export default [
 			{ slug: 'Scatter.canvas.svelte', component: ScatterCanvas },
 			{ slug: 'Scatter.svg.svelte', component: ScatterSvg },
 			{ slug: 'Scatter.webgl.svelte', component: ScatterWebgl },
-			{ slug: 'Scatter.html.svelte', component: ScatterHtml },
-		] },
-	{ name: 'map',
+			{ slug: 'Scatter.html.svelte', component: ScatterHtml }
+		]
+	},
+	{
+		name: 'map',
 		components: [
 			{ slug: 'Map.svg.svelte', component: MapSvg },
 			{ slug: 'Map.canvas.svelte', component: MapCanvas },
@@ -95,9 +108,11 @@ export default [
 			{ slug: 'MapPoints.html.svelte', component: MapPointsHtml },
 			{ slug: 'MapPoints.canvas.svelte', component: MapPointsCanvas },
 			{ slug: 'MapLabels.html.svelte', component: MapLabelsHtml },
-			{ slug: 'MapLabels.svg.svelte', component: MapLabels },
-		] },
-	{ name: 'interaction',
+			{ slug: 'MapLabels.svg.svelte', component: MapLabels }
+		]
+	},
+	{
+		name: 'interaction',
 		components: [
 			{ slug: 'Voronoi.svelte', component: Voronoi },
 			{ slug: 'Brush.html.svelte', component: Brush },
@@ -105,15 +120,18 @@ export default [
 			{ slug: 'QuadTree.percent-range.html.svelte', component: QuadTreePercentRange },
 			{ slug: 'Tooltip.html.svelte', component: Tooltip },
 			{ slug: 'SharedTooltip.html.svelte', component: SharedTooltip },
-			{ slug: 'SharedTooltip.percent-range.html.svelte', component: SharedTooltipPercentRange },
-		] },
-	{ name: 'annotation',
+			{ slug: 'SharedTooltip.percent-range.html.svelte', component: SharedTooltipPercentRange }
+		]
+	},
+	{
+		name: 'annotation',
 		components: [
 			{ slug: 'Annotations.html.svelte', component: Annotations },
 			{ slug: 'AnnotationsData.html.svelte', component: AnnotationsData },
 			{ slug: 'Arrows.svelte', component: Arrows },
 			{ slug: 'Key.html.svelte', component: Key },
 			{ slug: 'Labels.html.svelte', component: Labels },
-			{ slug: 'GroupLabels.html.svelte', component: GroupLabels },
-		] }
+			{ slug: 'GroupLabels.html.svelte', component: GroupLabels }
+		]
+	}
 ];
diff --git a/src/routes/_components/AxisX.svelte b/src/routes/_components/AxisX.svelte
index 67f33aed..47d3895d 100644
--- a/src/routes/_components/AxisX.svelte
+++ b/src/routes/_components/AxisX.svelte
@@ -12,9 +12,24 @@
 	data.forEach(d => {
 		d[yKey] = +d[yKey];
 	});
+
+	let tickMarks = false;
+	let gridlines = true;
+	let snapLabels = false;
+	let baseline = true;
+	let tickMarkLength = 6;
+	let tickGutter = 0;
+	let dx = 0;
+	let dy = 12;
 </script>
 
 <style>
+	.component-container {
+		display: flex;
+		flex-direction: row-reverse;
+		gap: 10px;
+		height: 100%;
+	}
 	/*
 		The wrapper div needs to have an explicit width and height in CSS.
 		It can also be a flexbox child or CSS grid element.
@@ -22,22 +37,101 @@
 		expand to fill it.
 	*/
 	.chart-container {
-		width: 100%;
-		height: 250px;
+		flex: 1;
+	}
+	.props {
+		flex-grow: 0;
+		flex-shrink: 1;
+		display: flex;
+		flex-direction: column;
+		user-select: none;
+		overflow-y: auto;
+		font-size: 0.9rem;
+	}
+	label {
+		display: flex;
+		cursor: pointer;
+		align-items: center;
+	}
+	input[type="checkbox"] {
+		margin-left: 0;
+	}
+
+	label.number {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	input[type="number"] {
+		max-width: 35px;
+		margin-left: 10px;
+		float: right;
+	}
+	span.disabled {
+		opacity: 0.5;
+	}
+	label.disabled {
+		pointer-events: none;
 	}
 </style>
 
-<div class="chart-container">
-	<LayerCake
-		padding={{ top: 20, bottom: 20 }}
-		x={xKey}
-		y={yKey}
-		data={data}
-	>
-		<Svg>
-			<AxisX
-				baseline={true}
-			/>
-		</Svg>
-	</LayerCake>
+<div class="component-container">
+	<div class="props">
+		<label>
+			<input type="checkbox" bind:checked={tickMarks}/> tickMarks
+		</label>
+
+		<label>
+			<input type="checkbox" bind:checked={gridlines}/> gridlines
+		</label>
+
+		<label>
+			<input type="checkbox" bind:checked={baseline}/> baseline
+		</label>
+
+		<label>
+			<input type="checkbox" bind:checked={snapLabels}/> snapLabels
+		</label>
+
+		<label class="number" class:disabled={!tickMarks}>
+			<span class:disabled={!tickMarks}>tickMarkLength</span>
+			<input type="number" bind:value={tickMarkLength} disabled={!tickMarks}/>
+		</label>
+
+		<label class="number">
+			tickGutter
+			<input type="number" bind:value={tickGutter}/>
+		</label>
+
+		<label class="number">
+			dx
+			<input type="number" bind:value={dx}/>
+		</label>
+		<label class="number">
+			dy
+			<input type="number" bind:value={dy}/>
+		</label>
+	</div>
+
+	<div class="chart-container">
+		<LayerCake
+			padding={{ top: 10, bottom: 20 }}
+			x={xKey}
+			y={yKey}
+			{data}
+		>
+			<Svg>
+				<AxisX
+					{baseline}
+					{tickMarks}
+					{gridlines}
+					{snapLabels}
+					{tickMarkLength}
+					{tickGutter}
+					{dx}
+					{dy}
+				/>
+			</Svg>
+		</LayerCake>
+	</div>
 </div>
diff --git a/src/routes/_components/AxisXTop.svelte b/src/routes/_components/AxisXTop.svelte
new file mode 100644
index 00000000..a7bfac08
--- /dev/null
+++ b/src/routes/_components/AxisXTop.svelte
@@ -0,0 +1,137 @@
+<script>
+	import { LayerCake, Svg } from 'layercake';
+
+	import AxisXTop from '../../_components/AxisXTop.svelte';
+
+	// This example loads csv data as json using @rollup/plugin-dsv
+	import data from '../../_data/points.csv';
+
+	const xKey = 'myX';
+	const yKey = 'myY';
+
+	data.forEach(d => {
+		d[yKey] = +d[yKey];
+	});
+
+	let tickMarks = false;
+	let snapLabels = false;
+	let gridlines = true;
+	let baseline = true;
+	let tickMarkLength = 6;
+	let tickGutter = 0;
+	let dx = 0;
+	let dy = -4;
+</script>
+
+<style>
+	.component-container {
+		display: flex;
+		flex-direction: row-reverse;
+		gap: 10px;
+		height: 100%;
+	}
+	/*
+		The wrapper div needs to have an explicit width and height in CSS.
+		It can also be a flexbox child or CSS grid element.
+		The point being it needs dimensions since the <LayerCake> element will
+		expand to fill it.
+	*/
+	.chart-container {
+		flex: 1;
+	}
+	.props {
+		flex-grow: 0;
+		flex-shrink: 1;
+		display: flex;
+		flex-direction: column;
+		user-select: none;
+		overflow-y: auto;
+		font-size: 0.9rem;
+	}
+	label {
+		display: flex;
+		cursor: pointer;
+		align-items: center;
+	}
+	input[type="checkbox"] {
+		margin-left: 0;
+	}
+
+	label.number {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	input[type="number"] {
+		max-width: 35px;
+		margin-left: 10px;
+		float: right;
+	}
+	span.disabled {
+		opacity: 0.5;
+	}
+	label.disabled {
+		pointer-events: none;
+	}
+</style>
+
+<div class="component-container">
+	<div class="props">
+		<label>
+			<input type="checkbox" bind:checked={tickMarks}/> tickMarks
+		</label>
+
+		<label>
+			<input type="checkbox" bind:checked={gridlines}/> gridlines
+		</label>
+
+		<label>
+			<input type="checkbox" bind:checked={baseline}/> baseline
+		</label>
+
+		<label>
+			<input type="checkbox" bind:checked={snapLabels}/> snapLabels
+		</label>
+
+		<label class="number" class:disabled={!tickMarks}>
+			<span class:disabled={!tickMarks}>tickMarkLength</span>
+			<input type="number" bind:value={tickMarkLength} disabled={!tickMarks}/>
+		</label>
+
+		<label class="number">
+			tickGutter
+			<input type="number" bind:value={tickGutter}/>
+		</label>
+
+		<label class="number">
+			dx
+			<input type="number" bind:value={dx}/>
+		</label>
+		<label class="number">
+			dy
+			<input type="number" bind:value={dy}/>
+		</label>
+	</div>
+
+	<div class="chart-container">
+		<LayerCake
+			padding={{ top: 20, bottom: 10 }}
+			x={xKey}
+			y={yKey}
+			data={data}
+		>
+			<Svg>
+				<AxisXTop
+					{baseline}
+					{tickMarks}
+					{gridlines}
+					{snapLabels}
+					{tickMarkLength}
+					{tickGutter}
+					{dx}
+					{dy}
+				/>
+			</Svg>
+		</LayerCake>
+	</div>
+</div>
diff --git a/src/routes/_components/AxisY.svelte b/src/routes/_components/AxisY.svelte
index 9fbcd99e..a05521f7 100644
--- a/src/routes/_components/AxisY.svelte
+++ b/src/routes/_components/AxisY.svelte
@@ -12,9 +12,24 @@
 	data.forEach(d => {
 		d[yKey] = +d[yKey];
 	});
+
+	let tickMarks = false;
+	let snapBaselineLabel = false;
+	let gridlines = true;
+	let labelPosition = 'above';
+	let tickMarkLength = undefined;
+	let tickGutter = 0;
+	let dx = 0;
+	let dy = 0;
 </script>
 
 <style>
+	.component-container {
+		display: flex;
+		flex-direction: row-reverse;
+		gap: 10px;
+		height: 100%;
+	}
 	/*
 		The wrapper div needs to have an explicit width and height in CSS.
 		It can also be a flexbox child or CSS grid element.
@@ -22,21 +37,104 @@
 		expand to fill it.
 	*/
 	.chart-container {
-		width: 100%;
-		height: 250px;
+		flex: 1;
+	}
+	.props {
+		flex-grow: 0;
+		flex-shrink: 1;
+		display: flex;
+		flex-direction: column;
+		user-select: none;
+		overflow-y: auto;
+		font-size: 0.9rem;
+	}
+	label {
+		display: flex;
+		cursor: pointer;
+		align-items: center;
+	}
+	input[type="checkbox"] {
+		margin-left: 0;
+	}
+
+	label.number {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	input[type="number"] {
+		max-width: 35px;
+		margin-left: 10px;
+		float: right;
+	}
+	span.disabled {
+		opacity: 0.5;
+	}
+	label.disabled {
+		pointer-events: none;
 	}
 </style>
 
-<div class="chart-container">
-	<LayerCake
-		x={xKey}
-		y={yKey}
-		data={data}
-	>
-		<Svg>
-			<AxisY
-				ticks={4}
-			/>
-		</Svg>
-	</LayerCake>
+<div class="component-container">
+	<div class="props">
+		<label>
+			<input type="checkbox" bind:checked={tickMarks}/> tickMarks
+		</label>
+
+		<label>
+			<input type="checkbox" bind:checked={gridlines}/> gridlines
+		</label>
+
+		<label class="number">
+			labelPosition
+			<select bind:value={labelPosition}>
+				<option value="above">above</option>
+				<option value="even">even</option>
+			</select>
+		</label>
+
+		<label class:disabled={labelPosition === 'above'}>
+			<input type="checkbox" bind:checked={snapBaselineLabel} disabled={labelPosition === 'above'}/> <span class:disabled={labelPosition === 'above'}>snapBaselineLabel</span>
+		</label>
+
+		<label class="number" class:disabled={!tickMarks}>
+			<span class:disabled={!tickMarks}>tickMarkLength</span>
+			<input type="number" bind:value={tickMarkLength} disabled={!tickMarks}/>
+		</label>
+		<label class="number">
+			tickGutter
+			<input type="number" bind:value={tickGutter} />
+		</label>
+		<label class="number">
+			dx
+			<input type="number" bind:value={dx} />
+		</label>
+		<label class="number">
+			dy
+			<input type="number" bind:value={dy} />
+		</label>
+	</div>
+
+	<div class="chart-container">
+		<LayerCake
+			padding={{ bottom: 15, left: 10 }}
+			x={xKey}
+			y={yKey}
+			data={data}
+		>
+			<Svg>
+				<AxisY
+					{tickMarks}
+					{snapBaselineLabel}
+					{labelPosition}
+					{gridlines}
+					{tickMarkLength}
+					{tickGutter}
+					{dx}
+					{dy}
+					ticks={4}
+				/>
+			</Svg>
+		</LayerCake>
+	</div>
 </div>
diff --git a/src/routes/_components/AxisYRight.svelte b/src/routes/_components/AxisYRight.svelte
new file mode 100644
index 00000000..27b6c4dc
--- /dev/null
+++ b/src/routes/_components/AxisYRight.svelte
@@ -0,0 +1,140 @@
+<script>
+	import { LayerCake, Svg } from 'layercake';
+
+	import AxisYRight from '../../_components/AxisYRight.svelte';
+
+	// This example loads csv data as json using @rollup/plugin-dsv
+	import data from '../../_data/points.csv';
+
+	const xKey = 'myX';
+	const yKey = 'myY';
+
+	data.forEach(d => {
+		d[yKey] = +d[yKey];
+	});
+
+	let tickMarks = false;
+	let snapBaselineLabel = false;
+	let labelPosition = 'above';
+	let gridlines = true;
+	let tickMarkLength = undefined;
+	let tickGutter = 5;
+	let dx = 0;
+	let dy = 0;
+</script>
+
+<style>
+	.component-container {
+		display: flex;
+		flex-direction: row-reverse;
+		gap: 10px;
+		height: 100%;
+	}
+	/*
+		The wrapper div needs to have an explicit width and height in CSS.
+		It can also be a flexbox child or CSS grid element.
+		The point being it needs dimensions since the <LayerCake> element will
+		expand to fill it.
+	*/
+	.chart-container {
+		flex: 1;
+	}
+	.props {
+		flex-grow: 0;
+		flex-shrink: 1;
+		display: flex;
+		flex-direction: column;
+		user-select: none;
+		overflow-y: auto;
+		font-size: 0.9rem;
+	}
+	label {
+		display: flex;
+		cursor: pointer;
+		align-items: center;
+	}
+	input[type="checkbox"] {
+		margin-left: 0;
+	}
+
+	label.number {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	input[type="number"] {
+		max-width: 35px;
+		margin-left: 10px;
+		float: right;
+	}
+	span.disabled {
+		opacity: 0.5;
+	}
+	label.disabled {
+		pointer-events: none;
+	}
+</style>
+
+<div class="component-container">
+	<div class="props">
+		<label>
+			<input type="checkbox" bind:checked={tickMarks}/> tickMarks
+		</label>
+
+		<label>
+			<input type="checkbox" bind:checked={gridlines}/> gridlines
+		</label>
+
+		<label class="number">
+			labelPosition
+			<select bind:value={labelPosition}>
+				<option value="above">above</option>
+				<option value="even">even</option>
+			</select>
+		</label>
+
+		<label class:disabled={labelPosition === 'above'}>
+			<input type="checkbox" bind:checked={snapBaselineLabel} disabled={labelPosition === 'above'}/> <span class:disabled={labelPosition === 'above'}>snapBaselineLabel</span>
+		</label>
+
+		<label class="number" class:disabled={!tickMarks}>
+			<span class:disabled={!tickMarks}>tickMarkLength</span>
+			<input type="number" bind:value={tickMarkLength} disabled={!tickMarks}/>
+		</label>
+		<label class="number">
+			tickGutter
+			<input type="number" bind:value={tickGutter} />
+		</label>
+		<label class="number">
+			dx
+			<input type="number" bind:value={dx} />
+		</label>
+		<label class="number">
+			dy
+			<input type="number" bind:value={dy} />
+		</label>
+	</div>
+
+	<div class="chart-container">
+		<LayerCake
+			padding={{ bottom: 15, right: 25 }}
+			x={xKey}
+			y={yKey}
+			data={data}
+		>
+			<Svg>
+				<AxisYRight
+					{tickMarks}
+					{labelPosition}
+					{snapBaselineLabel}
+					{gridlines}
+					{tickMarkLength}
+					{tickGutter}
+					{dx}
+					{dy}
+					ticks={4}
+				/>
+			</Svg>
+		</LayerCake>
+	</div>
+</div>
diff --git a/src/routes/_components/GroupLabels.html.svelte b/src/routes/_components/GroupLabels.html.svelte
index 761ab0ea..01f6ce84 100644
--- a/src/routes/_components/GroupLabels.html.svelte
+++ b/src/routes/_components/GroupLabels.html.svelte
@@ -42,9 +42,6 @@
 	const flatten = data => data.reduce((memo, group) => {
 		return memo.concat(group.values);
 	}, []);
-
-	const formatTickX = timeFormat('%b. %e');
-	const formatTickY = d => format(`~s`)(d);
 </script>
 
 <style>
diff --git a/src/routes/_components/SharedTooltip.html.svelte b/src/routes/_components/SharedTooltip.html.svelte
index 78a00b4d..934cb234 100644
--- a/src/routes/_components/SharedTooltip.html.svelte
+++ b/src/routes/_components/SharedTooltip.html.svelte
@@ -43,8 +43,7 @@
 		return memo.concat(group.values);
 	}, []);
 
-	const formatTickX = timeFormat('%b. %e');
-	const formatTickY = d => format(`~s`)(d);
+	const formatLabelX = timeFormat('%b. %e');
 </script>
 
 <style>
@@ -79,7 +78,7 @@
 
 		<Html>
 			<SharedTooltip
-				formatTitle={formatTickX}
+				formatTitle={formatLabelX}
 				dataset={data}
 			/>
 		</Html>
diff --git a/src/routes/_components_ssr/AxisX.html.svelte b/src/routes/_components_ssr/AxisX.html.svelte
index c687e182..3f7e1e8d 100644
--- a/src/routes/_components_ssr/AxisX.html.svelte
+++ b/src/routes/_components_ssr/AxisX.html.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { LayerCake, ScaledSvg, Html } from 'layercake';
 
-	import AxisX from '../../_components/AxisX.html.svelte';
+	import AxisX from '../../_components/AxisX.percent-range.html.svelte';
 
 	// This example loads csv data as json using @rollup/plugin-dsv
 	import data from '../../_data/points.csv';
@@ -12,9 +12,24 @@
 	data.forEach(d => {
 		d[yKey] = +d[yKey];
 	});
+
+	let tickMarks = false;
+	let snapLabels = false;
+	let baseline = true;
+	let gridlines = true;
+	let tickMarkLength = 6;
+	let tickGutter = 0;
+	let dx = 0;
+	let dy = 1;
 </script>
 
 <style>
+	.component-container {
+		display: flex;
+		flex-direction: row-reverse;
+		gap: 10px;
+		height: 100%;
+	}
 	/*
 		The wrapper div needs to have an explicit width and height in CSS.
 		It can also be a flexbox child or CSS grid element.
@@ -22,25 +37,104 @@
 		expand to fill it.
 	*/
 	.chart-container {
-		width: 100%;
-		height: 250px;
+		flex: 1;
+	}
+	.props {
+		flex-grow: 0;
+		flex-shrink: 1;
+		display: flex;
+		flex-direction: column;
+		user-select: none;
+		overflow-y: auto;
+		font-size: 0.9rem;
+	}
+	label {
+		display: flex;
+		cursor: pointer;
+		align-items: center;
+	}
+	input[type="checkbox"] {
+		margin-left: 0;
+	}
+
+	label.number {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	input[type="number"] {
+		max-width: 35px;
+		margin-left: 10px;
+		float: right;
+	}
+	span.disabled {
+		opacity: 0.5;
+	}
+	label.disabled {
+		pointer-events: none;
 	}
 </style>
 
-<div class="chart-container">
-	<LayerCake
-		ssr={true}
-		percentRange={true}
-		padding={{ top: 20, bottom: 20 }}
-		x={xKey}
-		y={d => d[yKey]}
-		yDomain={[0, null]}
-		data={data}
-	>
-		<Html>
-			<AxisX
-				baseline={true}
-			/>
-		</Html>
-	</LayerCake>
+<div class="component-container">
+	<div class="props">
+		<label>
+			<input type="checkbox" bind:checked={tickMarks}/> tickMarks
+		</label>
+
+		<label>
+			<input type="checkbox" bind:checked={gridlines}/> gridlines
+		</label>
+
+		<label>
+			<input type="checkbox" bind:checked={baseline}/> baseline
+		</label>
+
+		<label>
+			<input type="checkbox" bind:checked={snapLabels}/> snapLabels
+		</label>
+
+		<label class="number" class:disabled={!tickMarks}>
+			<span class:disabled={!tickMarks}>tickMarkLength</span>
+			<input type="number" bind:value={tickMarkLength} disabled={!tickMarks}/>
+		</label>
+
+		<label class="number">
+			tickGutter
+			<input type="number" bind:value={tickGutter}/>
+		</label>
+
+		<label class="number">
+			dx
+			<input type="number" bind:value={dx}/>
+		</label>
+		<label class="number">
+			dy
+			<input type="number" bind:value={dy}/>
+		</label>
+	</div>
+
+	<div class="chart-container">
+		<LayerCake
+			ssr={true}
+			percentRange={true}
+			padding={{ top: 10, bottom: 20 }}
+			x={xKey}
+			y={d => d[yKey]}
+			yDomain={[0, null]}
+			data={data}
+		>
+			<Html>
+				<AxisX
+					{baseline}
+					{tickMarks}
+					{gridlines}
+					{snapLabels}
+					{tickMarkLength}
+					{tickGutter}
+					{dx}
+					{dy}
+				/>
+			</Html>
+		</LayerCake>
+	</div>
 </div>
diff --git a/src/routes/_components_ssr/AxisXTop.html.svelte b/src/routes/_components_ssr/AxisXTop.html.svelte
new file mode 100644
index 00000000..bc2588ad
--- /dev/null
+++ b/src/routes/_components_ssr/AxisXTop.html.svelte
@@ -0,0 +1,139 @@
+<script>
+	import { LayerCake, Html } from 'layercake';
+
+	import AxisXTop from '../../_components/AxisXTop.percent-range.html.svelte';
+
+	// This example loads csv data as json using @rollup/plugin-dsv
+	import data from '../../_data/points.csv';
+
+	const xKey = 'myX';
+	const yKey = 'myY';
+
+	data.forEach(d => {
+		d[yKey] = +d[yKey];
+	});
+
+	let tickMarks = false;
+	let snapLabels = false;
+	let gridlines = true;
+	let baseline = true;
+	let tickMarkLength = 6;
+	let tickGutter = 0;
+	let dx = 0;
+	let dy = 0;
+</script>
+
+<style>
+	.component-container {
+		display: flex;
+		flex-direction: row-reverse;
+		gap: 10px;
+		height: 100%;
+	}
+	/*
+		The wrapper div needs to have an explicit width and height in CSS.
+		It can also be a flexbox child or CSS grid element.
+		The point being it needs dimensions since the <LayerCake> element will
+		expand to fill it.
+	*/
+	.chart-container {
+		flex: 1;
+	}
+	.props {
+		flex-grow: 0;
+		flex-shrink: 1;
+		display: flex;
+		flex-direction: column;
+		user-select: none;
+		overflow-y: auto;
+		font-size: 0.9rem;
+	}
+	label {
+		display: flex;
+		cursor: pointer;
+		align-items: center;
+	}
+	input[type="checkbox"] {
+		margin-left: 0;
+	}
+
+	label.number {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	input[type="number"] {
+		max-width: 35px;
+		margin-left: 10px;
+		float: right;
+	}
+	span.disabled {
+		opacity: 0.5;
+	}
+	label.disabled {
+		pointer-events: none;
+	}
+</style>
+
+<div class="component-container">
+	<div class="props">
+		<label>
+			<input type="checkbox" bind:checked={tickMarks}/> tickMarks
+		</label>
+
+		<label>
+			<input type="checkbox" bind:checked={gridlines}/> gridlines
+		</label>
+
+		<label>
+			<input type="checkbox" bind:checked={baseline}/> baseline
+		</label>
+
+		<label>
+			<input type="checkbox" bind:checked={snapLabels}/> snapLabels
+		</label>
+
+		<label class="number" class:disabled={!tickMarks}>
+			<span class:disabled={!tickMarks}>tickMarkLength</span>
+			<input type="number" bind:value={tickMarkLength} disabled={!tickMarks}/>
+		</label>
+
+		<label class="number">
+			tickGutter
+			<input type="number" bind:value={tickGutter}/>
+		</label>
+
+		<label class="number">
+			dx
+			<input type="number" bind:value={dx}/>
+		</label>
+		<label class="number">
+			dy
+			<input type="number" bind:value={dy}/>
+		</label>
+	</div>
+
+	<div class="chart-container">
+		<LayerCake
+			ssr={true}
+			percentRange={true}
+			padding={{ top: 15, bottom: 10 }}
+			x={xKey}
+			y={d => d[yKey]}
+			{data}
+		>
+			<Html>
+				<AxisXTop
+					{baseline}
+					{tickMarks}
+					{snapLabels}
+					{gridlines}
+					{tickMarkLength}
+					{tickGutter}
+					{dx}
+					{dy}
+			/>
+			</Html>
+		</LayerCake>
+	</div>
+</div>
diff --git a/src/routes/_components_ssr/AxisY.html.svelte b/src/routes/_components_ssr/AxisY.html.svelte
index 55acbd7b..d757bdbb 100644
--- a/src/routes/_components_ssr/AxisY.html.svelte
+++ b/src/routes/_components_ssr/AxisY.html.svelte
@@ -1,7 +1,7 @@
 <script>
-	import { LayerCake, ScaledSvg, Html } from 'layercake';
+	import { LayerCake, Html } from 'layercake';
 
-	import AxisY from '../../_components/AxisY.html.svelte';
+	import AxisY from '../../_components/AxisY.percent-range.html.svelte';
 
 	// This example loads csv data as json using @rollup/plugin-dsv
 	import data from '../../_data/points.csv';
@@ -12,9 +12,24 @@
 	data.forEach(d => {
 		d[yKey] = +d[yKey];
 	});
+
+	let tickMarks = false;
+	let snapBaselineLabel = false;
+	let gridlines = true;
+	let labelPosition = 'above';
+	let tickMarkLength = undefined;
+	let tickGutter = 0;
+	let dx = 0;
+	let dy = -3;
 </script>
 
 <style>
+	.component-container {
+		display: flex;
+		flex-direction: row-reverse;
+		gap: 10px;
+		height: 100%;
+	}
 	/*
 		The wrapper div needs to have an explicit width and height in CSS.
 		It can also be a flexbox child or CSS grid element.
@@ -22,25 +37,106 @@
 		expand to fill it.
 	*/
 	.chart-container {
-		width: 100%;
-		height: 250px;
+		flex: 1;
+	}
+	.props {
+		flex-grow: 0;
+		flex-shrink: 1;
+		display: flex;
+		flex-direction: column;
+		user-select: none;
+		overflow-y: auto;
+		font-size: 0.9rem;
+	}
+	label {
+		display: flex;
+		cursor: pointer;
+		align-items: center;
+	}
+	input[type="checkbox"] {
+		margin-left: 0;
+	}
+
+	label.number {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	input[type="number"] {
+		max-width: 35px;
+		margin-left: 10px;
+		float: right;
+	}
+	span.disabled {
+		opacity: 0.5;
+	}
+	label.disabled {
+		pointer-events: none;
 	}
 </style>
 
-<div class="chart-container">
-	<LayerCake
-		ssr={true}
-		percentRange={true}
-		padding={{ right: 10, bottom: 20, left: 25 }}
-		x={xKey}
-		y={d => d[yKey]}
-		yDomain={[0, null]}
-		data={data}
-	>
-		<Html>
-			<AxisY
-				ticks={4}
+<div class="component-container">
+	<div class="props">
+		<label>
+			<input type="checkbox" bind:checked={tickMarks}/> tickMarks
+		</label>
+
+		<label>
+			<input type="checkbox" bind:checked={gridlines}/> gridlines
+		</label>
+
+		<label class="number">
+			labelPosition
+			<select bind:value={labelPosition}>
+				<option value="above">above</option>
+				<option value="even">even</option>
+			</select>
+		</label>
+
+		<label class:disabled={labelPosition === 'above'}>
+			<input type="checkbox" bind:checked={snapBaselineLabel} disabled={labelPosition === 'above'}/> <span class:disabled={labelPosition === 'above'}>snapBaselineLabel</span>
+		</label>
+
+		<label class="number" class:disabled={!tickMarks}>
+			<span class:disabled={!tickMarks}>tickMarkLength</span>
+			<input type="number" bind:value={tickMarkLength} disabled={!tickMarks}/>
+		</label>
+		<label class="number">
+			tickGutter
+			<input type="number" bind:value={tickGutter} />
+		</label>
+		<label class="number">
+			dx
+			<input type="number" bind:value={dx} />
+		</label>
+		<label class="number">
+			dy
+			<input type="number" bind:value={dy} />
+		</label>
+	</div>
+
+	<div class="chart-container">
+		<LayerCake
+			ssr={true}
+			percentRange={true}
+			padding={{ bottom: 15, left: 10 }}
+			x={xKey}
+			y={d => d[yKey]}
+			data={data}
+		>
+			<Html>
+				<AxisY
+					{tickMarks}
+					{snapBaselineLabel}
+					{labelPosition}
+					{gridlines}
+					{tickMarkLength}
+					{tickGutter}
+					{dx}
+					{dy}
+					ticks={4}
 			/>
-		</Html>
-	</LayerCake>
+			</Html>
+		</LayerCake>
+	</div>
 </div>
diff --git a/src/routes/_components_ssr/AxisYRight.html.svelte b/src/routes/_components_ssr/AxisYRight.html.svelte
new file mode 100644
index 00000000..7548aea4
--- /dev/null
+++ b/src/routes/_components_ssr/AxisYRight.html.svelte
@@ -0,0 +1,142 @@
+<script>
+	import { LayerCake, Html } from 'layercake';
+
+	import AxisYRight from '../../_components/AxisYRight.percent-range.html.svelte';
+
+	// This example loads csv data as json using @rollup/plugin-dsv
+	import data from '../../_data/points.csv';
+
+	const xKey = 'myX';
+	const yKey = 'myY';
+
+	data.forEach(d => {
+		d[yKey] = +d[yKey];
+	});
+
+	let tickMarks = false;
+	let snapBaselineLabel = false;
+	let labelPosition = 'above';
+	let gridlines = true
+	let tickMarkLength = undefined;
+	let tickGutter = 5;
+	let dx = 0;
+	let dy = -3;
+</script>
+
+<style>
+	.component-container {
+		display: flex;
+		flex-direction: row-reverse;
+		gap: 10px;
+		height: 100%;
+	}
+	/*
+		The wrapper div needs to have an explicit width and height in CSS.
+		It can also be a flexbox child or CSS grid element.
+		The point being it needs dimensions since the <LayerCake> element will
+		expand to fill it.
+	*/
+	.chart-container {
+		flex: 1;
+	}
+	.props {
+		flex-grow: 0;
+		flex-shrink: 1;
+		display: flex;
+		flex-direction: column;
+		user-select: none;
+		overflow-y: auto;
+		font-size: 0.9rem;
+	}
+	label {
+		display: flex;
+		cursor: pointer;
+		align-items: center;
+	}
+	input[type="checkbox"] {
+		margin-left: 0;
+	}
+
+	label.number {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	input[type="number"] {
+		max-width: 35px;
+		margin-left: 10px;
+		float: right;
+	}
+	span.disabled {
+		opacity: 0.5;
+	}
+	label.disabled {
+		pointer-events: none;
+	}
+</style>
+
+<div class="component-container">
+	<div class="props">
+		<label>
+			<input type="checkbox" bind:checked={tickMarks}/> tickMarks
+		</label>
+
+		<label>
+			<input type="checkbox" bind:checked={gridlines}/> gridlines
+		</label>
+
+		<label class="number">
+			labelPosition
+			<select bind:value={labelPosition}>
+				<option value="above">above</option>
+				<option value="even">even</option>
+			</select>
+		</label>
+
+		<label class:disabled={labelPosition === 'above'}>
+			<input type="checkbox" bind:checked={snapBaselineLabel} disabled={labelPosition === 'above'}/> <span class:disabled={labelPosition === 'above'}>snapBaselineLabel</span>
+		</label>
+
+		<label class="number" class:disabled={!tickMarks}>
+			<span class:disabled={!tickMarks}>tickMarkLength</span>
+			<input type="number" bind:value={tickMarkLength} disabled={!tickMarks}/>
+		</label>
+		<label class="number">
+			tickGutter
+			<input type="number" bind:value={tickGutter} />
+		</label>
+		<label class="number">
+			dx
+			<input type="number" bind:value={dx} />
+		</label>
+		<label class="number">
+			dy
+			<input type="number" bind:value={dy} />
+		</label>
+	</div>
+
+	<div class="chart-container">
+		<LayerCake
+			ssr={true}
+			percentRange={true}
+			padding={{ bottom: 15, right: 25 }}
+			x={xKey}
+			y={d => d[yKey]}
+			data={data}
+		>
+			<Html>
+				<AxisYRight
+					{tickMarks}
+					{snapBaselineLabel}
+					{labelPosition}
+					{gridlines}
+					{tickMarkLength}
+					{tickGutter}
+					{dx}
+					{dy}
+					ticks={4}
+				/>
+			</Html>
+		</LayerCake>
+	</div>
+</div>
diff --git a/src/routes/_components_ssr/SharedTooltip.percent-range.html.svelte b/src/routes/_components_ssr/SharedTooltip.percent-range.html.svelte
index c945c311..f4bfb0a3 100644
--- a/src/routes/_components_ssr/SharedTooltip.percent-range.html.svelte
+++ b/src/routes/_components_ssr/SharedTooltip.percent-range.html.svelte
@@ -43,8 +43,8 @@
 		return memo.concat(group.values);
 	}, []);
 
-	const formatTickX = timeFormat('%b. %e');
-	const formatTickY = d => format(`~s`)(d);
+	const formatLabelX = timeFormat('%b. %e');
+	const formatLabelY = d => format(`~s`)(d);
 </script>
 
 <style>
@@ -81,7 +81,7 @@
 
 		<Html>
 			<SharedTooltip
-				formatTitle={formatTickX}
+				formatTitle={formatLabelX}
 				dataset={data}
 			/>
 		</Html>
diff --git a/src/routes/_examples/AreaStacked.svelte b/src/routes/_examples/AreaStacked.svelte
index 2aa0717a..6d78fb2c 100644
--- a/src/routes/_examples/AreaStacked.svelte
+++ b/src/routes/_examples/AreaStacked.svelte
@@ -20,8 +20,8 @@
 	const seriesNames = Object.keys(data[0]).filter(d => d !== xKey);
 	const seriesColors = ['#ff00cc', '#ff7ac7', '#ffb3c0', '#ffe4b8'];
 
-	const formatTickX = timeFormat('%b. %-d')
-	const formatTickY = d => format(`~s`)(d);
+	const formatLabelX = timeFormat('%b. %-d')
+	const formatLabelY = d => format(`~s`)(d);
 
 	/* --------------------------------------------
 	 * Cast data
@@ -66,11 +66,11 @@
 	>
 		<Svg>
 			<AxisX
-				formatTick={formatTickX}
+				format={formatLabelX}
 				tickMarks={true}
 			/>
 			<AxisY
-				formatTick={formatTickY}
+				format={formatLabelY}
 			/>
 			<AreaStacked/>
 		</Svg>
diff --git a/src/routes/_examples/Bar.svelte b/src/routes/_examples/Bar.svelte
index c92b5567..0fd0f68e 100644
--- a/src/routes/_examples/Bar.svelte
+++ b/src/routes/_examples/Bar.svelte
@@ -32,7 +32,7 @@
 
 <div class="chart-container">
 	<LayerCake
-		padding={{ top: 0, bottom: 20, left: 35 }}
+		padding={{ bottom: 20, left: 35 }}
 		x={xKey}
 		y={yKey}
 		yScale={scaleBand().paddingInner(0.05)}
@@ -41,12 +41,13 @@
 	>
 		<Svg>
 			<AxisX
-				gridlines={true}
+				tickMarks={true}
 				baseline={true}
 				snapTicks={true}
 			/>
 			<AxisY
-				gridlines={false}
+				tickMarks={false}
+				labelPosition='even'
 			/>
 			<Bar/>
 		</Svg>
diff --git a/src/routes/_examples/BarStacked.svelte b/src/routes/_examples/BarStacked.svelte
index 98ed0457..3512d6e3 100644
--- a/src/routes/_examples/BarStacked.svelte
+++ b/src/routes/_examples/BarStacked.svelte
@@ -27,7 +27,7 @@
 		});
 	});
 
-	const formatTickX = d => format(`~s`)(d);
+	const formatLabelX = d => format(`~s`)(d);
 
 	const stackedData = stack(data, seriesNames);
 </script>
@@ -61,8 +61,8 @@
 		<Svg>
 			<AxisX
 				baseline={true}
-				snapTicks={true}
-				formatTick={formatTickX}
+				snapLabels={true}
+				format={formatLabelX}
 			/>
 			<AxisY
 				gridlines={false}
diff --git a/src/routes/_examples/Beeswarm.svelte b/src/routes/_examples/Beeswarm.svelte
index c189c341..a5408a84 100644
--- a/src/routes/_examples/Beeswarm.svelte
+++ b/src/routes/_examples/Beeswarm.svelte
@@ -58,8 +58,8 @@
 		<Svg>
 			<AxisX
 				baseline={true}
-				formatTick={addCommas}
-				tickMarks={true}
+				format={addCommas}
+				tickMarks
 			/>
 			<!-- The Beeswarm component transforms the data and nests our original fields under `data` so access the `titleKey` under that -->
 			<Beeswarm
diff --git a/src/routes/_examples/Column.svelte b/src/routes/_examples/Column.svelte
index f51f824f..4b65b92f 100644
--- a/src/routes/_examples/Column.svelte
+++ b/src/routes/_examples/Column.svelte
@@ -75,13 +75,14 @@
 		data={data}
 	>
 		<Svg>
-			<Column/>
 			<AxisX
 				gridlines={false}
 			/>
+
 			<AxisY
-				gridlines={false}
+				snapBaselineLabel
 			/>
+			<Column/>
 		</Svg>
 
 		<Html>
diff --git a/src/routes/_examples/ColumnStacked.svelte b/src/routes/_examples/ColumnStacked.svelte
index 5e1d07d4..ac8b6356 100644
--- a/src/routes/_examples/ColumnStacked.svelte
+++ b/src/routes/_examples/ColumnStacked.svelte
@@ -27,7 +27,7 @@
 		});
 	});
 
-	const formatTickY = d => format(`~s`)(d);
+	const formatLabelY = d => format(`~s`)(d);
 
 	const stackedData = stack(data, seriesNames);
 </script>
@@ -66,7 +66,7 @@
 			<AxisY
 				ticks={4}
 				gridlines={false}
-				formatTick={formatTickY}
+				format={formatLabelY}
 			/>
 			<ColumnStacked/>
 		</Svg>
diff --git a/src/routes/_examples/Histogram.svelte b/src/routes/_examples/Histogram.svelte
index 865de4bb..76f8f1c1 100644
--- a/src/routes/_examples/Histogram.svelte
+++ b/src/routes/_examples/Histogram.svelte
@@ -73,7 +73,7 @@
 				gridlines={false}
 				baseline={true}
 				ticks={slimThresholds}
-				formatTick={d => +f(d)}
+				format={d => +f(d)}
 			/>
 			<AxisY
 				gridlines={false}
diff --git a/src/routes/_examples/MultiLine.svelte b/src/routes/_examples/MultiLine.svelte
index f82496dc..63b7c06d 100644
--- a/src/routes/_examples/MultiLine.svelte
+++ b/src/routes/_examples/MultiLine.svelte
@@ -39,8 +39,8 @@
 		});
 	});
 
-	const formatTickX = timeFormat('%b. %e');
-	const formatTickY = d => format(`~s`)(d);
+	const formatLabelX = timeFormat('%b. %e');
+	const formatLabelY = d => format(`~s`)(d);
 
 	const groupedData = groupLonger(data, seriesNames, {
 		groupTo: zKey,
@@ -77,13 +77,13 @@
 			<AxisX
 				gridlines={false}
 				ticks={data.map(d => d[xKey]).sort((a, b) => a - b)}
-				formatTick={formatTickX}
+				format={formatLabelX}
 				snapTicks={true}
 				tickMarks={true}
 			/>
 			<AxisY
 				ticks={4}
-				formatTick={formatTickY}
+				format={formatLabelY}
 			/>
 			<MultiLine/>
 		</Svg>
@@ -91,7 +91,7 @@
 		<Html>
 			<Labels/>
 			<SharedTooltip
-				formatTitle={formatTickX}
+				formatTitle={formatLabelX}
 				dataset={data}
 			/>
 		</Html>
diff --git a/src/routes/_examples/ScatterWebgl.svelte b/src/routes/_examples/ScatterWebgl.svelte
index ca482042..d69a492b 100644
--- a/src/routes/_examples/ScatterWebgl.svelte
+++ b/src/routes/_examples/ScatterWebgl.svelte
@@ -13,7 +13,7 @@
 	const yKey = 'myY';
 
 	const r = 3;
-	const padding = 6;
+	const xyPadding = 6;
 
 	data.forEach(d => {
 		d[yKey] = +d[yKey];
@@ -44,16 +44,17 @@
 
 <div class="chart-container">
 	<LayerCake
-		padding={{ top: 0, right: 5, bottom: 20, left: 25 }}
+		padding={{ top: 5, right: 5, bottom: 20, left: 25 }}
 		x={xKey}
 		y={yKey}
-		xPadding={[padding, padding]}
-		yPadding={[padding, padding]}
+		xPadding={[xyPadding, xyPadding]}
+		yPadding={[xyPadding, xyPadding]}
 		data={data}
 	>
 		<Svg>
 			<AxisX/>
 			<AxisY
+				tickMarks={false}
 				ticks={5}
 			/>
 		</Svg>
diff --git a/src/routes/_examples/Timeplot.svelte b/src/routes/_examples/Timeplot.svelte
index 4ec9b98c..60ac5ac0 100644
--- a/src/routes/_examples/Timeplot.svelte
+++ b/src/routes/_examples/Timeplot.svelte
@@ -14,7 +14,6 @@
 	const yKey = 'day';
 
 	const r = 4;
-	const padding = 2;
 
 	const daysTransformed = data.map(d => {
 		const parts = d.timestring.split('T');
@@ -63,14 +62,13 @@
 		yDomain={allDays}
 		xScale={scaleTime()}
 		yScale={scaleBand().paddingInner(0.05).round(true)}
-		xPadding={[padding, padding]}
 		data={daysTransformed}
 	>
 
 		<Svg>
 			<AxisX
 				ticks={[0, 4, 8, 12, 16, 20, 24].map(d => d * 60 * 60)}
-				formatTick={d => `${Math.floor(d / 60 / 60)}:00`}
+				format={d => `${Math.floor(d / 60 / 60)}:00`}
 			/>
 			<AxisY/>
 			<ScatterSvg
diff --git a/src/routes/_examples_ssr/AreaStacked.svelte b/src/routes/_examples_ssr/AreaStacked.svelte
index 2f470efd..3961fb65 100644
--- a/src/routes/_examples_ssr/AreaStacked.svelte
+++ b/src/routes/_examples_ssr/AreaStacked.svelte
@@ -5,8 +5,8 @@
 	import { format } from 'd3-format';
 	import { timeParse, timeFormat } from 'd3-time-format';
 
-	import AxisX from '../../_components/AxisX.html.svelte';
-	import AxisY from '../../_components/AxisY.html.svelte';
+	import AxisX from '../../_components/AxisX.percent-range.html.svelte';
+	import AxisY from '../../_components/AxisY.percent-range.html.svelte';
 	import AreaStacked from '../../_components/AreaStacked.svelte';
 
 	// This example loads csv data as json using @rollup/plugin-dsv
@@ -36,8 +36,8 @@
 
 	const series = stackData(data);
 
-	const formatTickX = timeFormat('%b. %-d')
-	const formatTickY = d => format(`~s`)(d);
+	const formatLabelX = timeFormat('%b. %-d')
+	const formatLabelY = d => format(`~s`)(d);
 </script>
 
 <style>
@@ -69,12 +69,11 @@
 	>
 		<Html>
 			<AxisX
-				formatTick={formatTickX}
+				format={formatLabelX}
 				tickMarks={true}
 			/>
 			<AxisY
-				baseline={true}
-				formatTick={formatTickY}
+				format={formatLabelY}
 			/>
 		</Html>
 		<ScaledSvg>
diff --git a/src/routes/_examples_ssr/Bar.svelte b/src/routes/_examples_ssr/Bar.svelte
index 2ba6ffd0..cb717db6 100644
--- a/src/routes/_examples_ssr/Bar.svelte
+++ b/src/routes/_examples_ssr/Bar.svelte
@@ -3,8 +3,8 @@
 	import { scaleBand } from 'd3-scale';
 
 	import Bar from '../../_components/Bar.svelte';
-	import AxisX from '../../_components/AxisX.html.svelte';
-	import AxisY from '../../_components/AxisY.html.svelte';
+	import AxisX from '../../_components/AxisX.percent-range.html.svelte';
+	import AxisY from '../../_components/AxisY.percent-range.html.svelte';
 
 	// This example loads csv data as json using @rollup/plugin-dsv
 	import data from '../../_data/groups.csv';
diff --git a/src/routes/_examples_ssr/BarStacked.svelte b/src/routes/_examples_ssr/BarStacked.svelte
index 3f867573..0264b3b5 100644
--- a/src/routes/_examples_ssr/BarStacked.svelte
+++ b/src/routes/_examples_ssr/BarStacked.svelte
@@ -5,8 +5,8 @@
 	import { format } from 'd3-format';
 
 	import BarStacked from '../../_components/BarStacked.svelte';
-	import AxisX from '../../_components/AxisX.html.svelte';
-	import AxisY from '../../_components/AxisY.html.svelte';
+	import AxisX from '../../_components/AxisX.percent-range.html.svelte';
+	import AxisY from '../../_components/AxisY.percent-range.html.svelte';
 
 	// This example loads csv data as json using @rollup/plugin-dsv
 	import data from '../../_data/fruitOrdinal.csv';
@@ -29,7 +29,7 @@
 
 	const series = stackData(data);
 
-	const formatTickX = d => format(`~s`)(d);
+	const formatLabelX = d => format(`~s`)(d);
 </script>
 
 <style>
@@ -65,7 +65,7 @@
 			<AxisX
 				baseline={true}
 				snapTicks={true}
-				formatTick={formatTickX}
+				format={formatLabelX}
 			/>
 			<AxisY
 				gridlines={false}
diff --git a/src/routes/_examples_ssr/Brush.svelte b/src/routes/_examples_ssr/Brush.svelte
index 101c7c87..21b8f95d 100644
--- a/src/routes/_examples_ssr/Brush.svelte
+++ b/src/routes/_examples_ssr/Brush.svelte
@@ -3,8 +3,8 @@
 
 	import Line from '../../_components/Line.svelte';
 	import Area from '../../_components/Area.svelte';
-	import AxisX from '../../_components/AxisX.html.svelte';
-	import AxisY from '../../_components/AxisY.html.svelte';
+	import AxisX from '../../_components/AxisX.percent-range.html.svelte';
+	import AxisY from '../../_components/AxisY.percent-range.html.svelte';
 	import Brush from '../../_components/Brush.html.svelte';
 
 	// This example loads csv data as json using @rollup/plugin-dsv
diff --git a/src/routes/_examples_ssr/ClevelandDotPlot.svelte b/src/routes/_examples_ssr/ClevelandDotPlot.svelte
index 2b17b908..2ff1e109 100644
--- a/src/routes/_examples_ssr/ClevelandDotPlot.svelte
+++ b/src/routes/_examples_ssr/ClevelandDotPlot.svelte
@@ -3,8 +3,8 @@
 	import { scaleBand, scaleOrdinal } from 'd3-scale';
 
 	import ClevelandDotPlot from '../../_components/ClevelandDotPlot.percent-range.html.svelte';
-	import AxisX from '../../_components/AxisX.html.svelte';
-	import AxisY from '../../_components/AxisY.html.svelte';
+	import AxisX from '../../_components/AxisX.percent-range.html.svelte';
+	import AxisY from '../../_components/AxisY.percent-range.html.svelte';
 
 	// This example loads csv data as json using @rollup/plugin-dsv
 	import data from '../../_data/fruitOrdinal.csv';
diff --git a/src/routes/_examples_ssr/Column.svelte b/src/routes/_examples_ssr/Column.svelte
index 1f423a75..50b6aee1 100644
--- a/src/routes/_examples_ssr/Column.svelte
+++ b/src/routes/_examples_ssr/Column.svelte
@@ -3,8 +3,8 @@
 	import { scaleBand } from 'd3-scale';
 
 	import Column from '../../_components/Column.svelte';
-	import AxisX from '../../_components/AxisX.html.svelte';
-	import AxisY from '../../_components/AxisY.html.svelte';
+	import AxisX from '../../_components/AxisX.percent-range.html.svelte';
+	import AxisY from '../../_components/AxisY.percent-range.html.svelte';
 	import Annotations from '../../_components/Annotations.html.svelte';
 	import Arrows from '../../_components/Arrows.svelte';
 	import ArrowheadMarker from '../../_components/ArrowheadMarker.svelte';
diff --git a/src/routes/_examples_ssr/ColumnStacked.svelte b/src/routes/_examples_ssr/ColumnStacked.svelte
index 6dece99a..179566d8 100644
--- a/src/routes/_examples_ssr/ColumnStacked.svelte
+++ b/src/routes/_examples_ssr/ColumnStacked.svelte
@@ -5,8 +5,8 @@
 	import { format } from 'd3-format';
 
 	import ColumnStacked from '../../_components/ColumnStacked.svelte';
-	import AxisX from '../../_components/AxisX.html.svelte';
-	import AxisY from '../../_components/AxisY.html.svelte';
+	import AxisX from '../../_components/AxisX.percent-range.html.svelte';
+	import AxisY from '../../_components/AxisY.percent-range.html.svelte';
 
 	// This example loads csv data as json using @rollup/plugin-dsv
 	import data from '../../_data/fruitOrdinal.csv';
@@ -29,7 +29,7 @@
 
 	const series = stackData(data);
 
-	const formatTickY = d => format(`~s`)(d);
+	const formatLabelY = d => format(`~s`)(d);
 </script>
 
 <style>
@@ -68,7 +68,7 @@
 			<AxisY
 				ticks={4}
 				gridlines={false}
-				formatTick={formatTickY}
+				format={formatLabelY}
 			/>
 		</Html>
 		<ScaledSvg>
diff --git a/src/routes/_examples_ssr/Histogram.svelte b/src/routes/_examples_ssr/Histogram.svelte
index f1f3ea76..90254a81 100644
--- a/src/routes/_examples_ssr/Histogram.svelte
+++ b/src/routes/_examples_ssr/Histogram.svelte
@@ -5,8 +5,8 @@
 	import { format } from 'd3-format';
 
 	import Column from '../../_components/Column.svelte';
-	import AxisX from '../../_components/AxisX.html.svelte';
-	import AxisY from '../../_components/AxisY.html.svelte';
+	import AxisX from '../../_components/AxisX.percent-range.html.svelte';
+	import AxisY from '../../_components/AxisY.percent-range.html.svelte';
 
 	import calcThresholds from '../../_modules/calcThresholds.js';
 
@@ -74,7 +74,7 @@
 				gridlines={false}
 				baseline={true}
 				ticks={slimSteps}
-				formatTick={d => +f(d)}
+				format={d => +f(d)}
 			/>
 			<AxisY
 				gridlines={false}
diff --git a/src/routes/_examples_ssr/Line.svelte b/src/routes/_examples_ssr/Line.svelte
index f7f2cc8b..d220ecf4 100644
--- a/src/routes/_examples_ssr/Line.svelte
+++ b/src/routes/_examples_ssr/Line.svelte
@@ -3,8 +3,8 @@
 
 	import Line from '../../_components/Line.svelte';
 	import Area from '../../_components/Area.svelte';
-	import AxisX from '../../_components/AxisX.html.svelte';
-	import AxisY from '../../_components/AxisY.html.svelte';
+	import AxisX from '../../_components/AxisX.percent-range.html.svelte';
+	import AxisY from '../../_components/AxisY.percent-range.html.svelte';
 
 	// This example loads csv data as json using @rollup/plugin-dsv
 	import data from '../../_data/points.csv';
diff --git a/src/routes/_examples_ssr/MultiLine.svelte b/src/routes/_examples_ssr/MultiLine.svelte
index 6c95b09a..bae068fd 100644
--- a/src/routes/_examples_ssr/MultiLine.svelte
+++ b/src/routes/_examples_ssr/MultiLine.svelte
@@ -5,8 +5,8 @@
 	import { format } from 'd3-format';
 
 	import MultiLine from '../../_components/MultiLine.svelte';
-	import AxisX from '../../_components/AxisX.html.svelte';
-	import AxisY from '../../_components/AxisY.html.svelte';
+	import AxisX from '../../_components/AxisX.percent-range.html.svelte';
+	import AxisY from '../../_components/AxisY.percent-range.html.svelte';
 	import GroupLabels from '../../_components/GroupLabels.html.svelte';
 	import SharedTooltip from '../../_components/SharedTooltip.percent-range.html.svelte';
 
@@ -45,8 +45,8 @@
 		};
 	});
 
-	const formatTickX = timeFormat('%b. %e');
-	const formatTickY = d => format(`~s`)(d);
+	const formatLabelX = timeFormat('%b. %e');
+	const formatLabelY = d => format(`~s`)(d);
 </script>
 
 <style>
@@ -80,13 +80,13 @@
 			<AxisX
 				gridlines={false}
 				ticks={data.map(d => d[xKey]).sort((a, b) => a - b)}
-				formatTick={formatTickX}
+				format={formatLabelX}
 				snapTicks={true}
 				tickMarks={true}
 			/>
 			<AxisY
 				baseline={true}
-				formatTick={formatTickY}
+				format={formatLabelY}
 			/>
 		</Html>
 
@@ -97,7 +97,7 @@
 		<Html>
 			<GroupLabels/>
 			<SharedTooltip
-				formatTitle={formatTickX}
+				formatTitle={formatLabelX}
 				dataset={data}
 			/>
 		</Html>
diff --git a/src/routes/_examples_ssr/Scatter.svelte b/src/routes/_examples_ssr/Scatter.svelte
index c9415ea1..86dde98e 100644
--- a/src/routes/_examples_ssr/Scatter.svelte
+++ b/src/routes/_examples_ssr/Scatter.svelte
@@ -2,8 +2,8 @@
 	import { LayerCake, Html } from 'layercake';
 
 	import Scatter from '../../_components/Scatter.html.svelte';
-	import AxisX from '../../_components/AxisX.html.svelte';
-	import AxisY from '../../_components/AxisY.html.svelte';
+	import AxisX from '../../_components/AxisX.percent-range.html.svelte';
+	import AxisY from '../../_components/AxisY.percent-range.html.svelte';
 
 	// This example loads csv data as json using @rollup/plugin-dsv
 	import data from '../../_data/points.csv';
diff --git a/src/routes/_examples_ssr/ScatterWebgl.svelte b/src/routes/_examples_ssr/ScatterWebgl.svelte
index 301b1484..830d32f2 100644
--- a/src/routes/_examples_ssr/ScatterWebgl.svelte
+++ b/src/routes/_examples_ssr/ScatterWebgl.svelte
@@ -2,8 +2,8 @@
 	import { LayerCake, WebGL, Html } from 'layercake';
 
 	import ScatterWebGL from '../../_components/Scatter.webgl.svelte';
-	import AxisX from '../../_components/AxisX.html.svelte';
-	import AxisY from '../../_components/AxisY.html.svelte';
+	import AxisX from '../../_components/AxisX.percent-range.html.svelte';
+	import AxisY from '../../_components/AxisY.percent-range.html.svelte';
 	import QuadTree from '../../_components/QuadTree.html.svelte';
 
 	// This example loads csv data as json using @rollup/plugin-dsv
@@ -13,7 +13,8 @@
 	const yKey = 'myY';
 
 	const r = 3;
-	const padding = 6;
+	const xyPadding = 6;
+	const padding = { top: 5, right: 5, bottom: 20, left: 25 };
 
 	data.forEach(d => {
 		d[yKey] = +d[yKey];
@@ -46,29 +47,29 @@
 
 <div class="chart-container">
 	<LayerCake
-		position={'absolute'}
+		position='absolute'
 		ssr={true}
 		percentRange={true}
-		padding={{ top: 5, right: 5, bottom: 20, left: 25 }}
+		{padding}
 		x={xKey}
 		y={yKey}
-		xPadding={[padding, padding]}
-		yPadding={[padding, padding]}
+		xPadding={[xyPadding, xyPadding]}
+		yPadding={[xyPadding, xyPadding]}
 		data={data}
 	>
 		<Html>
 			<AxisX/>
-			<AxisY/>
+			<AxisY tickMarks={false}/>
 		</Html>
 	</LayerCake>
 
 	<LayerCake
-		position={'absolute'}
-		padding={{ top: 0, right: 5, bottom: 20, left: 25 }}
+		position='absolute'
+		{padding}
 		x={xKey}
 		y={yKey}
-		xPadding={[padding, padding]}
-		yPadding={[padding, padding]}
+		xPadding={[xyPadding, xyPadding]}
+		yPadding={[xyPadding, xyPadding]}
 		data={data}
 	>
 		<WebGL>
diff --git a/src/routes/_examples_ssr/Timeplot.svelte b/src/routes/_examples_ssr/Timeplot.svelte
index 6b349615..c4888237 100644
--- a/src/routes/_examples_ssr/Timeplot.svelte
+++ b/src/routes/_examples_ssr/Timeplot.svelte
@@ -3,8 +3,8 @@
 	import { timeDay } from 'd3-time';
 	import { scaleBand, scaleTime } from 'd3-scale';
 
-	import AxisX from '../../_components/AxisX.html.svelte';
-	import AxisY from '../../_components/AxisY.html.svelte';
+	import AxisX from '../../_components/AxisX.percent-range.html.svelte';
+	import AxisY from '../../_components/AxisY.percent-range.html.svelte';
 	import Scatter from '../../_components/Scatter.html.svelte';
 
 	// This example loads csv data as json using @rollup/plugin-dsv
@@ -71,7 +71,7 @@
 		<Html>
 			<AxisX
 				ticks={[0, 4, 8, 12, 16, 20, 24].map(d => d * 60 * 60)}
-				formatTick={d => `${Math.floor(d / 60 / 60)}:00`}
+				format={d => `${Math.floor(d / 60 / 60)}:00`}
 			/>
 			<AxisY/>
 			<Scatter
diff --git a/src/routes/_site-components/DownloadBtn.svelte b/src/routes/_site-components/DownloadBtn.svelte
index d56fe79c..85c2e4ba 100644
--- a/src/routes/_site-components/DownloadBtn.svelte
+++ b/src/routes/_site-components/DownloadBtn.svelte
@@ -30,7 +30,7 @@
 	async function download () {
 		downloading = true;
 
-		console.log('downloading');
+		// console.log('downloading');
 
 		const cacheBust = new Date().getTime();
 		const files = await (await window.fetch(`/svelte-app.json?${cacheBust}`)).json();
@@ -65,7 +65,7 @@
 			path: `src/routes/+page.svelte`,
 			data: data.main.contents
 		});
-		console.log('here', files);
+		// console.log('here', files);
 		const filteredFiles = uniques(files.filter(Boolean), 'path', false);
 		downloadBlob(toAuto(filteredFiles), `layercake-${ssr ? 'ssr-' : ''}${slug}.zip`);
 		downloading = false;
diff --git a/src/routes/components/+page.svelte b/src/routes/components/+page.svelte
index 6dfcb0c2..3c280ee3 100644
--- a/src/routes/components/+page.svelte
+++ b/src/routes/components/+page.svelte
@@ -214,8 +214,9 @@
 		text-decoration: underline;
 	}
 
-	.block-container :global(.chart-container) {
-		height: 100% !important;
+	.block-container {
+		display: flex;
+		flex-direction: column;
 	}
 
 	h2 {
@@ -239,22 +240,28 @@
 	h4 {
 		display: block;
 		padding: 7px 0;
+		margin-top: 16px;
 	}
 
+	.subgroup-blocks {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		gap: 20px;
+	}
 	.component-block {
-		width: 28%;
-		margin-bottom: 21px;
-		margin-right: 21px;
-		height: 200px;
+		flex-basis: 41%;
+		height: 225px;
 		background-color: #fff;
 		box-shadow: 0 0 12px #ccc;
 		border: 1px solid #ccc;
 		padding: 14px;
 		display: inline-block;
 		vertical-align: top;
+		border-radius: 5px;
 	}
 
-	.component-block:nth-child(3),
+	/* .component-block:nth-child(3),
 	.component-block:nth-child(6),
 	.component-block:nth-child(9),
 	.component-block:nth-child(12),
@@ -262,17 +269,17 @@
 	.component-block:nth-child(18),
 	.component-block:nth-child(21) {
 		margin-right: 0;
-	}
+	} */
 
 	@media (max-width: 1150px) {
 
 		#dek {
 			width: 95%;
 		}
-		.component-block {
+		/* .component-block {
 			width: 43%;
-		}
-		.component-block:nth-child(3),
+		} */
+		/* .component-block:nth-child(3),
 		.component-block:nth-child(6),
 		.component-block:nth-child(9),
 		.component-block:nth-child(12),
@@ -283,18 +290,18 @@
 		}
 		.component-block:nth-child(even) {
 			margin-right: 0 !important;
-		}
+		} */
 	}
 
-	@media (max-width: 860px) {
+	/* @media (max-width: 860px) {
 		.component-block {
 			width: 40%;
 		}
-	}
+	} */
 
 	@media (max-width: 800px) {
 		.component-block {
-			width: 85%;
+			flex-basis: 85%;
 		}
 		#container {
 			padding-right: 1em;
diff --git a/test/padScale.test.js b/test/padScale.test.js
index 0523ea6b..3889399f 100644
--- a/test/padScale.test.js
+++ b/test/padScale.test.js
@@ -164,4 +164,3 @@ describe(`discrete range scales`, () => {
 		});
 	});
 });
-console.log('scale squential', scaleSequentialQuantile().range());