axis lineInset and textInset

docs/features/scales.md

@@ -948,7 +948,8 @@ Plot automatically generates [axis](../marks/axis.md) and optionally [grid](../m
 * **line** - if true, draw the axis line (only for *x* and *y*)
 * **label** - a string to label the axis
 * **labelAnchor** - the label anchor: *top*, *right*, *bottom*, *left*, or *center*
-* **labelOffset** - the label position offset (in pixels; default depends on margins and orientation)
+* **lineInset** - the label line inset (in pixels; default 3)
+* **textInset** - the label text inset (in pixels; default 3)
 * **fontVariant** - the font-variant attribute for ticks; defaults to *tabular-nums* if quantitative
 * **ariaLabel** - a short label representing the axis in the accessibility tree
 * **ariaDescription** - a textual description for the axis

docs/marks/axis.md

@@ -357,7 +357,8 @@ In addition to the [standard mark options](../features/marks.md), the axis mark
 * **fontVariant** - the font-variant attribute for ticks; defaults to tabular-nums for quantitative axes
 * **label** - a string to label the axis; defaults to the scale’s label, perhaps with an arrow
 * **labelAnchor** - the label anchor: *top*, *right*, *bottom*, *left*, or *center*
-* **labelOffset** - the label position offset (in pixels; default depends on margins and orientation)
+* **lineInset** - the label line inset (in pixels; default 3)
+* **textInset** - the label text inset (in pixels; default 3)
 * **color** - the color of the ticks and labels (defaults to *currentColor*)
 * **textStroke** - the color of the stroke around tick labels (defaults to *none*)
 * **textStrokeOpacity** - the opacity of the stroke around tick labels

src/marks/axis.d.ts

@@ -8,7 +8,7 @@ import type {TickXOptions, TickYOptions} from "./tick.js";
 type GridScaleOptions = Pick<ScaleOptions, "interval" | "ticks" | "tickSpacing">;
 
 /** The subset of scale options for axes. */
-type AxisScaleOptions = Pick<ScaleOptions, "tickSize" | "tickPadding" | "tickFormat" | "tickRotate" | "label" | "labelOffset" | "labelAnchor">; // prettier-ignore
+type AxisScaleOptions = Pick<ScaleOptions, "label" | "labelAnchor" | "lineInset" | "textInset" | "tickFormat" | "tickPadding" | "tickRotate" | "tickSize">; // prettier-ignore
 
 /** Options for the grid marks. */
 export interface GridOptions extends GridScaleOptions {

src/marks/axis.js

@@ -85,8 +85,9 @@ function axisKy(
     marginBottom = margin === undefined ? 20 : margin,
     marginLeft = margin === undefined ? (anchor === "left" ? 40 : 0) : margin,
     label,
-    labelOffset,
     labelAnchor,
+    lineInset = 3,
+    textInset = 3,
     ...options
   }
 ) {
@@ -133,7 +134,6 @@ function axisKy(
             const scale = scales[k];
             const {marginTop, marginRight, marginBottom, marginLeft} = (k === "y" && dimensions.inset) || dimensions;
             const cla = labelAnchor ?? (scale.bandwidth ? "center" : "top");
-            const clo = labelOffset ?? (anchor === "right" ? marginRight : marginLeft) - 3;
             if (cla === "center") {
               this.textAnchor = undefined; // middle
               this.lineAnchor = anchor === "right" ? "bottom" : "top";
@@ -145,8 +145,8 @@ function axisKy(
               this.frameAnchor = `${cla}-${anchor}`;
               this.rotate = 0;
             }
-            this.dy = cla === "top" ? 3 - marginTop : cla === "bottom" ? marginBottom - 3 : 0;
-            this.dx = anchor === "right" ? clo : -clo;
+            this.dy = cla === "top" ? lineInset - marginTop : cla === "bottom" ? marginBottom - lineInset : 0;
+            this.dx = anchor === "right" ? marginRight - textInset : textInset - marginLeft;
             this.ariaLabel = `${k}-axis label`;
             return {
               facets: [[0]],
@@ -189,7 +189,8 @@ function axisKx(
     marginLeft = margin === undefined ? 20 : margin,
     label,
     labelAnchor,
-    labelOffset,
+    lineInset = 3,
+    textInset = 3,
     ...options
   }
 ) {
@@ -236,7 +237,6 @@ function axisKx(
             const scale = scales[k];
             const {marginTop, marginRight, marginBottom, marginLeft} = (k === "x" && dimensions.inset) || dimensions;
             const cla = labelAnchor ?? (scale.bandwidth ? "center" : "right");
-            const clo = labelOffset ?? (anchor === "top" ? marginTop : marginBottom) - 3;
             if (cla === "center") {
               this.frameAnchor = anchor;
               this.textAnchor = undefined; // middle
@@ -245,8 +245,8 @@ function axisKx(
               this.textAnchor = cla === "right" ? "end" : "start";
             }
             this.lineAnchor = anchor;
-            this.dy = anchor === "top" ? -clo : clo;
-            this.dx = cla === "right" ? marginRight - 3 : cla === "left" ? 3 - marginLeft : 0;
+            this.dy = anchor === "top" ? lineInset - marginTop : marginBottom - lineInset;
+            this.dx = cla === "right" ? marginRight - textInset : cla === "left" ? textInset - marginLeft : 0;
             this.ariaLabel = `${k}-axis label`;
             return {
               facets: [[0]],

src/plot.js

@@ -529,7 +529,8 @@ function axisOptions(
     ariaDescription,
     label = defaults.label,
     labelAnchor,
-    labelOffset
+    lineInset,
+    textInset
   }
 ) {
   return {
@@ -546,7 +547,8 @@ function axisOptions(
     ariaDescription,
     label,
     labelAnchor,
-    labelOffset
+    lineInset,
+    textInset
   };
 }
 

src/scales.d.ts

@@ -608,11 +608,11 @@ export interface ScaleOptions extends ScaleDefaults {
    */
   labelAnchor?: "top" | "right" | "bottom" | "left" | "center";
 
-  /**
-   * The axis **label** position offset (in pixels); default depends on margins
-   * and orientation.
-   */
-  labelOffset?: number;
+  /** The axis label line inset (in pixels); defaults to 3. */
+  lineInset?: number;
+
+  /** The axis label text inset (in pixels); defaults to 3. */
+  textInset?: number;
 
   /**
    * If true, draw a line along the axis; if false (default), do not.