diff --git a/packages/vx-axis/package.json b/packages/vx-axis/package.json
index a82ed862f..7af83a4e2 100644
--- a/packages/vx-axis/package.json
+++ b/packages/vx-axis/package.json
@@ -33,6 +33,7 @@
     "@vx/group": "0.0.198",
     "@vx/point": "0.0.198",
     "@vx/shape": "0.0.198",
+    "@vx/scale": "0.0.198",
     "@vx/text": "0.0.198",
     "classnames": "^2.2.5",
     "prop-types": "^15.6.0"
diff --git a/packages/vx-axis/src/axis/Axis.tsx b/packages/vx-axis/src/axis/Axis.tsx
index c8f5a3b07..3571b8093 100644
--- a/packages/vx-axis/src/axis/Axis.tsx
+++ b/packages/vx-axis/src/axis/Axis.tsx
@@ -1,216 +1,86 @@
 import React from 'react';
 import cx from 'classnames';
-import { Line } from '@vx/shape';
-import { Point } from '@vx/point';
 import { Group } from '@vx/group';
-import { Text } from '@vx/text';
-import center from '../utils/center';
-import getLabelTransform from '../utils/labelTransform';
-import ORIENT from '../constants/orientation';
-import toString from '../utils/toString';
-import toNumberOrUndefined from '../utils/toNumberOrUndefined';
-import { SharedAxisProps, AxisOrientation } from '../types';
+import { getTicks, coerceNumber } from '@vx/scale';
+import { SharedAxisProps, AxisScale } from '../types';
+import AxisRenderer from './AxisRenderer';
+import getTickPosition from '../utils/getTickPosition';
+import getTickFormatter from '../utils/getTickFormatter';
+import createPoint from '../utils/createPoint';
+import Orientation from '../constants/orientation';
 
