font-variant on the axes

README.md

@@ -273,6 +273,7 @@ Plot automatically generates axes for position scales. You can configure these a
 * *scale*.**label** - a string to label the axis
 * *scale*.**labelAnchor** - the label anchor: *top*, *right*, *bottom*, *left*, or *center*
 * *scale*.**labelOffset** - the label position offset (in pixels; default 0, typically for facet axes)
+* *scale*.**fontVariant** - the font-variant attribute for axis ticks; defaults to tabular-nums.
 
 Top-level options are also supported as shorthand: **grid** (for *x* and *y* only; see [facet.grid](#facet-options)), **label**, **axis**, **inset**, **round**, **align**, and **padding**.
 

src/axis.js

@@ -10,6 +10,7 @@ export class AxisX {
     tickSize = name === "fx" ? 0 : 6,
     tickPadding = tickSize === 0 ? 9 : 3,
     tickFormat,
+    fontVariant = "tabular-nums",
     grid,
     label,
     labelAnchor,
@@ -23,6 +24,7 @@ export class AxisX {
     this.tickSize = number(tickSize);
     this.tickPadding = number(tickPadding);
     this.tickFormat = tickFormat;
+    this.fontVariant = string(fontVariant);
     this.grid = boolean(grid);
     this.label = string(label);
     this.labelAnchor = maybeKeyword(labelAnchor, "labelAnchor", ["center", "left", "right"]);
@@ -49,6 +51,7 @@ export class AxisX {
   ) {
     const {
       axis,
+      fontVariant,
       grid,
       label,
       labelAnchor,
@@ -65,6 +68,7 @@ export class AxisX {
         .call(maybeTickRotate, tickRotate)
         .attr("font-size", null)
         .attr("font-family", null)
+        .attr("font-variant", fontVariant)
         .call(!line ? g => g.select(".domain").remove() : () => {})
         .call(!grid ? () => {}
           : fy ? gridFacetX(index, fy, -ty)
@@ -93,6 +97,7 @@ export class AxisY {
     tickSize = name === "fy" ? 0 : 6,
     tickPadding = tickSize === 0 ? 9 : 3,
     tickFormat,
+    fontVariant = "tabular-nums",
     grid,
     label,
     labelAnchor,
@@ -106,6 +111,7 @@ export class AxisY {
     this.tickSize = number(tickSize);
     this.tickPadding = number(tickPadding);
     this.tickFormat = tickFormat;
+    this.fontVariant = string(fontVariant);
     this.grid = boolean(grid);
     this.label = string(label);
     this.labelAnchor = maybeKeyword(labelAnchor, "labelAnchor", ["center", "top", "bottom"]);
@@ -130,6 +136,7 @@ export class AxisY {
   ) {
     const {
       axis,
+      fontVariant,
       grid,
       label,
       labelAnchor,
@@ -146,6 +153,7 @@ export class AxisY {
         .call(maybeTickRotate, tickRotate)
         .attr("font-size", null)
         .attr("font-family", null)
+        .attr("font-variant", fontVariant)
         .call(!line ? g => g.select(".domain").remove() : () => {})
         .call(!grid ? () => {}
           : fx ? gridFacetY(index, fx, -tx)

src/legends/ramp.js

@@ -23,7 +23,6 @@ export function legendRamp(color, {
       .attr("class", className)
       .attr("font-family", "system-ui, sans-serif")
       .attr("font-size", 10)
-      .attr("font-variant", "tabular-nums")
       .attr("width", width)
       .attr("height", height)
       .attr("viewBox", `0 0 ${width} ${height}`)

src/legends/swatches.js

@@ -83,7 +83,6 @@ export function legendSwatches(color, {
         .${className} {
           font-family: system-ui, sans-serif;
           font-size: 10px;
-          font-variant: tabular-nums;
           margin-bottom: 0.5em;${marginLeft === undefined ? "" : `
           margin-left: ${+marginLeft}px;`}${width === undefined ? "" : `
           width: ${width}px;`}

src/plot.js

@@ -70,7 +70,6 @@ export function plot(options = {}) {
       .attr("fill", "currentColor")
       .attr("font-family", "system-ui, sans-serif")
       .attr("font-size", 10)
-      .attr("font-variant", "tabular-nums")
       .attr("text-anchor", "middle")
       .attr("width", width)
       .attr("height", height)