-export type AxisProps<ScaleInput> = SharedAxisProps<ScaleInput> & {
-  orientation?: AxisOrientation;
+export type AxisProps<Scale extends AxisScale> = SharedAxisProps<Scale> & {
+  orientation?: Orientation;
 };
 
-export default function Axis<ScaleInput>({
-  children,
+export default function Axis<Scale extends AxisScale>({
+  children = AxisRenderer,
   axisClassName,
-  axisLineClassName,
   hideAxisLine = false,
   hideTicks = false,
   hideZero = false,
-  label = '',
-  labelClassName,
-  labelOffset = 14,
-  labelProps = {
-    textAnchor: 'middle',
-    fontFamily: 'Arial',
-    fontSize: 10,
-    fill: '#222',
-  },
   left = 0,
   numTicks = 10,
-  orientation = ORIENT.bottom,
+  orientation = Orientation.bottom,
   rangePadding = 0,
   scale,
-  stroke = '#222',
-  strokeWidth = 1,
-  strokeDasharray,
-  tickClassName,
   tickFormat,
-  tickLabelProps = (/** tickValue, index */) => ({
-    textAnchor: 'middle',
-    fontFamily: 'Arial',
-    fontSize: 10,
-    fill: '#222',
-  }),
   tickLength = 8,
-  tickStroke = '#222',
-  tickTransform,
   tickValues,
-  tickComponent,
   top = 0,
-}: AxisProps<ScaleInput>) {
-  const values =
-    tickValues ||
-    (scale.ticks
-      ? scale.ticks(numTicks)
-      : scale
-          .domain()
-          .filter(
-            (_, index, arr) =>
-              numTicks == null ||
-              arr.length <= numTicks ||
-              index % Math.round((arr.length - 1) / numTicks) === 0,
-          ));
-  const format = tickFormat || (scale.tickFormat ? scale.tickFormat() : toString);
+  ...restProps
+}: AxisProps<Scale>) {
+  const format = tickFormat ?? getTickFormatter(scale);
 
-  const range = scale.range();
-  const range0 = Number(range[0]) + 0.5 - rangePadding;
-  const range1 = Number(range[range.length - 1]) + 0.5 + rangePadding;
+  const isLeft = orientation === Orientation.left;
+  const isTop = orientation === Orientation.top;
+  const horizontal = isTop || orientation === Orientation.bottom;
 
-  const isLeft = orientation === ORIENT.left;
-  const isTop = orientation === ORIENT.top;
-  const axisIsHorizontal = isTop || orientation === ORIENT.bottom;
+  const tickPosition = getTickPosition(scale);
   const tickSign = isLeft || isTop ? -1 : 1;
 
-  const position = center(scale.copy());
-
-  const axisFromPoint = new Point({
-    x: axisIsHorizontal ? range0 : 0,
-    y: axisIsHorizontal ? 0 : range0,
-  });
-  const axisToPoint = new Point({
-    x: axisIsHorizontal ? range1 : 0,
-    y: axisIsHorizontal ? 0 : range1,
-  });
+  const range = scale.range();
+  const axisFromPoint = createPoint({ x: Number(range[0]) + 0.5 - rangePadding, y: 0 }, horizontal);
+  const axisToPoint = createPoint(
+    { x: Number(range[range.length - 1]) + 0.5 + rangePadding, y: 0 },
+    horizontal,
+  );
 
-  let tickLabelFontSize = 10; // track the max tick label size to compute label offset
+  const ticks = (tickValues ?? getTicks(scale, numTicks))
+    .map((value, index) => ({ value, index }))
+    .filter(({ value }) => !hideZero || (value !== 0 && value !== '0'))
+    .map(({ value, index }) => {
+      const scaledValue = coerceNumber(tickPosition(value));
 
-  if (children) {
-    return (
-      <Group className={cx('vx-axis', axisClassName)} top={top} left={left}>
-        {children({
-          axisFromPoint,
-          axisToPoint,
-          horizontal: axisIsHorizontal,
-          tickSign,
-          numTicks,
-          label,
-          rangePadding,
-          tickLength,
-          tickFormat: format,
-          tickPosition: position,
-          ticks: values.map((value, index) => {
-            const scaledValue = toNumberOrUndefined(position(value));
-            const from = new Point({
-              x: axisIsHorizontal ? scaledValue : 0,
-              y: axisIsHorizontal ? 0 : scaledValue,
-            });
-            const to = new Point({
-              x: axisIsHorizontal ? scaledValue : tickSign * tickLength,
-              y: axisIsHorizontal ? tickLength * tickSign : scaledValue,
-            });
-            return {
-              value,
-              index,
-              from,
-              to,
-              formattedValue: format(value, index),
-            };
-          }),
-        })}
-      </Group>
-    );
-  }
+      return {
+        value,
+        index,
+        from: createPoint({ x: scaledValue, y: 0 }, horizontal),
+        to: createPoint({ x: scaledValue, y: tickLength * tickSign }, horizontal),
+        formattedValue: format(value, index),
+      };
+    });
 
   return (
     <Group className={cx('vx-axis', axisClassName)} top={top} left={left}>
-      {values.map((val, index) => {
-        if (
-          hideZero &&
-          ((typeof val === 'number' && val === 0) || (typeof val === 'string' && val === '0'))
-        ) {
-          return null;
-        }
-        const scaledValue = toNumberOrUndefined(position(val));
-        const tickFromPoint = new Point({
-          x: axisIsHorizontal ? scaledValue : 0,
-          y: axisIsHorizontal ? 0 : scaledValue,
-        });
-        const tickToPoint = new Point({
-          x: axisIsHorizontal ? scaledValue : tickSign * tickLength,
-          y: axisIsHorizontal ? tickLength * tickSign : scaledValue,
-        });
-
-        const tickLabelPropsObj = tickLabelProps(val, index);
-        tickLabelFontSize = Math.max(
-          tickLabelFontSize,
-          (typeof tickLabelPropsObj.fontSize === 'number' && tickLabelPropsObj.fontSize) || 0,
-        );
-
-        const tickYCoord = tickToPoint.y + (axisIsHorizontal && !isTop ? tickLabelFontSize : 0);
-        const formattedValue = format(val, index);
-        return (
-          <Group
-            key={`vx-tick-${val}-${index}`}
-            className={cx('vx-axis-tick', tickClassName)}
-            transform={tickTransform}
-          >
-            {!hideTicks && (
-              <Line
-                from={tickFromPoint}
-                to={tickToPoint}
-                stroke={tickStroke}
-                strokeLinecap="square"
-              />
-            )}
-            {tickComponent ? (
-              tickComponent({
-                ...tickLabelPropsObj,
-                x: tickToPoint.x,
-                y: tickYCoord,
-                formattedValue,
-              })
-            ) : (
-              <Text x={tickToPoint.x} y={tickYCoord} {...tickLabelPropsObj}>
-                {formattedValue}
-              </Text>
-            )}
-          </Group>
-        );
+      {children({
+        ...restProps,
+        axisFromPoint,
+        axisToPoint,
+        hideAxisLine,
+        hideTicks,
+        hideZero,
+        horizontal,
+        numTicks,
+        orientation,
+        rangePadding,
+        scale,
+        tickFormat: format,
+        tickLength,
+        tickPosition,
+        tickSign,
+        ticks,
       })}
-
-      {!hideAxisLine && (
-        <Line
-          className={cx('vx-axis-line', axisLineClassName)}
-          from={axisFromPoint}
-          to={axisToPoint}
-          stroke={stroke}
-          strokeWidth={strokeWidth}
-          strokeDasharray={strokeDasharray}
-        />
-      )}
-
-      {label && (
-        <Text
-          className={cx('vx-axis-label', labelClassName)}
-          {...getLabelTransform({
-            labelOffset,
-            labelProps,
-            orientation,
-            range,
-            tickLabelFontSize,
-            tickLength,
-          })}
-          {...labelProps}
-        >
-          {label}
-        </Text>
-      )}
     </Group>
   );
 }
diff --git a/packages/vx-axis/src/axis/AxisBottom.tsx b/packages/vx-axis/src/axis/AxisBottom.tsx
index 3bde70bdb..9b3269034 100644
--- a/packages/vx-axis/src/axis/AxisBottom.tsx
+++ b/packages/vx-axis/src/axis/AxisBottom.tsx
@@ -1,31 +1,12 @@
 import React from 'react';
 import cx from 'classnames';
 import Axis from './Axis';
-import ORIENT from '../constants/orientation';
-import { SharedAxisProps } from '../types';
+import Orientation from '../constants/orientation';
+import { SharedAxisProps, AxisScale } from '../types';
 
-export type AxisBottomProps<ScaleInput> = SharedAxisProps<ScaleInput>;
-
-export default function AxisBottom<ScaleInput>({
-  children,
+export default function AxisBottom<Scale extends AxisScale>({
   axisClassName,
-  axisLineClassName,
-  hideAxisLine,
-  hideTicks,
-  hideZero,
-  label,
-  labelClassName,
   labelOffset = 8,
-  labelProps,
-  left,
-  numTicks,
-  rangePadding,
-  scale,
-  stroke,
-  strokeWidth,
-  strokeDasharray,
-  tickClassName,
-  tickFormat,
   tickLabelProps = (/** tickValue, index */) => ({
     dy: '0.25em',
     fill: '#222',
@@ -34,41 +15,16 @@ export default function AxisBottom<ScaleInput>({
     textAnchor: 'middle',
   }),
   tickLength = 8,
-  tickStroke,
-  tickTransform,
-  tickValues,
-  tickComponent,
-  top,
-}: AxisBottomProps<ScaleInput>) {
+  ...restProps
+}: SharedAxisProps<Scale>) {
   return (
     <Axis
       axisClassName={cx('vx-axis-bottom', axisClassName)}
-      axisLineClassName={axisLineClassName}
-      hideAxisLine={hideAxisLine}
-      hideTicks={hideTicks}
-      hideZero={hideZero}
-      label={label}
-      labelClassName={labelClassName}
       labelOffset={labelOffset}
-      labelProps={labelProps}
-      left={left}
-      numTicks={numTicks}
-      orientation={ORIENT.bottom}
-      rangePadding={rangePadding}
-      scale={scale}
-      stroke={stroke}
-      strokeWidth={strokeWidth}
-      strokeDasharray={strokeDasharray}
-      tickClassName={tickClassName}
-      tickFormat={tickFormat}
+      orientation={Orientation.bottom}
       tickLabelProps={tickLabelProps}
       tickLength={tickLength}
-      tickStroke={tickStroke}
-      tickTransform={tickTransform}
-      tickValues={tickValues}
-      tickComponent={tickComponent}
-      top={top}
-      children={children}
+      {...restProps}
     />
   );
 }
diff --git a/packages/vx-axis/src/axis/AxisLeft.tsx b/packages/vx-axis/src/axis/AxisLeft.tsx
index 061bf7f92..d6ccdebf6 100644
--- a/packages/vx-axis/src/axis/AxisLeft.tsx
+++ b/packages/vx-axis/src/axis/AxisLeft.tsx
@@ -1,31 +1,12 @@
 import React from 'react';
 import cx from 'classnames';
 import Axis from './Axis';
-import ORIENT from '../constants/orientation';
-import { SharedAxisProps } from '../types';
+import Orientation from '../constants/orientation';
+import { SharedAxisProps, AxisScale } from '../types';
 
-export type AxisLeftProps<ScaleInput> = SharedAxisProps<ScaleInput>;
-
-export default function AxisLeft<ScaleInput>({
-  children,
+export default function AxisLeft<Scale extends AxisScale>({
   axisClassName,
-  axisLineClassName,
-  hideAxisLine,
-  hideTicks,
-  hideZero,
-  label,
-  labelClassName,
   labelOffset = 36,
-  labelProps,
-  left,
-  numTicks,
-  rangePadding,
-  scale,
-  stroke,
-  strokeWidth,
-  strokeDasharray,
-  tickClassName,
-  tickFormat,
   tickLabelProps = (/** tickValue, index */) => ({
     dx: '-0.25em',
     dy: '0.25em',
@@ -35,41 +16,16 @@ export default function AxisLeft<ScaleInput>({
     textAnchor: 'end',
   }),
   tickLength = 8,
-  tickStroke,
-  tickTransform,
-  tickValues,
-  tickComponent,
-  top,
-}: AxisLeftProps<ScaleInput>) {
+  ...restProps
+}: SharedAxisProps<Scale>) {
   return (
     <Axis
       axisClassName={cx('vx-axis-left', axisClassName)}
-      axisLineClassName={axisLineClassName}
-      hideAxisLine={hideAxisLine}
-      hideTicks={hideTicks}
-      hideZero={hideZero}
-      label={label}
-      labelClassName={labelClassName}
       labelOffset={labelOffset}
-      labelProps={labelProps}
-      left={left}
-      numTicks={numTicks}
-      orientation={ORIENT.left}
-      rangePadding={rangePadding}
-      scale={scale}
-      stroke={stroke}
-      strokeWidth={strokeWidth}
-      strokeDasharray={strokeDasharray}
-      tickClassName={tickClassName}
-      tickFormat={tickFormat}
+      orientation={Orientation.left}
       tickLabelProps={tickLabelProps}
       tickLength={tickLength}
-      tickStroke={tickStroke}
-      tickTransform={tickTransform}
-      tickValues={tickValues}
-      tickComponent={tickComponent}
-      top={top}
-      children={children}
+      {...restProps}
     />
   );
 }
diff --git a/packages/vx-axis/src/axis/AxisRenderer.tsx b/packages/vx-axis/src/axis/AxisRenderer.tsx
new file mode 100644
index 000000000..594ad238d
--- /dev/null
+++ b/packages/vx-axis/src/axis/AxisRenderer.tsx
@@ -0,0 +1,109 @@
+import React from 'react';
+import cx from 'classnames';
+import { Line } from '@vx/shape';
+import { Group } from '@vx/group';
+import { Text } from '@vx/text';
+
+import { TextProps } from '@vx/text/lib/Text';
+import Orientation from '../constants/orientation';
+import getLabelTransform from '../utils/getLabelTransform';
+import { AxisRendererProps, AxisScale } from '../types';
+
+const defaultTextProps: Partial<TextProps> = {
+  textAnchor: 'middle',
+  fontFamily: 'Arial',
+  fontSize: 10,
+  fill: '#222',
+};
+
+export default function AxisRenderer<Scale extends AxisScale>({
+  axisFromPoint,
+  axisLineClassName,
+  axisToPoint,
+  hideAxisLine,
+  hideTicks,
+  horizontal,
+  label = '',
+  labelClassName,
+  labelOffset = 14,
+  labelProps = defaultTextProps,
+  orientation,
+  scale,
+  stroke = '#222',
+  strokeWidth = 1,
+  strokeDasharray,
+  tickClassName,
+  tickComponent,
+  tickLabelProps = (/** tickValue, index */) => defaultTextProps,
+  tickLength,
+  tickStroke = '#222',
+  tickTransform,
+  ticks,
+}: AxisRendererProps<Scale>) {
+  let tickLabelFontSize = 10; // track the max tick label size to compute label offset
+
+  return (
+    <>
+      {ticks.map(({ value, index, from, to, formattedValue }) => {
+        const tickLabelPropsObj = tickLabelProps(value, index);
+        tickLabelFontSize = Math.max(
+          tickLabelFontSize,
+          (typeof tickLabelPropsObj.fontSize === 'number' && tickLabelPropsObj.fontSize) || 0,
+        );
+
+        const tickYCoord =
+          to.y + (horizontal && orientation !== Orientation.top ? tickLabelFontSize : 0);
+
+        return (
+          <Group
+            key={`vx-tick-${value}-${index}`}
+            className={cx('vx-axis-tick', tickClassName)}
+            transform={tickTransform}
+          >
+            {!hideTicks && <Line from={from} to={to} stroke={tickStroke} strokeLinecap="square" />}
+            {tickComponent ? (
+              tickComponent({
+                ...tickLabelPropsObj,
+                x: to.x,
+                y: tickYCoord,
+                formattedValue,
+              })
+            ) : (
+              <Text x={to.x} y={tickYCoord} {...tickLabelPropsObj}>
+                {formattedValue}
+              </Text>
+            )}
+          </Group>
+        );
+      })}
+
+      {!hideAxisLine && (
+        <Line
+          className={cx('vx-axis-line', axisLineClassName)}
+          from={axisFromPoint}
+          to={axisToPoint}
+          stroke={stroke}
+          strokeWidth={strokeWidth}
+          strokeDasharray={strokeDasharray}
+        />
+      )}
+
+      {label && (
+        <Text
+          className={cx('vx-axis-label', labelClassName)}
+          {...getLabelTransform({
+            labelOffset,
+            labelProps,
+            orientation,
+            range: scale.range(),
+            tickLabelFontSize,
+            tickLength,
+          })}
+          {...labelProps}
+        >
+          {label}
+        </Text>
+      )}
+    </>
+  );
+}
diff --git a/packages/vx-axis/src/axis/AxisRight.tsx b/packages/vx-axis/src/axis/AxisRight.tsx
index 510d36ee0..636c026b6 100644
--- a/packages/vx-axis/src/axis/AxisRight.tsx
+++ b/packages/vx-axis/src/axis/AxisRight.tsx
@@ -1,31 +1,14 @@
 import React from 'react';
 import cx from 'classnames';
 import Axis from './Axis';
-import ORIENT from '../constants/orientation';
-import { SharedAxisProps } from '../types';
+import Orientation from '../constants/orientation';
+import { SharedAxisProps, AxisScale } from '../types';
 
-export type AxisRightProps<ScaleInput> = SharedAxisProps<ScaleInput>;
+export type AxisRightProps<Scale extends AxisScale> = SharedAxisProps<Scale>;
 
-export default function AxisRight<ScaleInput>({
-  children,
+export default function AxisRight<Scale extends AxisScale>({
   axisClassName,
-  axisLineClassName,
-  hideAxisLine,
-  hideTicks,
-  hideZero,
-  label,
-  labelClassName,
   labelOffset = 36,
-  labelProps,
-  left,
-  numTicks,
-  rangePadding,
-  scale,
-  stroke,
-  strokeWidth,
-  strokeDasharray,
-  tickClassName,
-  tickFormat,
   tickLabelProps = (/** tickValue, index */) => ({
     dx: '0.25em',
     dy: '0.25em',
@@ -35,41 +18,16 @@ export default function AxisRight<ScaleInput>({
     textAnchor: 'start',
   }),
   tickLength = 8,
-  tickStroke,
-  tickTransform,
-  tickValues,
-  tickComponent,
-  top,
-}: AxisRightProps<ScaleInput>) {
+  ...restProps
+}: AxisRightProps<Scale>) {
   return (
     <Axis
       axisClassName={cx('vx-axis-right', axisClassName)}
-      axisLineClassName={axisLineClassName}
-      hideAxisLine={hideAxisLine}
-      hideTicks={hideTicks}
-      hideZero={hideZero}
-      label={label}
-      labelClassName={labelClassName}
       labelOffset={labelOffset}
-      labelProps={labelProps}
-      left={left}
-      numTicks={numTicks}
-      orientation={ORIENT.right}
-      rangePadding={rangePadding}
-      scale={scale}
-      stroke={stroke}
-      strokeWidth={strokeWidth}
-      strokeDasharray={strokeDasharray}
-      tickClassName={tickClassName}
-      tickFormat={tickFormat}
+      orientation={Orientation.right}
       tickLabelProps={tickLabelProps}
       tickLength={tickLength}
-      tickStroke={tickStroke}
-      tickTransform={tickTransform}
-      tickValues={tickValues}
-      tickComponent={tickComponent}
-      top={top}
-      children={children}
+      {...restProps}
     />
   );
 }
diff --git a/packages/vx-axis/src/axis/AxisTop.tsx b/packages/vx-axis/src/axis/AxisTop.tsx
index 0c6302420..11ef9570f 100644
--- a/packages/vx-axis/src/axis/AxisTop.tsx
+++ b/packages/vx-axis/src/axis/AxisTop.tsx
@@ -1,31 +1,14 @@
 import React from 'react';
 import cx from 'classnames';
 import Axis from './Axis';
-import ORIENT from '../constants/orientation';
-import { SharedAxisProps } from '../types';
+import Orientation from '../constants/orientation';
+import { SharedAxisProps, AxisScale } from '../types';
 
-export type AxisTopProps<ScaleInput> = SharedAxisProps<ScaleInput>;
+export type AxisTopProps<Scale extends AxisScale> = SharedAxisProps<Scale>;
 
-export default function AxisTop<ScaleInput>({
-  children,
+export default function AxisTop<Scale extends AxisScale>({
   axisClassName,
-  axisLineClassName,
-  hideAxisLine,
-  hideTicks,
-  hideZero,
-  label,
-  labelClassName,
   labelOffset = 8,
-  labelProps,
-  left,
-  numTicks,
-  rangePadding,
-  scale,
-  stroke,
-  strokeWidth,
-  strokeDasharray,
-  tickClassName,
-  tickFormat,
   tickLabelProps = (/** tickValue, index */) => ({
     dy: '-0.25em',
     fill: '#222',
@@ -34,41 +17,16 @@ export default function AxisTop<ScaleInput>({
     textAnchor: 'middle',
   }),
   tickLength = 8,
-  tickStroke,
-  tickTransform,
-  tickValues,
-  tickComponent,
-  top,
-}: AxisTopProps<ScaleInput>) {
+  ...restProps
+}: AxisTopProps<Scale>) {
   return (
     <Axis
       axisClassName={cx('vx-axis-top', axisClassName)}
-      axisLineClassName={axisLineClassName}
-      hideAxisLine={hideAxisLine}
-      hideTicks={hideTicks}
-      hideZero={hideZero}
-      label={label}
-      labelClassName={labelClassName}
       labelOffset={labelOffset}
-      labelProps={labelProps}
-      left={left}
-      numTicks={numTicks}
-      orientation={ORIENT.top}
-      rangePadding={rangePadding}
-      scale={scale}
-      stroke={stroke}
-      strokeWidth={strokeWidth}
-      strokeDasharray={strokeDasharray}
-      tickClassName={tickClassName}
-      tickFormat={tickFormat}
+      orientation={Orientation.top}
       tickLabelProps={tickLabelProps}
       tickLength={tickLength}
-      tickStroke={tickStroke}
-      tickTransform={tickTransform}
-      tickValues={tickValues}
-      tickComponent={tickComponent}
-      top={top}
-      children={children}
+      {...restProps}
     />
   );
 }
diff --git a/packages/vx-axis/src/constants/orientation.ts b/packages/vx-axis/src/constants/orientation.ts
index 57189db18..a2beb4031 100644
--- a/packages/vx-axis/src/constants/orientation.ts
+++ b/packages/vx-axis/src/constants/orientation.ts
@@ -1,10 +1,12 @@
-import { AxisOrientation } from '../types';
+import { ValueOf } from '@vx/scale';
 
-const orientation: Record<AxisOrientation, AxisOrientation> = {
+const Orientation = {
   top: 'top',
   left: 'left',
   right: 'right',
   bottom: 'bottom',
-};
+} as const;
 
-export default orientation;
+type Orientation = ValueOf<typeof Orientation>;
+
+export default Orientation;
diff --git a/packages/vx-axis/src/index.ts b/packages/vx-axis/src/index.ts
index 837ff5d15..0e45a4361 100644
--- a/packages/vx-axis/src/index.ts
+++ b/packages/vx-axis/src/index.ts
@@ -4,3 +4,5 @@ export { default as AxisRight } from './axis/AxisRight';
 export { default as AxisTop } from './axis/AxisTop';
 export { default as AxisBottom } from './axis/AxisBottom';
 export { default as Orientation } from './constants/orientation';
+
+export * from './types';
diff --git a/packages/vx-axis/src/types.ts b/packages/vx-axis/src/types.ts
index 5e91f5e0f..c9ed57652 100644
--- a/packages/vx-axis/src/types.ts
+++ b/packages/vx-axis/src/types.ts
@@ -1,12 +1,21 @@
+import { D3Scale, NumberLike, ScaleInput } from '@vx/scale';
 import { TextProps } from '@vx/text/lib/Text';
+import Orientation from './constants/orientation';
 
-export type AxisOrientation = 'top' | 'right' | 'bottom' | 'left';
+// In order to plot values on an axis, output of the scale must be number.
+// Some scales return undefined.
+export type AxisScaleOutput = number | NumberLike | undefined;
+
+/** A catch-all type for scales that are compatible with axis */
+export type AxisScale<Output extends AxisScaleOutput = AxisScaleOutput> =
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  D3Scale<Output, any, any>;
 
-export type FormattedValue = string | number | undefined;
+type FormattedValue = string | undefined;
 
-export type TickFormatter<ScaleInput> = (value: ScaleInput, tickIndex: number) => FormattedValue;
+export type TickFormatter<T> = (value: T, index: number) => FormattedValue;
 
-export type TickLabelProps<ScaleInput> = (val: ScaleInput, index: number) => Partial<TextProps>;
+export type TickLabelProps<T> = (value: T, index: number) => Partial<TextProps>;
 
 export type TickRendererProps = Partial<TextProps> & {
   x: number;
@@ -14,17 +23,15 @@ export type TickRendererProps = Partial<TextProps> & {
   formattedValue: FormattedValue;
 };
 
-export type SharedAxisProps<ScaleInput> = {
-  /** The class name applied to the outermost axis group element. */
-  axisClassName?: string;
+interface CommonProps<Scale extends AxisScale> {
   /** The class name applied to the axis line element. */
   axisLineClassName?: string;
   /**  If true, will hide the axis line. */
-  hideAxisLine?: boolean;
+  hideAxisLine: boolean;
   /** If true, will hide the ticks (but not the tick labels). */
-  hideTicks?: boolean;
+  hideTicks: boolean;
   /** If true, will hide the '0' value tick and tick label. */
-  hideZero?: boolean;
+  hideZero: boolean;
   /** The text for the axis label. */
   label?: string;
   /** The class name applied to the axis label text element. */
@@ -33,14 +40,12 @@ export type SharedAxisProps<ScaleInput> = {
   labelOffset?: number;
   /** Props applied to the axis label component. */
   labelProps?: Partial<TextProps>;
-  /** A left pixel offset applied to the entire axis. */
-  left?: number;
   /** The number of ticks wanted for the axis (note this is approximate)  */
-  numTicks?: number;
+  numTicks: number;
+  /** Placement of the axis */
+  orientation: Orientation;
   /** Pixel padding to apply to both sides of the axis. */
-  rangePadding?: number;
-  /** A [d3](https://github.com/d3/d3-scale) or [vx](https://github.com/hshoff/vx/tree/master/packages/vx-scale) scale function. */
-  scale: GenericScale<ScaleInput>;
+  rangePadding: number;
   /** The color for the stroke of the lines. */
   stroke?: string;
   /** The pixel value for the width of the lines. */
@@ -49,75 +54,59 @@ export type SharedAxisProps<ScaleInput> = {
   strokeDasharray?: string;
   /** The class name applied to each tick group. */
   tickClassName?: string;
+  /** Override the component used to render tick labels (instead of <Text /> from @vx/text) */
+  tickComponent?: (tickRendererProps: TickRendererProps) => React.ReactNode;
   /** A [d3 formatter](https://github.com/d3/d3-scale/blob/master/README.md#continuous_tickFormat) for the tick text. */
-  tickFormat?: TickFormatter<ScaleInput>;
+  tickFormat: TickFormatter<ScaleInput<Scale>>;
   /** A function that returns props for a given tick label. */
-  tickLabelProps?: TickLabelProps<ScaleInput>;
+  tickLabelProps?: TickLabelProps<ScaleInput<Scale>>;
   /** The length of the tick lines. */
-  tickLength?: number;
+  tickLength: number;
   /** The color for the tick's stroke value. */
   tickStroke?: string;
   /** A custom SVG transform value to be applied to each tick group. */
   tickTransform?: string;
-  /** An array of values that determine the number and values of the ticks. Falls back to `scale.ticks()` or `.domain()`. */
-  tickValues?: ScaleInput[];
-  /** Override the component used to render tick labels (instead of <Text /> from @vx/text) */
-  tickComponent?: (tickRendererProps: TickRendererProps) => React.ReactNode;
-  /** A top pixel offset applied to the entire axis. */
-  top?: number;
-  /** For more control over rendering or to add event handlers to datum, pass a function as children. */
-  children?: (renderProps: ChildRenderProps<ScaleInput>) => React.ReactNode;
-};
-
-// In order to plot values on an axis, Output must be numeric or coercible to a number.
-// Some scales return undefined.
-export type ScaleOutput = number | { valueOf(): number } | undefined;
-
-export type GenericScale<ScaleInput> =
-  | ScaleNoRangeRound<ScaleInput>
-  | ScaleWithRangeRound<ScaleInput>;
-
-interface ScaleNoRangeRound<ScaleInput> {
-  (value: ScaleInput): ScaleOutput | [ScaleOutput, ScaleOutput]; // quantize scales return an array
-  domain(): ScaleInput[] | [ScaleInput, ScaleInput];
-  domain(scaleInput: ScaleInput[] | [ScaleInput, ScaleInput]): any; // we can't capture the copy of the type accurately
-  range(): ScaleOutput[] | [ScaleOutput, ScaleOutput];
-  range(scaleOutput: ScaleOutput[] | [ScaleOutput, ScaleOutput]): any;
-  ticks?: (count: number) => ScaleInput[] | [ScaleInput, ScaleInput];
-  bandwidth?: () => number;
-  round?: () => boolean;
-  tickFormat?: () => (input: ScaleInput) => FormattedValue;
-  copy(): this;
 }
 
-// We cannot have optional methods AND overloads, so define a separate type for rangeRound
-interface ScaleWithRangeRound<ScaleInput> extends ScaleNoRangeRound<ScaleInput> {
-  rangeRound(): ScaleOutput[] | [ScaleOutput, ScaleOutput];
-  rangeRound(scaleOutput: ScaleOutput[] | [ScaleOutput, ScaleOutput]): any;
-}
-
-export interface Point {
+interface Point {
   x: number;
   y: number;
 }
 
-export type ChildRenderProps<ScaleInput> = {
+export type AxisRendererProps<Scale extends AxisScale> = CommonProps<Scale> & {
+  /** Start point of the axis line */
   axisFromPoint: Point;
+  /** End point of the axis line */
   axisToPoint: Point;
+  /** Whether this axis is horizontal */
   horizontal: boolean;
+  /** A [d3](https://github.com/d3/d3-scale) or [vx](https://github.com/hshoff/vx/tree/master/packages/vx-scale) scale function. */
+  scale: Scale;
+  /** Function to compute tick position along the axis from tick value */
+  tickPosition: (value: ScaleInput<Scale>) => AxisScaleOutput;
   /** Axis coordinate sign, -1 for left or top orientation. */
   tickSign: 1 | -1;
-  numTicks: number;
-  label?: string;
-  rangePadding: number;
-  tickLength: number;
-  tickFormat: TickFormatter<ScaleInput>;
-  tickPosition: (value: ScaleInput) => ScaleOutput;
+  /** Computed ticks with positions and formatted value */
   ticks: {
-    value: ScaleInput;
+    value: ScaleInput<Scale>;
     index: number;
     from: Point;
     to: Point;
     formattedValue: FormattedValue;
   }[];
 };
+
+export type SharedAxisProps<Scale extends AxisScale> = Partial<CommonProps<Scale>> & {
+  /** The class name applied to the outermost axis group element. */
+  axisClassName?: string;
+  /** A left pixel offset applied to the entire axis. */
+  left?: number;
+  /** A [d3](https://github.com/d3/d3-scale) or [vx](https://github.com/hshoff/vx/tree/master/packages/vx-scale) scale function. */
+  scale: Scale;
+  /** An array of values that determine the number and values of the ticks. Falls back to `scale.ticks()` or `.domain()`. */
+  tickValues?: ScaleInput<Scale>[];
+  /** A top pixel offset applied to the entire axis. */
+  top?: number;
+  /** For more control over rendering or to add event handlers to datum, pass a function as children. */
+  children?: (renderProps: AxisRendererProps<Scale>) => React.ReactNode;
+};
diff --git a/packages/vx-axis/src/utils/center.ts b/packages/vx-axis/src/utils/center.ts
deleted file mode 100644
index 83683be4c..000000000
--- a/packages/vx-axis/src/utils/center.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { GenericScale } from '../types';
-
-/**
- * Returns a function that applies a centering transform to a scaled value,
- * if `Output` is of type `number` and `scale.bandwidth()` is defined
- */
-export default function center<ScaleInput>(scale: GenericScale<ScaleInput>) {
-  let offset = scale.bandwidth ? scale.bandwidth() / 2 : 0;
-  if (scale.round && scale.round()) offset = Math.round(offset);
-
-  return (d: ScaleInput) => {
-    const scaledValue = scale(d);
-    if (typeof scaledValue === 'number') return scaledValue + offset;
-    // quantize scales return an array of values
-    if (Array.isArray(scaledValue)) return Number(scaledValue[0]) + offset;
-    return scaledValue;
-  };
-}
diff --git a/packages/vx-axis/src/utils/createPoint.ts b/packages/vx-axis/src/utils/createPoint.ts
new file mode 100644
index 000000000..4bb963b6e
--- /dev/null
+++ b/packages/vx-axis/src/utils/createPoint.ts
@@ -0,0 +1,5 @@
+import { Point } from '@vx/point';
+
+export default function createPoint({ x, y }: Partial<Point>, horizontal: boolean) {
+  return new Point(horizontal ? { x, y } : { x: y, y: x });
+}
diff --git a/packages/vx-axis/src/utils/labelTransform.ts b/packages/vx-axis/src/utils/getLabelTransform.ts
similarity index 62%
rename from packages/vx-axis/src/utils/labelTransform.ts
rename to packages/vx-axis/src/utils/getLabelTransform.ts
index ce964d543..dd0f65f1c 100644
--- a/packages/vx-axis/src/utils/labelTransform.ts
+++ b/packages/vx-axis/src/utils/getLabelTransform.ts
@@ -1,17 +1,17 @@
 import { TextProps } from '@vx/text/lib/Text';
-import ORIENT from '../constants/orientation';
-import { AxisOrientation, ScaleOutput } from '../types';
+import Orientation from '../constants/orientation';
+import { AxisScaleOutput } from '../types';
 
 export interface TransformArgs {
   labelOffset: number;
   labelProps: Partial<TextProps>;
-  orientation: AxisOrientation;
-  range: ScaleOutput[];
+  orientation: Orientation;
+  range: AxisScaleOutput[];
   tickLabelFontSize: number;
   tickLength: number;
 }
 
-export default function labelTransform({
+export default function getLabelTransform({
   labelOffset,
   labelProps,
   orientation,
@@ -19,15 +19,15 @@ export default function labelTransform({
   tickLabelFontSize,
   tickLength,
 }: TransformArgs) {
-  const sign = orientation === ORIENT.left || orientation === ORIENT.top ? -1 : 1;
+  const sign = orientation === Orientation.left || orientation === Orientation.top ? -1 : 1;
 
   let x;
   let y;
   let transform;
 
-  if (orientation === ORIENT.top || orientation === ORIENT.bottom) {
+  if (orientation === Orientation.top || orientation === Orientation.bottom) {
     const yBottomOffset =
-      orientation === ORIENT.bottom && typeof labelProps.fontSize === 'number'
+      orientation === Orientation.bottom && typeof labelProps.fontSize === 'number'
         ? labelProps.fontSize
         : 0;
 
diff --git a/packages/vx-axis/src/utils/getTickFormatter.ts b/packages/vx-axis/src/utils/getTickFormatter.ts
new file mode 100644
index 000000000..9e4687397
--- /dev/null
+++ b/packages/vx-axis/src/utils/getTickFormatter.ts
@@ -0,0 +1,18 @@
+import { ScaleInput, toString } from '@vx/scale';
+import { TickFormatter, AxisScale } from '../types';
+
+/**
+ * Returns a tick position for the given tick value
+ */
+export default function getTickFormatter<Scale extends AxisScale>(scale: Scale) {
+  // Broaden type before using 'xxx' in s as typeguard.
+  const s = scale as AxisScale;
+
+  // For point or band scales,
+  // have to add offset to make the tick centered.
+  if ('tickFormat' in s) {
+    return s.tickFormat() as TickFormatter<ScaleInput<Scale>>;
+  }
+
+  return toString as TickFormatter<ScaleInput<Scale>>;
+}
diff --git a/packages/vx-axis/src/utils/getTickPosition.ts b/packages/vx-axis/src/utils/getTickPosition.ts
new file mode 100644
index 000000000..5d2006b54
--- /dev/null
+++ b/packages/vx-axis/src/utils/getTickPosition.ts
@@ -0,0 +1,28 @@
+import { ScaleInput } from '@vx/scale';
+import { AxisScale, AxisScaleOutput } from '../types';
+
+/**
+ * Create a function that returns a tick position for the given tick value
+ */
+export default function getTickPosition<Scale extends AxisScale>(
+  scale: Scale,
+  align: 'start' | 'center' | 'end' = 'center',
+) {
+  // Broaden type before using 'xxx' in s as typeguard.
+  const s = scale as AxisScale;
+
+  // For point or band scales,
+  // have to add offset to make the tick at center or end.
+  if (align !== 'start' && 'bandwidth' in s) {
+    let offset = s.bandwidth();
+    if (align === 'center') offset /= 2;
+    if (s.round()) offset = Math.round(offset);
+    return (d: ScaleInput<Scale>) => {
+      const scaledValue = s(d);
+
+      return typeof scaledValue === 'number' ? scaledValue + offset : scaledValue;
+    };
+  }
+
+  return scale as (d: ScaleInput<Scale>) => AxisScaleOutput;
+}
diff --git a/packages/vx-axis/src/utils/toNumberOrUndefined.ts b/packages/vx-axis/src/utils/toNumberOrUndefined.ts
deleted file mode 100644
index 46beaafe0..000000000
--- a/packages/vx-axis/src/utils/toNumberOrUndefined.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export default function toNumberOrUndefined(
-  val?: number | { valueOf(): number },
-): number | undefined {
-  if (typeof val === 'undefined') return val;
-  return Number(val);
-}
diff --git a/packages/vx-axis/src/utils/toString.ts b/packages/vx-axis/src/utils/toString.ts
deleted file mode 100644
index aab868cc9..000000000
--- a/packages/vx-axis/src/utils/toString.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function toString<T extends { toString(): string }>(x?: T) {
-  return x && x.toString();
-}
diff --git a/packages/vx-axis/test/Axis.test.tsx b/packages/vx-axis/test/Axis.test.tsx
index 40f49b5ca..15b749519 100644
--- a/packages/vx-axis/test/Axis.test.tsx
+++ b/packages/vx-axis/test/Axis.test.tsx
@@ -5,7 +5,6 @@ import { Line } from '@vx/shape';
 import { Text } from '@vx/text';
 import { scaleBand, scaleLinear } from '@vx/scale';
 import { Axis } from '../src';
-import { GenericScale } from '../src/types';
 
 const axisProps = {
   orientation: 'left' as const,
@@ -13,7 +12,7 @@ const axisProps = {
     range: [10, 0],
     round: true,
     domain: [0, 10],
-  }) as GenericScale<number>,
+  }),
   label: 'test axis',
 };
 
@@ -186,26 +185,30 @@ describe('<Axis />', () => {
   });
 
   test('tickFormat should have access to tick index', () => {
-    const wrapper = shallow(<Axis {...axisProps} tickValues={[9]} tickFormat={(val, i) => i} />);
+    const wrapper = shallow(
+      <Axis {...axisProps} tickValues={[9]} tickFormat={(val, i) => `${i}`} />,
+    );
     expect(
       wrapper
         .children()
         .find('.vx-axis-tick')
         .find(Text)
         .prop('children'),
-    ).toBe(0);
+    ).toBe('0');
   });
 
   test('it should use center if scale is band', () => {
-    const overrideAxisProps = {
-      orientation: 'bottom' as const,
-      scale: scaleBand({
-        range: [10, 0],
-        round: true,
-        domain: ['a', 'b'],
-      }),
-    };
-    const wrapper = shallow(<Axis {...overrideAxisProps} tickStroke="blue" />);
+    const wrapper = shallow(
+      <Axis
+        orientation="bottom"
+        scale={scaleBand({
+          range: [10, 0],
+          round: true,
+          domain: ['a', 'b'],
+        })}
+        tickStroke="blue"
+      />,
+    );
     const points = wrapper.children().find(Line);
     // First point
     expect(points.at(0).prop('from')).toEqual({ x: 8, y: 0 });
diff --git a/packages/vx-axis/test/AxisBottom.test.tsx b/packages/vx-axis/test/AxisBottom.test.tsx
index 1a4752716..d75a2a65d 100644
--- a/packages/vx-axis/test/AxisBottom.test.tsx
+++ b/packages/vx-axis/test/AxisBottom.test.tsx
@@ -3,14 +3,13 @@ import { shallow } from 'enzyme';
 
 import { scaleLinear } from '../../vx-scale/src';
 import { Axis, AxisBottom } from '../src';
-import { GenericScale } from '../src/types';
 
 const axisProps = {
   scale: scaleLinear({
     range: [10, 0],
     round: true,
     domain: [0, 10],
-  }) as GenericScale<number>,
+  }),
 };
 
 describe('<AxisBottom />', () => {
diff --git a/packages/vx-axis/test/AxisLeft.test.tsx b/packages/vx-axis/test/AxisLeft.test.tsx
index e943d3f97..2037614d3 100644
--- a/packages/vx-axis/test/AxisLeft.test.tsx
+++ b/packages/vx-axis/test/AxisLeft.test.tsx
@@ -3,14 +3,13 @@ import { shallow } from 'enzyme';
 
 import { scaleLinear } from '../../vx-scale/src';
 import { Axis, AxisLeft } from '../src';
-import { GenericScale } from '../src/types';
 
 const axisProps = {
   scale: scaleLinear({
     range: [10, 0],
     round: true,
     domain: [0, 10],
-  }) as GenericScale<number>,
+  }),
 };
 
 describe('<AxisLeft />', () => {
diff --git a/packages/vx-axis/test/AxisRight.test.tsx b/packages/vx-axis/test/AxisRight.test.tsx
index 50dc26d75..c66dc4b5c 100644
--- a/packages/vx-axis/test/AxisRight.test.tsx
+++ b/packages/vx-axis/test/AxisRight.test.tsx
@@ -3,14 +3,13 @@ import { shallow } from 'enzyme';
 
 import { scaleLinear } from '../../vx-scale/src';
 import { Axis, AxisRight } from '../src';
-import { GenericScale } from '../src/types';
 
 const axisProps = {
   scale: scaleLinear({
     range: [10, 0],
     round: true,
     domain: [0, 10],
-  }) as GenericScale<number>,
+  }),
 };
 
 describe('<AxisRight />', () => {
diff --git a/packages/vx-axis/test/AxisTop.test.tsx b/packages/vx-axis/test/AxisTop.test.tsx
index 74a6b4698..d7fc5ac0e 100644
--- a/packages/vx-axis/test/AxisTop.test.tsx
+++ b/packages/vx-axis/test/AxisTop.test.tsx
@@ -3,14 +3,13 @@ import { shallow } from 'enzyme';
 
 import { scaleLinear } from '../../vx-scale/src';
 import { Axis, AxisTop } from '../src';
-import { GenericScale } from '../src/types';
 
 const axisProps = {
   scale: scaleLinear({
     range: [10, 0],
     round: true,
     domain: [0, 10],
-  }) as GenericScale<number>,
+  }),
 };
 
 describe('<AxisTop />', () => {
diff --git a/packages/vx-axis/test/scales.test.tsx b/packages/vx-axis/test/scales.test.tsx
index 979d95c9b..0777f54d3 100644
--- a/packages/vx-axis/test/scales.test.tsx
+++ b/packages/vx-axis/test/scales.test.tsx
@@ -15,150 +15,181 @@ import {
   scaleUtc,
 } from '@vx/scale';
 import { Axis } from '../src';
-import { GenericScale } from '../src/types';
 
 const axisProps = {
   orientation: 'left' as const,
   label: 'test axis',
 };
 
-function setup<ScaleInput>(scale: GenericScale<ScaleInput>) {
-  return () => shallow(<Axis {...axisProps} scale={scale} />);
-}
-
 describe('Axis scales', () => {
   it('should render with scaleBand', () => {
-    expect(
-      setup(
-        scaleBand({
-          range: [10, 0],
-          round: true,
-          domain: ['a', 'b', 'c'],
-        }) as GenericScale<string>,
+    expect(() =>
+      shallow(
+        <Axis
+          {...axisProps}
+          scale={scaleBand({
+            range: [10, 0],
+            round: true,
+            domain: ['a', 'b', 'c'],
+          })}
+        />,
       ),
     ).not.toThrow();
   });
 
   it('should render with scaleLinear', () => {
-    expect(
-      setup(
-        scaleLinear<number>({
-          range: [10, 0],
-          round: true,
-          domain: [0, 10],
-        }) as GenericScale<number>,
+    expect(() =>
+      shallow(
+        <Axis
+          {...axisProps}
+          scale={scaleLinear({
+            range: [10, 0],
+            round: true,
+            domain: [0, 10],
+          })}
+        />,
       ),
     ).not.toThrow();
   });
 
   it('should render with scaleLog', () => {
-    expect(
-      setup(
-        scaleLog<number>({
-          range: [10, 0],
-          round: true,
-          domain: [1, 10, 100, 1000],
-        }) as GenericScale<number>,
+    expect(() =>
+      shallow(
+        <Axis
+          {...axisProps}
+          scale={scaleLog({
+            range: [10, 0],
+            round: true,
+            domain: [1, 10, 100, 1000],
+          })}
+        />,
       ),
     ).not.toThrow();
   });
 
   it('should render with scaleOrdinal', () => {
-    expect(
-      setup(
-        scaleOrdinal({
-          range: [0, 10],
-          domain: ['a', 'b', 'c'],
-        }) as GenericScale<string>,
+    expect(() =>
+      shallow(
+        <Axis
+          {...axisProps}
+          scale={scaleOrdinal({
+            range: [0, 10],
+            domain: ['a', 'b', 'c'],
+          })}
+        />,
       ),
     ).not.toThrow();
   });
 
   it('should render with scalePoint', () => {
-    expect(
-      setup(
-        scalePoint<string>({
-          range: [0, 10],
-          round: true,
-          domain: ['a', 'b', 'c'],
-        }) as GenericScale<string>,
+    expect(() =>
+      shallow(
+        <Axis
+          {...axisProps}
+          scale={scalePoint({
+            range: [0, 10],
+            round: true,
+            domain: ['a', 'b', 'c'],
+          })}
+        />,
       ),
     ).not.toThrow();
   });
 
   it('should render with scalePower', () => {
-    expect(
-      setup(
-        scalePower<number>({
-          range: [1, 2, 3, 4, 5],
-          domain: [1, 10, 100, 1000, 10000],
-        }) as GenericScale<number>,
+    expect(() =>
+      shallow(
+        <Axis
+          {...axisProps}
+          scale={scalePower({
+            range: [1, 2, 3, 4, 5],
+            domain: [1, 10, 100, 1000, 10000],
+          })}
+        />,
       ),
     ).not.toThrow();
   });
 
   it('should render with scaleQuantile', () => {
-    expect(
-      setup(
-        scaleQuantile<number>({
-          range: [0, 2, 4, 6, 8, 10],
-          domain: [1, 10, 100, 1000, 10000],
-        }) as GenericScale<number>,
+    expect(() =>
+      shallow(
+        <Axis
+          {...axisProps}
+          scale={scaleQuantile({
+            range: [0, 2, 4, 6, 8, 10],
+            domain: [1, 10, 100, 1000, 10000],
+          })}
+        />,
       ),
     ).not.toThrow();
   });
 
   it('should render with scaleQuantize', () => {
-    expect(
-      setup(
-        scaleQuantize<number>({
-          range: [1, 10],
-          domain: [1, 10],
-        }) as GenericScale<number>,
+    expect(() =>
+      shallow(
+        <Axis
+          {...axisProps}
+          scale={scaleQuantize({
+            range: [1, 10],
+            domain: [1, 10],
+          })}
+        />,
       ),
     ).not.toThrow();
   });
 
   it('should render with scaleSymlog', () => {
-    expect(
-      setup(
-        scaleSymlog({
-          range: [1, 10],
-          domain: [1, 10],
-        }) as GenericScale<number>,
+    expect(() =>
+      shallow(
+        <Axis
+          {...axisProps}
+          scale={scaleSymlog({
+            range: [1, 10],
+            domain: [1, 10],
+          })}
+        />,
       ),
     ).not.toThrow();
   });
 
   it('should render with scaleThreshold', () => {
-    expect(
-      setup(
-        scaleThreshold({
-          range: [1, 10],
-          domain: [1, 10],
-        }) as GenericScale<number>,
+    expect(() =>
+      shallow(
+        <Axis
+          {...axisProps}
+          scale={scaleThreshold({
+            range: [1, 10],
+            domain: [1, 10],
+          })}
+        />,
       ),
     ).not.toThrow();
   });
 
   it('should render with scaleTime', () => {
-    expect(
-      setup(
-        scaleTime<number>({
-          range: [1, 10],
-          domain: [new Date('2020-01-01'), new Date('2020-01-05')],
-        }) as GenericScale<Date>,
+    expect(() =>
+      shallow(
+        <Axis
+          {...axisProps}
+          scale={scaleTime({
+            range: [1, 10],
+            domain: [new Date('2020-01-01'), new Date('2020-01-05')],
+          })}
+        />,
       ),
     ).not.toThrow();
   });
 
   it('should render with scaleUtc', () => {
-    expect(
-      setup(
-        scaleUtc<number>({
-          range: [1, 10],
-          domain: [new Date('2020-01-01'), new Date('2020-01-05')],
-        }) as GenericScale<Date>,
+    expect(() =>
+      shallow(
+        <Axis
+          {...axisProps}
+          scale={scaleUtc({
+            range: [1, 10],
+            domain: [new Date('2020-01-01'), new Date('2020-01-05')],
+          })}
+        />,
       ),
     ).not.toThrow();
   });
diff --git a/packages/vx-axis/test/utils/getTickPosition.test.ts b/packages/vx-axis/test/utils/getTickPosition.test.ts
new file mode 100644
index 000000000..92d2701bb
--- /dev/null
+++ b/packages/vx-axis/test/utils/getTickPosition.test.ts
@@ -0,0 +1,42 @@
+import { scaleLinear, scaleBand } from '@vx/scale';
+import getTickPosition from '../../src/utils/getTickPosition';
+
+describe('getTickPosition(scale, align)', () => {
+  describe('scales without band', () => {
+    it('return center position', () => {
+      const position = getTickPosition(scaleLinear({ domain: [0, 10], range: [0, 100] }));
+      expect(position(5)).toEqual(50);
+    });
+  });
+  describe('scales with band', () => {
+    describe('align', () => {
+      const scale = scaleBand({ domain: ['a', 'b', 'c'], range: [0, 100] });
+
+      it('default to center', () => {
+        expect(getTickPosition(scale)('b')).toEqual(50);
+      });
+      it('center', () => {
+        expect(getTickPosition(scale, 'center')('b')).toEqual(50);
+      });
+      it('start', () => {
+        expect((getTickPosition(scale, 'start')('b') as number).toFixed(2)).toEqual('33.33');
+      });
+      it('end', () => {
+        expect((getTickPosition(scale, 'end')('b') as number).toFixed(2)).toEqual('66.67');
+      });
+    });
+    describe('with rounding', () => {
+      const scale = scaleBand({ domain: ['a', 'b', 'c'], range: [0, 100], round: true });
+
+      it('center', () => {
+        expect(getTickPosition(scale, 'center')('b')).toEqual(51);
+      });
+      it('start', () => {
+        expect(getTickPosition(scale, 'start')('b')).toEqual(34);
+      });
+      it('end', () => {
+        expect(getTickPosition(scale, 'end')('b')).toEqual(67);
+      });
+    });
+  });
+});
diff --git a/packages/vx-demo/src/sandboxes/vx-axis/Example.tsx b/packages/vx-demo/src/sandboxes/vx-axis/Example.tsx
index 50a7e77f1..452fb156d 100644
--- a/packages/vx-demo/src/sandboxes/vx-axis/Example.tsx
+++ b/packages/vx-demo/src/sandboxes/vx-axis/Example.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import AreaClosed from '@vx/shape/lib/shapes/AreaClosed';
 import { Grid } from '@vx/grid';
 import { curveMonotoneX } from '@vx/curve';
-import { scaleUtc, scaleLinear, scaleLog, scaleBand } from '@vx/scale';
-import { AxisBottom } from '@vx/axis';
+import { scaleUtc, scaleLinear, scaleLog, scaleBand, ScaleInput } from '@vx/scale';
+import { AxisBottom, SharedAxisProps, AxisScale } from '@vx/axis';
 import { LinearGradient } from '@vx/gradient';
 import { timeFormat } from 'd3-time-format';
 
@@ -25,10 +25,6 @@ export type AxisProps = {
   height: number;
 };
 
-type Scale = any;
-
-type ScaleInput = any;
-
 export default function Example({ width: outerWidth = 800, height: outerHeight = 800 }: AxisProps) {
   // in svg, margin is subtracted from total width/height
   const width = outerWidth - margin.left - margin.right;
@@ -36,19 +32,18 @@ export default function Example({ width: outerWidth = 800, height: outerHeight =
 
   if (width < 10) return null;
 
-  const scales: {
-    scale: Scale;
-    values: ScaleInput[];
-    label: string;
-    tickFormat: (value: ScaleInput, idx: number) => string | number;
-  }[] = [
+  interface AxisDemoProps<Scale extends AxisScale> extends SharedAxisProps<Scale> {
+    values: ScaleInput<Scale>[];
+  }
+
+  const axes: AxisDemoProps<AxisScale<number>>[] = [
     {
       scale: scaleLinear({
         domain: [0, 10],
         range: [0, width],
       }),
       values: [0, 2, 4, 6, 8, 10],
-      tickFormat: (v: number) => (v === 10 ? 'last' : (v === 0 && 'first') || v),
+      tickFormat: (v: number) => (v === 10 ? 'last' : (v === 0 && 'first') || `${v}`),
       label: 'linear',
     },
     {
@@ -59,7 +54,7 @@ export default function Example({ width: outerWidth = 800, height: outerHeight =
         paddingInner: 1,
       }),
       values: ['a', 'b', 'c', 'd'],
-      tickFormat: (v: number) => v,
+      tickFormat: (v: string) => v,
       label: 'categories',
     },
     {
@@ -78,13 +73,13 @@ export default function Example({ width: outerWidth = 800, height: outerHeight =
         range: [0, width],
       }),
       values: [1, 10, 100, 1000, 10000],
-      tickFormat: (v: number) => (`${v}`[0] === '1' ? v : ''),
+      tickFormat: (v: number) => (`${v}`[0] === '1' ? `${v}` : ''),
       label: 'log',
     },
   ];
 
   const scalePadding = 50;
-  const scaleHeight = height / scales.length - scalePadding;
+  const scaleHeight = height / axes.length - scalePadding;
 
   const yScale = scaleLinear({
     domain: [100, 0],
@@ -108,11 +103,11 @@ export default function Example({ width: outerWidth = 800, height: outerHeight =
         rx={14}
       />
       <g transform={`translate(${margin.left},${margin.top})`}>
-        {scales.map(({ scale, values, label, tickFormat }, i) => (
+        {axes.map(({ scale, values, label, tickFormat }, i) => (
           <g key={`scale-${i}`} transform={`translate(0, ${i * (scaleHeight + scalePadding)})`}>
             <AreaClosed
               data={values.map(x => [
-                scale(x) +
+                (scale(x) ?? 0) +
                   ('bandwidth' in scale && typeof scale!.bandwidth !== 'undefined'
                     ? scale.bandwidth!() / 2
                     : 0),
@@ -123,7 +118,7 @@ export default function Example({ width: outerWidth = 800, height: outerHeight =
               fill={gridColor}
               fillOpacity={0.2}
             />
-            <Grid<ScaleInput, number>
+            <Grid<typeof values[0], number>
               xScale={scale}
               yScale={yScale}
               stroke={gridColor}
@@ -132,7 +127,7 @@ export default function Example({ width: outerWidth = 800, height: outerHeight =
               numTicksRows={2}
               numTicksColumns={numTickColumns}
             />
-            <AxisBottom<ScaleInput>
+            <AxisBottom
               top={scaleHeight}
               scale={scale}
               tickFormat={tickFormat}
diff --git a/packages/vx-demo/src/sandboxes/vx-barstack-horizontal/Example.tsx b/packages/vx-demo/src/sandboxes/vx-barstack-horizontal/Example.tsx
index 5069af94a..46979e67b 100644
--- a/packages/vx-demo/src/sandboxes/vx-barstack-horizontal/Example.tsx
+++ b/packages/vx-demo/src/sandboxes/vx-barstack-horizontal/Example.tsx
@@ -144,7 +144,7 @@ export default withTooltip<BarStackHorizontalProps, TooltipData>(
                 )
               }
             </BarStackHorizontal>
-            <AxisLeft<string>
+            <AxisLeft
               hideAxisLine
               hideTicks
               scale={dateScale}
@@ -158,7 +158,7 @@ export default withTooltip<BarStackHorizontalProps, TooltipData>(
                 dy: '0.33em',
               })}
             />
-            <AxisBottom<number>
+            <AxisBottom
               top={yMax}
               scale={temperatureScale}
               stroke={purple3}
diff --git a/packages/vx-demo/src/sandboxes/vx-barstack/Example.tsx b/packages/vx-demo/src/sandboxes/vx-barstack/Example.tsx
index 20f4b055d..c40d3fdcf 100644
--- a/packages/vx-demo/src/sandboxes/vx-barstack/Example.tsx
+++ b/packages/vx-demo/src/sandboxes/vx-barstack/Example.tsx
@@ -161,7 +161,7 @@ export default function Example({
             }
           </BarStack>
         </Group>
-        <AxisBottom<string>
+        <AxisBottom
           top={yMax + margin.top}
           scale={dateScale}
           tickFormat={formatDate}
diff --git a/packages/vx-demo/src/sandboxes/vx-brush/AreaChart.tsx b/packages/vx-demo/src/sandboxes/vx-brush/AreaChart.tsx
index fe9ba12f9..02b71bd62 100644
--- a/packages/vx-demo/src/sandboxes/vx-brush/AreaChart.tsx
+++ b/packages/vx-demo/src/sandboxes/vx-brush/AreaChart.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 import { Group } from '@vx/group';
 import { AreaClosed } from '@vx/shape';
-import { ScaleType } from '@vx/shape/lib/types';
-import { AxisLeft, AxisBottom } from '@vx/axis';
+import { AxisLeft, AxisBottom, AxisScale } from '@vx/axis';
 import { LinearGradient } from '@vx/gradient';
 import { curveMonotoneX } from '@vx/curve';
 import { AppleStock } from '@vx/mock-data/lib/mocks/appleStock';
@@ -44,8 +43,8 @@ export default function AreaChart({
 }: {
   data: AppleStock[];
   gradientColor: string;
-  xScale: ScaleType;
-  yScale: ScaleType;
+  xScale: AxisScale<number>;
+  yScale: AxisScale<number>;
   width: number;
   yMax: number;
   margin: { top: number; right: number; bottom: number; left: number };
@@ -76,7 +75,7 @@ export default function AreaChart({
         curve={curveMonotoneX}
       />
       {!hideBottomAxis && (
-        <AxisBottom<Date>
+        <AxisBottom
           top={yMax}
           scale={xScale}
           numTicks={width > 520 ? 10 : 5}
@@ -86,7 +85,7 @@ export default function AreaChart({
         />
       )}
       {!hideLeftAxis && (
-        <AxisLeft<number>
+        <AxisLeft
           scale={yScale}
           numTicks={5}
           stroke={axisColor}
diff --git a/packages/vx-scale/src/index.ts b/packages/vx-scale/src/index.ts
index aa0a70da5..2280d37b0 100644
--- a/packages/vx-scale/src/index.ts
+++ b/packages/vx-scale/src/index.ts
@@ -16,6 +16,10 @@ export { default as createScale } from './createScale';
 export { default as updateScale } from './updateScale';
 export { default as inferScaleType } from './utils/inferScaleType';
 
+export { default as coerceNumber } from './utils/coerceNumber';
+export { default as getTicks } from './utils/getTicks';
+export { default as toString } from './utils/toString';
+
 // export types
 export * from './types/Base';
 export * from './types/Nice';
diff --git a/packages/vx-scale/src/types/Scale.ts b/packages/vx-scale/src/types/Scale.ts
index c57221196..1d5632eef 100644
--- a/packages/vx-scale/src/types/Scale.ts
+++ b/packages/vx-scale/src/types/Scale.ts
@@ -62,3 +62,33 @@ export type D3Scale<
   DiscreteInput extends StringLike = StringLike,
   ThresholdInput extends DefaultThresholdInput = DefaultThresholdInput
 > = ValueOf<ScaleTypeToD3Scale<Output, DiscreteInput, ThresholdInput>>;
+
+/**
+ * A catch-all type for all D3 scales.
+ *
+ * Use this instead of `D3Scale`
+ * unless other generic types (`Output`, `DiscreteInput` and `ThresholdInput`)
+ * are also included and passed to `D3Scale`.
+ * Otherwise it may not match some scales (band, point, threshold) correctly and cause TS errors.
+ *
+ * Example error messages:
+ * * "Type 'StringLike' is not assignable to type 'string'"
+ * * "Type 'number' is not assignable to type 'DefaultThresholdInput'"
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type AnyD3Scale = D3Scale<any, any, any>;
+
+export type InferD3ScaleOutput<Scale extends AnyD3Scale> =
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Scale extends D3Scale<infer X, any, any> ? X : DefaultOutput;
+
+export type InferD3ScaleDiscreteInput<Scale extends AnyD3Scale> =
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Scale extends D3Scale<any, infer X, any> ? X : StringLike;
+
+export type InferD3ScaleThresholdInput<Scale extends AnyD3Scale> =
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Scale extends D3Scale<any, any, infer X> ? X : DefaultThresholdInput;
+
+/** Get type of scale input from D3 scale */
+export type ScaleInput<Scale extends AnyD3Scale> = Parameters<Scale>[0];
diff --git a/packages/vx-scale/src/utils/coerceNumber.ts b/packages/vx-scale/src/utils/coerceNumber.ts
new file mode 100644
index 000000000..a9387aabc
--- /dev/null
+++ b/packages/vx-scale/src/utils/coerceNumber.ts
@@ -0,0 +1,10 @@
+import { NumberLike } from '../types/Base';
+
+export default function coerceNumber<T>(val: T | NumberLike): T | number {
+  if ((typeof val === 'function' || (typeof val === 'object' && !!val)) && 'valueOf' in val) {
+    const num = val.valueOf();
+    if (typeof num === 'number') return num;
+  }
+
+  return val as T;
+}
diff --git a/packages/vx-scale/src/utils/getTicks.ts b/packages/vx-scale/src/utils/getTicks.ts
new file mode 100644
index 000000000..96699030b
--- /dev/null
+++ b/packages/vx-scale/src/utils/getTicks.ts
@@ -0,0 +1,25 @@
+import { AnyD3Scale, ScaleInput } from '../types/Scale';
+
+export default function getTicks<Scale extends AnyD3Scale>(
+  scale: Scale,
+  numTicks?: number,
+): ScaleInput<Scale>[] {
+  // Because `Scale` is generic type which maybe a subset of AnyD3Scale
+  // that may not have `ticks` field,
+  // TypeScript will not let us do the `'ticks' in scale` check directly.
+  // Have to manually cast and expand type first.
+  const s = scale as AnyD3Scale;
+
+  if ('ticks' in s) {
+    return s.ticks(numTicks);
+  }
+
+  return s
+    .domain()
+    .filter(
+      (_, index, arr) =>
+        numTicks == null ||
+        arr.length <= numTicks ||
+        index % Math.round((arr.length - 1) / numTicks) === 0,
+    );
+}
diff --git a/packages/vx-scale/src/utils/toString.ts b/packages/vx-scale/src/utils/toString.ts
new file mode 100644
index 000000000..e07e8f06e
--- /dev/null
+++ b/packages/vx-scale/src/utils/toString.ts
@@ -0,0 +1,5 @@
+import { StringLike } from '../types/Base';
+
+export default function toString<T extends StringLike>(x?: T) {
+  return x?.toString();
+}
diff --git a/packages/vx-scale/test/utils/coerceNumber.test.ts b/packages/vx-scale/test/utils/coerceNumber.test.ts
new file mode 100644
index 000000000..08fe28a90
--- /dev/null
+++ b/packages/vx-scale/test/utils/coerceNumber.test.ts
@@ -0,0 +1,16 @@
+import coerceNumber from '../../src/utils/coerceNumber';
+
+describe('coerceNumber(mayBeNumberLike)', () => {
+  it('coerces NumberLike to number', () => {
+    expect(coerceNumber({ valueOf: () => 1 })).toEqual(1);
+    expect(coerceNumber(new Date(10))).toEqual(10);
+  });
+  it('returns the same thing if not', () => {
+    expect(coerceNumber('x')).toEqual('x');
+    expect(coerceNumber(2)).toEqual(2);
+    expect(coerceNumber(0)).toEqual(0);
+    expect(coerceNumber(null)).toBeNull();
+    expect(coerceNumber(undefined)).toBeUndefined();
+    expect(coerceNumber({ x: 1 })).toEqual({ x: 1 });
+  });
+});
diff --git a/packages/vx-scale/test/utils/getTicks.test.ts b/packages/vx-scale/test/utils/getTicks.test.ts
new file mode 100644
index 000000000..59fb4b13e
--- /dev/null
+++ b/packages/vx-scale/test/utils/getTicks.test.ts
@@ -0,0 +1,19 @@
+import getTicks from '../../src/utils/getTicks';
+import { scaleLinear, scaleBand } from '../../lib';
+
+describe('getTicks(scale)', () => {
+  it('linear', () => {
+    const scale = scaleLinear();
+    expect(getTicks(scale, 3)).toEqual([0, 0.5, 1]);
+    expect(getTicks(scale, 2)).toEqual([0, 0.5, 1]);
+    expect(getTicks(scale, 1)).toEqual([0, 1]);
+  });
+  it('band', () => {
+    const scale = scaleBand({
+      domain: ['a', 'b', 'c', 'd'],
+    });
+    expect(getTicks(scale, 4)).toEqual(['a', 'b', 'c', 'd']);
+    expect(getTicks(scale, 3)).toEqual(['a', 'b', 'c', 'd']);
+    expect(getTicks(scale, 2)).toEqual(['a', 'c']);
+  });
+});
diff --git a/packages/vx-scale/test/utils/toString.test.ts b/packages/vx-scale/test/utils/toString.test.ts
new file mode 100644
index 000000000..09e794e3b
--- /dev/null
+++ b/packages/vx-scale/test/utils/toString.test.ts
@@ -0,0 +1,14 @@
+import toString from '../../src/utils/toString';
+
+describe('toString(mayBeStringLike)', () => {
+  it('converts StringLike to string', () => {
+    expect(toString({ toString: () => 'haha' })).toEqual('haha');
+    expect(toString('x')).toEqual('x');
+    expect(toString(2)).toEqual('2');
+    expect(toString(0)).toEqual('0');
+    expect(toString({ x: 1 })).toEqual('[object Object]');
+  });
+  it('returns the same thing if not', () => {
+    expect(toString(undefined)).toBeUndefined();
+  });
+});