From bdbc77be552ef1cbe7c2e37607611f81b5e36503 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= <fil@rezo.net>
Date: Fri, 10 Dec 2021 16:59:16 +0100
Subject: [PATCH 1/5] remove font-variant from the global styles; introduce the
 axis fontVariant option, which defaults to tabular-nums closes #601

---
 README.md                                      |  1 +
 src/axis.js                                    |  8 ++++++++
 src/legends/ramp.js                            |  1 -
 src/legends/swatches.js                        |  1 -
 src/plot.js                                    |  1 -
 test/output/aaplBollinger.svg                  |  6 +++---
 test/output/aaplCandlestick.svg                |  4 ++--
 test/output/aaplChangeVolume.svg               |  6 +++---
 test/output/aaplClose.svg                      |  6 +++---
 test/output/aaplCloseUntyped.svg               |  6 +++---
 test/output/aaplMonthly.svg                    |  6 +++---
 test/output/aaplVolume.svg                     |  6 +++---
 test/output/aaplVolumeRect.svg                 |  6 +++---
 test/output/anscombeQuartet.svg                | 14 +++++++-------
 test/output/athletesHeightWeight.svg           |  6 +++---
 test/output/athletesHeightWeightBin.svg        |  6 +++---
 test/output/athletesHeightWeightBinStroke.svg  |  6 +++---
 test/output/athletesHeightWeightSex.svg        |  6 +++---
 test/output/athletesHeightWeightSport.svg      |  6 +++---
 test/output/athletesNationality.svg            |  6 +++---
 test/output/athletesSexWeight.svg              |  6 +++---
 test/output/athletesSportSex.svg               |  6 +++---
 test/output/athletesSportWeight.svg            |  6 +++---
 test/output/athletesWeight.svg                 |  6 +++---
 test/output/athletesWeightCumulative.svg       |  6 +++---
 test/output/availability.svg                   |  6 +++---
 test/output/ballotStatusRace.svg               |  6 +++---
 test/output/beckerBarley.svg                   | 18 +++++++++---------
 test/output/caltrain.html                      |  3 +--
 test/output/carsMpg.svg                        |  6 +++---
 test/output/carsParcoords.svg                  |  4 ++--
 test/output/collapsedHistogram.svg             |  6 +++---
 test/output/colorLegendCategorical.html        |  1 -
 test/output/colorLegendCategoricalColumns.html |  1 -
 test/output/colorLegendCategoricalReverse.html |  1 -
 test/output/colorLegendCategoricalScheme.html  |  1 -
 test/output/colorLegendDiverging.svg           |  2 +-
 test/output/colorLegendDivergingPivot.svg      |  2 +-
 .../colorLegendDivergingPivotAsymmetric.svg    |  2 +-
 test/output/colorLegendDivergingSqrt.svg       |  2 +-
 test/output/colorLegendInterpolate.svg         |  2 +-
 test/output/colorLegendInterpolateSqrt.svg     |  2 +-
 test/output/colorLegendLabelBoth.svg           |  2 +-
 test/output/colorLegendLabelLegend.svg         |  2 +-
 test/output/colorLegendLabelScale.svg          |  2 +-
 test/output/colorLegendLinear.svg              |  2 +-
 .../colorLegendLinearTruncatedScheme.svg       |  2 +-
 test/output/colorLegendLog.svg                 |  2 +-
 test/output/colorLegendLogTicks.svg            |  2 +-
 test/output/colorLegendMargins.svg             |  2 +-
 test/output/colorLegendOrdinal.html            |  1 -
 test/output/colorLegendOrdinalRamp.svg         |  2 +-
 test/output/colorLegendOrdinalRampTickSize.svg |  2 +-
 test/output/colorLegendOrdinalReverseRamp.svg  |  2 +-
 test/output/colorLegendOrdinalScheme.html      |  1 -
 test/output/colorLegendOrdinalSchemeRamp.svg   |  2 +-
 test/output/colorLegendOrdinalTickFormat.html  |  1 -
 .../colorLegendOrdinalTickFormatFunction.html  |  1 -
 test/output/colorLegendOrdinalTicks.svg        |  2 +-
 test/output/colorLegendQuantile.svg            |  2 +-
 test/output/colorLegendQuantileImplicit.svg    |  2 +-
 test/output/colorLegendQuantitative.svg        |  2 +-
 test/output/colorLegendQuantitativeScheme.svg  |  2 +-
 test/output/colorLegendSqrt.svg                |  2 +-
 test/output/colorLegendSqrtPiecewise.svg       |  2 +-
 test/output/colorLegendThreshold.svg           |  2 +-
 test/output/colorLegendThresholdTickSize.svg   |  2 +-
 test/output/covidIhmeProjectedDeaths.svg       |  6 +++---
 test/output/crimeanWarOverlapped.svg           |  6 +++---
 test/output/crimeanWarStacked.svg              |  6 +++---
 test/output/d3Survey2015Comfort.svg            |  6 +++---
 test/output/d3Survey2015Why.svg                |  6 +++---
 test/output/diamondsCaratPrice.svg             |  6 +++---
 test/output/diamondsCaratPriceDots.svg         |  6 +++---
 test/output/empty.svg                          |  6 +++---
 test/output/emptyX.svg                         |  2 +-
 test/output/figcaption.html                    |  6 +++---
 test/output/figcaptionHtml.html                |  6 +++---
 test/output/firstLadies.svg                    |  4 ++--
 test/output/footballCoverage.svg               |  6 +++---
 test/output/fruitSales.svg                     |  6 +++---
 test/output/fruitSalesDate.svg                 |  6 +++---
 test/output/gistempAnomaly.svg                 |  6 +++---
 test/output/gistempAnomalyMoving.svg           |  6 +++---
 test/output/gistempAnomalyTransform.svg        |  6 +++---
 test/output/googleTrendsRidgeline.svg          |  6 +++---
 test/output/gridChoropleth.svg                 |  2 +-
 test/output/hadcrutWarmingStripes.svg          |  4 ++--
 test/output/highCardinalityOrdinal.svg         |  4 ++--
 test/output/identityScale.svg                  |  6 +++---
 test/output/industryUnemployment.svg           |  6 +++---
 test/output/industryUnemploymentShare.svg      |  6 +++---
 test/output/industryUnemploymentStream.svg     |  6 +++---
 test/output/learningPoverty.svg                |  6 +++---
 test/output/letterFrequencyBar.svg             |  6 +++---
 test/output/letterFrequencyCloud.svg           |  2 +-
 test/output/letterFrequencyColumn.svg          |  6 +++---
 test/output/letterFrequencyDot.svg             |  4 ++--
 test/output/letterFrequencyLollipop.svg        |  6 +++---
 test/output/logDegenerate.svg                  |  4 ++--
 test/output/metroInequality.svg                |  6 +++---
 test/output/metroInequalityChange.svg          |  6 +++---
 test/output/metroUnemployment.svg              |  6 +++---
 test/output/metroUnemploymentHighlight.svg     |  6 +++---
 test/output/metroUnemploymentIndex.svg         |  6 +++---
 test/output/metroUnemploymentMoving.svg        |  6 +++---
 test/output/metroUnemploymentNormalize.svg     |  6 +++---
 test/output/metroUnemploymentRidgeline.svg     |  6 +++---
 test/output/metroUnemploymentStroke.svg        |  6 +++---
 test/output/mobyDickFaceted.svg                | 14 +++++++-------
 test/output/mobyDickLetterFrequency.svg        |  6 +++---
 test/output/mobyDickLetterPairs.svg            |  4 ++--
 test/output/mobyDickLetterPosition.svg         |  6 +++---
 .../output/mobyDickLetterRelativeFrequency.svg |  6 +++---
 test/output/morleyBoxplot.svg                  |  6 +++---
 test/output/moviesProfitByGenre.svg            |  6 +++---
 test/output/musicRevenue.svg                   |  6 +++---
 test/output/opacityLegend.svg                  |  2 +-
 test/output/opacityLegendColor.svg             |  2 +-
 test/output/opacityLegendLinear.svg            |  2 +-
 test/output/opacityLegendLog.svg               |  2 +-
 test/output/opacityLegendRange.svg             |  2 +-
 test/output/opacityLegendSqrt.svg              |  2 +-
 test/output/ordinalBar.svg                     |  6 +++---
 test/output/penguinCulmen.svg                  | 18 +++++++++---------
 test/output/penguinCulmenArray.svg             | 18 +++++++++---------
 test/output/penguinIslandUnknown.svg           |  6 +++---
 test/output/penguinMass.svg                    |  6 +++---
 test/output/penguinMassSex.svg                 | 12 ++++++------
 test/output/penguinMassSexSpecies.svg          | 18 +++++++++---------
 test/output/penguinMassSpecies.svg             |  6 +++---
 test/output/penguinSex.svg                     |  6 +++---
 test/output/penguinSexMassCulmenSpecies.svg    | 12 ++++++------
 test/output/penguinSpeciesGroup.svg            |  4 ++--
 test/output/penguinSpeciesIsland.svg           |  6 +++---
 test/output/penguinSpeciesIslandRelative.svg   |  6 +++---
 test/output/penguinSpeciesIslandSex.svg        | 12 ++++++------
 test/output/polylinear.svg                     |  4 ++--
 test/output/randomBins.svg                     |  6 +++---
 test/output/randomBinsXY.svg                   |  6 +++---
 test/output/randomQuantile.svg                 |  6 +++---
 test/output/randomWalk.svg                     |  6 +++---
 test/output/seattlePrecipitationRule.svg       |  4 ++--
 test/output/seattleTemperatureBand.svg         |  6 +++---
 test/output/seattleTemperatureCell.svg         |  6 +++---
 test/output/sfCovidDeaths.svg                  |  6 +++---
 test/output/sfTemperatureBand.svg              |  6 +++---
 test/output/sfTemperatureBandArea.svg          |  6 +++---
 test/output/simpsonsRatings.svg                |  6 +++---
 test/output/simpsonsRatingsDots.svg            |  6 +++---
 test/output/simpsonsViews.svg                  |  6 +++---
 test/output/singleValueBar.svg                 |  6 +++---
 test/output/singleValueBin.svg                 |  6 +++---
 test/output/softwareVersions.svg               |  4 ++--
 test/output/stackedBar.svg                     |  4 ++--
 test/output/stackedRect.svg                    |  4 ++--
 test/output/stargazers.svg                     |  6 +++---
 test/output/stargazersBinned.svg               |  6 +++---
 test/output/stargazersHourly.svg               |  6 +++---
 test/output/stargazersHourlyGroup.svg          |  6 +++---
 test/output/stocksIndex.svg                    |  6 +++---
 test/output/travelersYearOverYear.svg          |  6 +++---
 test/output/uniformRandomDifference.svg        |  6 +++---
 test/output/untypedDateBin.svg                 |  6 +++---
 test/output/usCongressAge.svg                  |  6 +++---
 test/output/usCongressAgeGender.svg            |  6 +++---
 test/output/usPopulationStateAge.svg           |  6 +++---
 test/output/usPopulationStateAgeDots.svg       |  4 ++--
 test/output/usPresidentFavorabilityDots.svg    |  6 +++---
 test/output/usPresidentialElection2020.svg     |  6 +++---
 test/output/usPresidentialForecast2016.svg     |  6 +++---
 test/output/usRetailSales.svg                  |  6 +++---
 test/output/usStatePopulationChange.svg        |  6 +++---
 test/output/wealthBritainBar.svg               |  4 ++--
 test/output/wealthBritainProportionPlot.svg    |  4 ++--
 test/output/wordCloud.svg                      |  2 +-
 test/output/wordLengthMobyDick.svg             |  6 +++---
 test/plots/aapl-candlestick.js                 |  3 ++-
 178 files changed, 451 insertions(+), 453 deletions(-)

diff --git a/README.md b/README.md
index 3da79153a2..2c53a65400 100644
--- a/README.md
+++ b/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**.
 
diff --git a/src/axis.js b/src/axis.js
index 42a39d7686..54101afae4 100644
--- a/src/axis.js
+++ b/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)
diff --git a/src/legends/ramp.js b/src/legends/ramp.js
index cd7555dce4..2172860963 100644
--- a/src/legends/ramp.js
+++ b/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}`)
diff --git a/src/legends/swatches.js b/src/legends/swatches.js
index 43796c831c..28720d2118 100644
--- a/src/legends/swatches.js
+++ b/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;`}
diff --git a/src/plot.js b/src/plot.js
index 3cbe4e5d26..d83e5715e7 100644
--- a/src/plot.js
+++ b/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)
diff --git a/test/output/aaplBollinger.svg b/test/output/aaplBollinger.svg
index 62fe7f700f..812d2fa9a8 100644
--- a/test/output/aaplBollinger.svg
+++ b/test/output/aaplBollinger.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,358.9133255882662)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">60</text>
@@ -70,7 +70,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">190</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Close</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(114.58991228070175,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">2014</text>
     </g>
diff --git a/test/output/aaplCandlestick.svg b/test/output/aaplCandlestick.svg
index 8f725adc05..37701ca780 100644
--- a/test/output/aaplCandlestick.svg
+++ b/test/output/aaplCandlestick.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="960" height="400" viewBox="0 0 960 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="960" height="400" viewBox="0 0 960 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -46,7 +46,7 @@
       <line stroke="currentColor" x2="900" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">190</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Apple stock price ($)</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(117.53999999999999,0)">
       <line stroke="currentColor" y2="6"></line>
       <line stroke="currentColor" y2="-350" stroke-opacity="0.1"></line><text fill="currentColor" y="9" dy="0.71em">December</text>
diff --git a/test/output/aaplChangeVolume.svg b/test/output/aaplChangeVolume.svg
index d220f03b71..8de5da0360 100644
--- a/test/output/aaplChangeVolume.svg
+++ b/test/output/aaplChangeVolume.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,360.19431858593606)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">7.1</text>
@@ -70,7 +70,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">8.4</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Volume (log₁₀)</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(64.45301139559466,0)">
       <line stroke="currentColor" y2="6"></line>
       <line stroke="currentColor" y2="-350" stroke-opacity="0.1"></line><text fill="currentColor" y="9" dy="0.71em">−6</text>
diff --git a/test/output/aaplClose.svg b/test/output/aaplClose.svg
index eee6e4a057..410cb0b36f 100644
--- a/test/output/aaplClose.svg
+++ b/test/output/aaplClose.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
@@ -54,7 +54,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">180</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Close</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(114.58991228070175,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">2014</text>
     </g>
diff --git a/test/output/aaplCloseUntyped.svg b/test/output/aaplCloseUntyped.svg
index c4fb512947..c3fbfcf783 100644
--- a/test/output/aaplCloseUntyped.svg
+++ b/test/output/aaplCloseUntyped.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
@@ -54,7 +54,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">180</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Close</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(114.58991228070175,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">2014</text>
     </g>
diff --git a/test/output/aaplMonthly.svg b/test/output/aaplMonthly.svg
index 0ee551a2f0..5cdd5edb35 100644
--- a/test/output/aaplMonthly.svg
+++ b/test/output/aaplMonthly.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
     </g>
@@ -56,7 +56,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">260</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Daily trade volume (millions)</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(117.02127086698977,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">2014</text>
     </g>
diff --git a/test/output/aaplVolume.svg b/test/output/aaplVolume.svg
index 78537e9c0a..ab09cc59f2 100644
--- a/test/output/aaplVolume.svg
+++ b/test/output/aaplVolume.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
@@ -50,7 +50,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">16</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Frequency (%)</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(40.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">7.0</text>
     </g>
diff --git a/test/output/aaplVolumeRect.svg b/test/output/aaplVolumeRect.svg
index 9f167deed3..c1deac92e1 100644
--- a/test/output/aaplVolumeRect.svg
+++ b/test/output/aaplVolumeRect.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
@@ -70,7 +70,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">65</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Daily trade volume (millions)</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(60.85087719298246,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">Mar 18</text>
     </g>
diff --git a/test/output/anscombeQuartet.svg b/test/output/anscombeQuartet.svg
index 191519eccb..d35e89258a 100644
--- a/test/output/anscombeQuartet.svg
+++ b/test/output/anscombeQuartet.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="960" height="240" viewBox="0 0 960 240" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="960" height="240" viewBox="0 0 960 240" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,185.5622406639004)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">4</text>
       <path stroke="currentColor" stroke-opacity="0.1" d="M2,0h207M232,0h207M462,0h207M692,0h207"></path>
@@ -34,7 +34,7 @@
       <path stroke="currentColor" stroke-opacity="0.1" d="M2,0h207M232,0h207M462,0h207M692,0h207"></path>
     </g><text fill="currentColor" transform="translate(-40,30)" dy="-1em" text-anchor="start">↑ y</text>
   </g>
-  <g transform="translate(0,30)" fill="none" text-anchor="middle">
+  <g transform="translate(0,30)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(145.5,0)">
       <line stroke="currentColor" y2="0"></line><text fill="currentColor" y="-9" dy="0em">1</text>
     </g>
@@ -50,7 +50,7 @@
   </g>
   <g>
     <g transform="translate(42,0)">
-      <g transform="translate(0,210)" fill="none" text-anchor="middle">
+      <g transform="translate(0,210)" fill="none" text-anchor="middle" font-variant="tabular-nums">
         <g class="tick" opacity="1" transform="translate(22.96666666666667,0)">
           <line stroke="currentColor" y2="6"></line>
           <line stroke="currentColor" y2="-180" stroke-opacity="0.1"></line><text fill="currentColor" y="9" dy="0.71em">5</text>
@@ -66,7 +66,7 @@
       </g>
     </g>
     <g transform="translate(272,0)">
-      <g transform="translate(0,210)" fill="none" text-anchor="middle">
+      <g transform="translate(0,210)" fill="none" text-anchor="middle" font-variant="tabular-nums">
         <g class="tick" opacity="1" transform="translate(22.96666666666667,0)">
           <line stroke="currentColor" y2="6"></line>
           <line stroke="currentColor" y2="-180" stroke-opacity="0.1"></line><text fill="currentColor" y="9" dy="0.71em">5</text>
@@ -82,7 +82,7 @@
       </g>
     </g>
     <g transform="translate(502,0)">
-      <g transform="translate(0,210)" fill="none" text-anchor="middle">
+      <g transform="translate(0,210)" fill="none" text-anchor="middle" font-variant="tabular-nums">
         <g class="tick" opacity="1" transform="translate(22.96666666666667,0)">
           <line stroke="currentColor" y2="6"></line>
           <line stroke="currentColor" y2="-180" stroke-opacity="0.1"></line><text fill="currentColor" y="9" dy="0.71em">5</text>
@@ -98,7 +98,7 @@
       </g>
     </g>
     <g transform="translate(732,0)">
-      <g transform="translate(0,210)" fill="none" text-anchor="middle">
+      <g transform="translate(0,210)" fill="none" text-anchor="middle" font-variant="tabular-nums">
         <g class="tick" opacity="1" transform="translate(22.96666666666667,0)">
           <line stroke="currentColor" y2="6"></line>
           <line stroke="currentColor" y2="-180" stroke-opacity="0.1"></line><text fill="currentColor" y="9" dy="0.71em">5</text>
diff --git a/test/output/athletesHeightWeight.svg b/test/output/athletesHeightWeight.svg
index e577e44c0f..42ecac2e6f 100644
--- a/test/output/athletesHeightWeight.svg
+++ b/test/output/athletesHeightWeight.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="640" viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="640" viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,586.9)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">1.25</text>
@@ -94,7 +94,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">2.20</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ height</text>
   </g>
-  <g transform="translate(0,610)" fill="none" text-anchor="middle">
+  <g transform="translate(0,610)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(78.05395683453237,0)">
       <line stroke="currentColor" y2="6"></line>
       <line stroke="currentColor" y2="-590" stroke-opacity="0.1"></line><text fill="currentColor" y="9" dy="0.71em">40</text>
diff --git a/test/output/athletesHeightWeightBin.svg b/test/output/athletesHeightWeightBin.svg
index 42eb3298c7..3f06987e8b 100644
--- a/test/output/athletesHeightWeightBin.svg
+++ b/test/output/athletesHeightWeightBin.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="640" viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="640" viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,610.5)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">1.2</text>
@@ -58,7 +58,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">2.2</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ height</text>
   </g>
-  <g transform="translate(0,610)" fill="none" text-anchor="middle">
+  <g transform="translate(0,610)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(81.5,0)">
       <line stroke="currentColor" y2="6"></line>
       <line stroke="currentColor" y2="-590" stroke-opacity="0.1"></line><text fill="currentColor" y="9" dy="0.71em">40</text>
diff --git a/test/output/athletesHeightWeightBinStroke.svg b/test/output/athletesHeightWeightBinStroke.svg
index 7e37d3c9d5..69262933f1 100644
--- a/test/output/athletesHeightWeightBinStroke.svg
+++ b/test/output/athletesHeightWeightBinStroke.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="640" viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="640" viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,610.5)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">1.2</text>
@@ -58,7 +58,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">2.2</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ height</text>
   </g>
-  <g transform="translate(0,610)" fill="none" text-anchor="middle">
+  <g transform="translate(0,610)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(81.5,0)">
       <line stroke="currentColor" y2="6"></line>
       <line stroke="currentColor" y2="-590" stroke-opacity="0.1"></line><text fill="currentColor" y="9" dy="0.71em">40</text>
diff --git a/test/output/athletesHeightWeightSex.svg b/test/output/athletesHeightWeightSex.svg
index 862baa6590..a14777803f 100644
--- a/test/output/athletesHeightWeightSex.svg
+++ b/test/output/athletesHeightWeightSex.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="640" viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="640" viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,610.5)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">1.2</text>
@@ -58,7 +58,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">2.2</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ height</text>
   </g>
-  <g transform="translate(0,610)" fill="none" text-anchor="middle">
+  <g transform="translate(0,610)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(81.5,0)">
       <line stroke="currentColor" y2="6"></line>
       <line stroke="currentColor" y2="-590" stroke-opacity="0.1"></line><text fill="currentColor" y="9" dy="0.71em">40</text>
diff --git a/test/output/athletesHeightWeightSport.svg b/test/output/athletesHeightWeightSport.svg
index 1327fb6541..406c4b541a 100644
--- a/test/output/athletesHeightWeightSport.svg
+++ b/test/output/athletesHeightWeightSport.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="640" viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="640" viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,586.9)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">1.25</text>
@@ -94,7 +94,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">2.20</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ height</text>
   </g>
-  <g transform="translate(0,610)" fill="none" text-anchor="middle">
+  <g transform="translate(0,610)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(78.05395683453237,0)">
       <line stroke="currentColor" y2="6"></line>
       <line stroke="currentColor" y2="-590" stroke-opacity="0.1"></line><text fill="currentColor" y="9" dy="0.71em">40</text>
diff --git a/test/output/athletesNationality.svg b/test/output/athletesNationality.svg
index 4ecf3452d7..fab290b4d2 100644
--- a/test/output/athletesNationality.svg
+++ b/test/output/athletesNationality.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="460" viewBox="0 0 640 460" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="460" viewBox="0 0 640 460" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,35.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">USA</text>
     </g>
@@ -74,7 +74,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">COL</text>
     </g>
   </g>
-  <g transform="translate(0,430)" fill="none" text-anchor="middle">
+  <g transform="translate(0,430)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(40.5,0)">
       <line stroke="currentColor" y2="6"></line>
       <line stroke="currentColor" y2="-410" stroke-opacity="0.1"></line><text fill="currentColor" y="9" dy="0.71em">0</text>
diff --git a/test/output/athletesSexWeight.svg b/test/output/athletesSexWeight.svg
index d944071332..4f407d8e95 100644
--- a/test/output/athletesSexWeight.svg
+++ b/test/output/athletesSexWeight.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
@@ -58,7 +58,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">1,000</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Frequency</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(80.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">40</text>
     </g>
diff --git a/test/output/athletesSportSex.svg b/test/output/athletesSportSex.svg
index 66b1c13e33..a88231cc0c 100644
--- a/test/output/athletesSportSex.svg
+++ b/test/output/athletesSportSex.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="620" viewBox="0 0 640 620" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="620" viewBox="0 0 640 620" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(100,0)" fill="none" text-anchor="end">
+  <g transform="translate(100,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,35.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">boxing</text>
     </g>
@@ -98,7 +98,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">gymnastics</text>
     </g>
   </g>
-  <g transform="translate(0,590)" fill="none" text-anchor="middle">
+  <g transform="translate(0,590)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(100.5,0)">
       <line stroke="currentColor" y2="6"></line>
       <line stroke="currentColor" y2="-570" stroke-opacity="0.1"></line><text fill="currentColor" y="9" dy="0.71em">0</text>
diff --git a/test/output/athletesSportWeight.svg b/test/output/athletesSportWeight.svg
index 770f804103..4def8dc3a3 100644
--- a/test/output/athletesSportWeight.svg
+++ b/test/output/athletesSportWeight.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="620" viewBox="0 0 640 620" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="620" viewBox="0 0 640 620" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(100,0)" fill="none" text-anchor="end">
+  <g transform="translate(100,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,35.5)">
       <line stroke="currentColor" x2="0"></line><text fill="currentColor" x="-9" dy="0.32em">aquatics</text>
     </g>
@@ -98,7 +98,7 @@
       <line stroke="currentColor" x2="0"></line><text fill="currentColor" x="-9" dy="0.32em">wrestling</text>
     </g><text fill="currentColor" transform="translate(-100,305) rotate(-90)" dy="0.75em" text-anchor="middle">sport</text>
   </g>
-  <g transform="translate(0,590)" fill="none" text-anchor="middle">
+  <g transform="translate(0,590)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <path class="domain" stroke="currentColor" d="M100.5,0.5H620.5"></path>
     <g class="tick" opacity="1" transform="translate(137.11971830985914,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">40</text>
diff --git a/test/output/athletesWeight.svg b/test/output/athletesWeight.svg
index d75a4bb0c0..b471bdae26 100644
--- a/test/output/athletesWeight.svg
+++ b/test/output/athletesWeight.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
     </g>
@@ -53,7 +53,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">600</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Frequency</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(81.34507042253522,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">40</text>
     </g>
diff --git a/test/output/athletesWeightCumulative.svg b/test/output/athletesWeightCumulative.svg
index c40273fca3..4fc471b2ad 100644
--- a/test/output/athletesWeightCumulative.svg
+++ b/test/output/athletesWeightCumulative.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
     </g>
@@ -47,7 +47,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">10,000</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Frequency</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(81.34507042253522,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">40</text>
     </g>
diff --git a/test/output/availability.svg b/test/output/availability.svg
index 8e11d86d8d..849c0d04a1 100644
--- a/test/output/availability.svg
+++ b/test/output/availability.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="180" viewBox="0 0 640 180" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="180" viewBox="0 0 640 180" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,150.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
     </g>
@@ -32,7 +32,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">5</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ value</text>
   </g>
-  <g transform="translate(0,150)" fill="none" text-anchor="middle">
+  <g transform="translate(0,150)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(41.07539682539683,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">2020</text>
     </g>
diff --git a/test/output/ballotStatusRace.svg b/test/output/ballotStatusRace.svg
index 94a279cf18..24ca6b8625 100644
--- a/test/output/ballotStatusRace.svg
+++ b/test/output/ballotStatusRace.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="540" viewBox="0 0 640 540" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="540" viewBox="0 0 640 540" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(210,0)" fill="none" text-anchor="end">
+  <g transform="translate(210,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,48.5)">
       <line stroke="currentColor" x2="0"></line><text fill="currentColor" x="-9" dy="0.32em">WHITE</text>
     </g>
@@ -38,7 +38,7 @@
       <line stroke="currentColor" x2="0"></line><text fill="currentColor" x="-9" dy="0.32em">NATIVE HAWAIIAN or PACIFIC ISLANDER</text>
     </g>
   </g>
-  <g transform="translate(0,510)" fill="none" text-anchor="middle">
+  <g transform="translate(0,510)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(210.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">0</text>
       <path stroke="currentColor" stroke-opacity="0.1" d="M0,-490v56M0,-428v56M0,-366v56M0,-304v56M0,-242v56M0,-180v56M0,-118v56M0,-56v56"></path>
diff --git a/test/output/beckerBarley.svg b/test/output/beckerBarley.svg
index 6951867160..1092d7eba1 100644
--- a/test/output/beckerBarley.svg
+++ b/test/output/beckerBarley.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="800" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="800" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(550,0)" fill="none" text-anchor="start">
+  <g transform="translate(550,0)" fill="none" text-anchor="start" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,77.5)">
       <line stroke="currentColor" x2="0"></line><text fill="currentColor" x="9" dy="0.32em">Waseca</text>
     </g>
@@ -32,7 +32,7 @@
       <line stroke="currentColor" x2="0"></line><text fill="currentColor" x="9" dy="0.32em">Grand Rapids</text>
     </g><text fill="currentColor" transform="translate(90,395) rotate(-90)" dy="-0.32em" text-anchor="middle">site</text>
   </g>
-  <g transform="translate(0,770)" fill="none" text-anchor="middle">
+  <g transform="translate(0,770)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(110.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">10</text>
       <path stroke="currentColor" stroke-opacity="0.1" d="M0,-750v114M0,-623v114M0,-496v114M0,-369v114M0,-242v114M0,-115v114"></path>
@@ -64,7 +64,7 @@
   </g>
   <g>
     <g transform="translate(0,20)">
-      <g transform="translate(110,0)" fill="none" text-anchor="end">
+      <g transform="translate(110,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
         <g class="tick" opacity="1" transform="translate(0,12.5)">
           <line stroke="currentColor" x2="-6"></line>
           <line stroke="currentColor" x2="440" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">Trebi</text>
@@ -108,7 +108,7 @@
       </g>
     </g>
     <g transform="translate(0,147)">
-      <g transform="translate(110,0)" fill="none" text-anchor="end">
+      <g transform="translate(110,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
         <g class="tick" opacity="1" transform="translate(0,12.5)">
           <line stroke="currentColor" x2="-6"></line>
           <line stroke="currentColor" x2="440" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">Trebi</text>
@@ -152,7 +152,7 @@
       </g>
     </g>
     <g transform="translate(0,274)">
-      <g transform="translate(110,0)" fill="none" text-anchor="end">
+      <g transform="translate(110,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
         <g class="tick" opacity="1" transform="translate(0,12.5)">
           <line stroke="currentColor" x2="-6"></line>
           <line stroke="currentColor" x2="440" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">Trebi</text>
@@ -196,7 +196,7 @@
       </g>
     </g>
     <g transform="translate(0,401)">
-      <g transform="translate(110,0)" fill="none" text-anchor="end">
+      <g transform="translate(110,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
         <g class="tick" opacity="1" transform="translate(0,12.5)">
           <line stroke="currentColor" x2="-6"></line>
           <line stroke="currentColor" x2="440" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">Trebi</text>
@@ -240,7 +240,7 @@
       </g>
     </g>
     <g transform="translate(0,528)">
-      <g transform="translate(110,0)" fill="none" text-anchor="end">
+      <g transform="translate(110,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
         <g class="tick" opacity="1" transform="translate(0,12.5)">
           <line stroke="currentColor" x2="-6"></line>
           <line stroke="currentColor" x2="440" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">Trebi</text>
@@ -284,7 +284,7 @@
       </g>
     </g>
     <g transform="translate(0,655)">
-      <g transform="translate(110,0)" fill="none" text-anchor="end">
+      <g transform="translate(110,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
         <g class="tick" opacity="1" transform="translate(0,12.5)">
           <line stroke="currentColor" x2="-6"></line>
           <line stroke="currentColor" x2="440" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">Trebi</text>
diff --git a/test/output/caltrain.html b/test/output/caltrain.html
index db8369380e..afceb7844f 100644
--- a/test/output/caltrain.html
+++ b/test/output/caltrain.html
@@ -7,7 +7,6 @@
       .plot {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        font-variant: tabular-nums;
         margin-bottom: 0.5em;
         margin-left: 0px;
       }
@@ -32,7 +31,7 @@
         margin-right: 1em;
       }
     </style><span class="plot-swatch" style="--color: currentColor;">N</span><span class="plot-swatch" style="--color: peru;">L</span><span class="plot-swatch" style="--color: brown;">B</span>
-  </div><svg class="plot-2" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="240" height="520" viewBox="0 0 240 520" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  </div><svg class="plot-2" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="240" height="520" viewBox="0 0 240 520" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <style>
       .plot-2 {
         display: block;
diff --git a/test/output/carsMpg.svg b/test/output/carsMpg.svg
index 7fb5f47489..f9f98196e2 100644
--- a/test/output/carsMpg.svg
+++ b/test/output/carsMpg.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
@@ -54,7 +54,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">45</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ economy (mpg)</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(66.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">70</text>
     </g>
diff --git a/test/output/carsParcoords.svg b/test/output/carsParcoords.svg
index 6f52ba0409..32238164d0 100644
--- a/test/output/carsParcoords.svg
+++ b/test/output/carsParcoords.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="200" viewBox="0 0 640 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="200" viewBox="0 0 640 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(100,0)" fill="none" text-anchor="end">
+  <g transform="translate(100,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,25.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-15" dy="0.32em">economy (mpg)</text>
     </g>
diff --git a/test/output/collapsedHistogram.svg b/test/output/collapsedHistogram.svg
index 9fe2ad72d9..40d88b823f 100644
--- a/test/output/collapsedHistogram.svg
+++ b/test/output/collapsedHistogram.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">0.0</text>
     </g>
@@ -62,7 +62,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">3.0</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Frequency</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(330.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">1</text>
     </g>
diff --git a/test/output/colorLegendCategorical.html b/test/output/colorLegendCategorical.html
index 5bc39f3e2b..b937870eaa 100644
--- a/test/output/colorLegendCategorical.html
+++ b/test/output/colorLegendCategorical.html
@@ -6,7 +6,6 @@
     .plot {
       font-family: system-ui, sans-serif;
       font-size: 10px;
-      font-variant: tabular-nums;
       margin-bottom: 0.5em;
       margin-left: 0px;
     }
diff --git a/test/output/colorLegendCategoricalColumns.html b/test/output/colorLegendCategoricalColumns.html
index 13d9b09572..534ef74490 100644
--- a/test/output/colorLegendCategoricalColumns.html
+++ b/test/output/colorLegendCategoricalColumns.html
@@ -3,7 +3,6 @@
     .plot {
       font-family: system-ui, sans-serif;
       font-size: 10px;
-      font-variant: tabular-nums;
       margin-bottom: 0.5em;
       margin-left: 0px;
     }
diff --git a/test/output/colorLegendCategoricalReverse.html b/test/output/colorLegendCategoricalReverse.html
index 1d1656e5c0..35606cfcb3 100644
--- a/test/output/colorLegendCategoricalReverse.html
+++ b/test/output/colorLegendCategoricalReverse.html
@@ -6,7 +6,6 @@
     .plot {
       font-family: system-ui, sans-serif;
       font-size: 10px;
-      font-variant: tabular-nums;
       margin-bottom: 0.5em;
       margin-left: 0px;
     }
diff --git a/test/output/colorLegendCategoricalScheme.html b/test/output/colorLegendCategoricalScheme.html
index 0c8ff580b9..a5129a640e 100644
--- a/test/output/colorLegendCategoricalScheme.html
+++ b/test/output/colorLegendCategoricalScheme.html
@@ -6,7 +6,6 @@
     .plot {
       font-family: system-ui, sans-serif;
       font-size: 10px;
-      font-variant: tabular-nums;
       margin-bottom: 0.5em;
       margin-left: 0px;
     }
diff --git a/test/output/colorLegendDiverging.svg b/test/output/colorLegendDiverging.svg
index 4716bb7458..6c8ecebfbe 100644
--- a/test/output/colorLegendDiverging.svg
+++ b/test/output/colorLegendDiverging.svg
@@ -1,4 +1,4 @@
-<svg class="plot" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" font-family="system-ui, sans-serif" font-size="10" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
diff --git a/test/output/colorLegendDivergingPivot.svg b/test/output/colorLegendDivergingPivot.svg
index 0139ad93e9..98d92fe4a4 100644
--- a/test/output/colorLegendDivergingPivot.svg
+++ b/test/output/colorLegendDivergingPivot.svg
@@ -1,4 +1,4 @@
-<svg class="plot" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" font-family="system-ui, sans-serif" font-size="10" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
diff --git a/test/output/colorLegendDivergingPivotAsymmetric.svg b/test/output/colorLegendDivergingPivotAsymmetric.svg
index a700862588..ebcb03e0ea 100644
--- a/test/output/colorLegendDivergingPivotAsymmetric.svg
+++ b/test/output/colorLegendDivergingPivotAsymmetric.svg
@@ -1,4 +1,4 @@
-<svg class="plot" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" font-family="system-ui, sans-serif" font-size="10" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
diff --git a/test/output/colorLegendDivergingSqrt.svg b/test/output/colorLegendDivergingSqrt.svg
index 4ba939a562..f9a247d9a0 100644
--- a/test/output/colorLegendDivergingSqrt.svg
+++ b/test/output/colorLegendDivergingSqrt.svg
@@ -1,4 +1,4 @@
-<svg class="plot" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" font-family="system-ui, sans-serif" font-size="10" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
diff --git a/test/output/colorLegendInterpolate.svg b/test/output/colorLegendInterpolate.svg
index 43f0624a78..82088280c5 100644
--- a/test/output/colorLegendInterpolate.svg
+++ b/test/output/colorLegendInterpolate.svg
@@ -1,4 +1,4 @@
-<svg class="plot" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" font-family="system-ui, sans-serif" font-size="10" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
diff --git a/test/output/colorLegendInterpolateSqrt.svg b/test/output/colorLegendInterpolateSqrt.svg
index bcbee1dc2c..02f319057d 100644
--- a/test/output/colorLegendInterpolateSqrt.svg
+++ b/test/output/colorLegendInterpolateSqrt.svg
@@ -1,4 +1,4 @@
-<svg class="plot" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" font-family="system-ui, sans-serif" font-size="10" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
diff --git a/test/output/colorLegendLabelBoth.svg b/test/output/colorLegendLabelBoth.svg
index 1ec7a01450..4e7041602b 100644
--- a/test/output/colorLegendLabelBoth.svg
+++ b/test/output/colorLegendLabelBoth.svg
@@ -1,4 +1,4 @@
-<svg class="plot" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" font-family="system-ui, sans-serif" font-size="10" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
diff --git a/test/output/colorLegendLabelLegend.svg b/test/output/colorLegendLabelLegend.svg
index 1ec7a01450..4e7041602b 100644
--- a/test/output/colorLegendLabelLegend.svg
+++ b/test/output/colorLegendLabelLegend.svg
@@ -1,4 +1,4 @@
-<svg class="plot" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" font-family="system-ui, sans-serif" font-size="10" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
diff --git a/test/output/colorLegendLabelScale.svg b/test/output/colorLegendLabelScale.svg
index ec8eca0c82..0d7524ad3b 100644
--- a/test/output/colorLegendLabelScale.svg
+++ b/test/output/colorLegendLabelScale.svg
@@ -1,4 +1,4 @@
-<svg class="plot" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" font-family="system-ui, sans-serif" font-size="10" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
diff --git a/test/output/colorLegendLinear.svg b/test/output/colorLegendLinear.svg
index 72075720ee..905fccdb6a 100644
--- a/test/output/colorLegendLinear.svg
+++ b/test/output/colorLegendLinear.svg
@@ -1,4 +1,4 @@
-<svg class="plot" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" font-family="system-ui, sans-serif" font-size="10" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
diff --git a/test/output/colorLegendLinearTruncatedScheme.svg b/test/output/colorLegendLinearTruncatedScheme.svg
index 1da15a2948..a235415ce6 100644
--- a/test/output/colorLegendLinearTruncatedScheme.svg
+++ b/test/output/colorLegendLinearTruncatedScheme.svg
@@ -1,4 +1,4 @@
-<svg class="plot" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" font-family="system-ui, sans-serif" font-size="10" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
diff --git a/test/output/colorLegendLog.svg b/test/output/colorLegendLog.svg
index ff59cdd0a0..ae34e1fb74 100644
--- a/test/output/colorLegendLog.svg
+++ b/test/output/colorLegendLog.svg
@@ -1,4 +1,4 @@
-<svg class="plot" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" font-family="system-ui, sans-serif" font-size="10" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
diff --git a/test/output/colorLegendLogTicks.svg b/test/output/colorLegendLogTicks.svg
index 74a03d211e..e10d9a8093 100644
--- a/test/output/colorLegendLogTicks.svg
+++ b/test/output/colorLegendLogTicks.svg
@@ -1,4 +1,4 @@
-<svg class="plot" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" font-family="system-ui, sans-serif" font-size="10" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
diff --git a/test/output/colorLegendMargins.svg b/test/output/colorLegendMargins.svg
index 919a0a928b..9ea8123f47 100644
--- a/test/output/colorLegendMargins.svg
+++ b/test/output/colorLegendMargins.svg
@@ -1,4 +1,4 @@
-<svg class="plot" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" width="400" height="50" viewBox="0 0 400 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" font-family="system-ui, sans-serif" font-size="10" width="400" height="50" viewBox="0 0 400 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
diff --git a/test/output/colorLegendOrdinal.html b/test/output/colorLegendOrdinal.html
index 1640eb7835..8d2301dad0 100644
--- a/test/output/colorLegendOrdinal.html
+++ b/test/output/colorLegendOrdinal.html
@@ -6,7 +6,6 @@
     .plot {
       font-family: system-ui, sans-serif;
       font-size: 10px;
-      font-variant: tabular-nums;
       margin-bottom: 0.5em;
       margin-left: 0px;
     }
diff --git a/test/output/colorLegendOrdinalRamp.svg b/test/output/colorLegendOrdinalRamp.svg
index ff34647c90..4072e462b8 100644
--- a/test/output/colorLegendOrdinalRamp.svg
+++ b/test/output/colorLegendOrdinalRamp.svg
@@ -1,4 +1,4 @@
-<svg class="plot" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" font-family="system-ui, sans-serif" font-size="10" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
diff --git a/test/output/colorLegendOrdinalRampTickSize.svg b/test/output/colorLegendOrdinalRampTickSize.svg
index 062c577caf..c2dd064dd4 100644
--- a/test/output/colorLegendOrdinalRampTickSize.svg
+++ b/test/output/colorLegendOrdinalRampTickSize.svg
@@ -1,4 +1,4 @@
-<svg class="plot" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" width="240" height="44" viewBox="0 0 240 44" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" font-family="system-ui, sans-serif" font-size="10" width="240" height="44" viewBox="0 0 240 44" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
diff --git a/test/output/colorLegendOrdinalReverseRamp.svg b/test/output/colorLegendOrdinalReverseRamp.svg
index 281a9d8ad1..615d05110d 100644
--- a/test/output/colorLegendOrdinalReverseRamp.svg
+++ b/test/output/colorLegendOrdinalReverseRamp.svg
@@ -1,4 +1,4 @@
-<svg class="plot" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" font-family="system-ui, sans-serif" font-size="10" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
diff --git a/test/output/colorLegendOrdinalScheme.html b/test/output/colorLegendOrdinalScheme.html
index 08587d668e..47447fe885 100644
--- a/test/output/colorLegendOrdinalScheme.html
+++ b/test/output/colorLegendOrdinalScheme.html
@@ -6,7 +6,6 @@
     .plot {
       font-family: system-ui, sans-serif;
       font-size: 10px;
-      font-variant: tabular-nums;
       margin-bottom: 0.5em;
       margin-left: 0px;
     }
diff --git a/test/output/colorLegendOrdinalSchemeRamp.svg b/test/output/colorLegendOrdinalSchemeRamp.svg
index 2d56d5bb1d..11949d1986 100644
--- a/test/output/colorLegendOrdinalSchemeRamp.svg
+++ b/test/output/colorLegendOrdinalSchemeRamp.svg
@@ -1,4 +1,4 @@
-<svg class="plot" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" font-family="system-ui, sans-serif" font-size="10" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
diff --git a/test/output/colorLegendOrdinalTickFormat.html b/test/output/colorLegendOrdinalTickFormat.html
index 713ec3e01c..9f3a87aab4 100644
--- a/test/output/colorLegendOrdinalTickFormat.html
+++ b/test/output/colorLegendOrdinalTickFormat.html
@@ -6,7 +6,6 @@
     .plot {
       font-family: system-ui, sans-serif;
       font-size: 10px;
-      font-variant: tabular-nums;
       margin-bottom: 0.5em;
       margin-left: 0px;
     }
diff --git a/test/output/colorLegendOrdinalTickFormatFunction.html b/test/output/colorLegendOrdinalTickFormatFunction.html
index 713ec3e01c..9f3a87aab4 100644
--- a/test/output/colorLegendOrdinalTickFormatFunction.html
+++ b/test/output/colorLegendOrdinalTickFormatFunction.html
@@ -6,7 +6,6 @@
     .plot {
       font-family: system-ui, sans-serif;
       font-size: 10px;
-      font-variant: tabular-nums;
       margin-bottom: 0.5em;
       margin-left: 0px;
     }
diff --git a/test/output/colorLegendOrdinalTicks.svg b/test/output/colorLegendOrdinalTicks.svg
index f454cfe500..7c9c9398ff 100644
--- a/test/output/colorLegendOrdinalTicks.svg
+++ b/test/output/colorLegendOrdinalTicks.svg
@@ -1,4 +1,4 @@
-<svg class="plot" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" font-family="system-ui, sans-serif" font-size="10" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
diff --git a/test/output/colorLegendQuantile.svg b/test/output/colorLegendQuantile.svg
index 90d569a932..841e7f50ae 100644
--- a/test/output/colorLegendQuantile.svg
+++ b/test/output/colorLegendQuantile.svg
@@ -1,4 +1,4 @@
-<svg class="plot" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" font-family="system-ui, sans-serif" font-size="10" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
diff --git a/test/output/colorLegendQuantileImplicit.svg b/test/output/colorLegendQuantileImplicit.svg
index 90d569a932..841e7f50ae 100644
--- a/test/output/colorLegendQuantileImplicit.svg
+++ b/test/output/colorLegendQuantileImplicit.svg
@@ -1,4 +1,4 @@
-<svg class="plot" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" font-family="system-ui, sans-serif" font-size="10" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
diff --git a/test/output/colorLegendQuantitative.svg b/test/output/colorLegendQuantitative.svg
index 72075720ee..905fccdb6a 100644
--- a/test/output/colorLegendQuantitative.svg
+++ b/test/output/colorLegendQuantitative.svg
@@ -1,4 +1,4 @@
-<svg class="plot" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" font-family="system-ui, sans-serif" font-size="10" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
diff --git a/test/output/colorLegendQuantitativeScheme.svg b/test/output/colorLegendQuantitativeScheme.svg
index 3843168996..c28aea018f 100644
--- a/test/output/colorLegendQuantitativeScheme.svg
+++ b/test/output/colorLegendQuantitativeScheme.svg
@@ -1,4 +1,4 @@
-<svg class="plot" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" font-family="system-ui, sans-serif" font-size="10" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
diff --git a/test/output/colorLegendSqrt.svg b/test/output/colorLegendSqrt.svg
index bcbee1dc2c..02f319057d 100644
--- a/test/output/colorLegendSqrt.svg
+++ b/test/output/colorLegendSqrt.svg
@@ -1,4 +1,4 @@
-<svg class="plot" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" font-family="system-ui, sans-serif" font-size="10" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
diff --git a/test/output/colorLegendSqrtPiecewise.svg b/test/output/colorLegendSqrtPiecewise.svg
index 30468ccef7..6639b02c10 100644
--- a/test/output/colorLegendSqrtPiecewise.svg
+++ b/test/output/colorLegendSqrtPiecewise.svg
@@ -1,4 +1,4 @@
-<svg class="plot" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" font-family="system-ui, sans-serif" font-size="10" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
diff --git a/test/output/colorLegendThreshold.svg b/test/output/colorLegendThreshold.svg
index 12dbd4dc65..498d5ecc0c 100644
--- a/test/output/colorLegendThreshold.svg
+++ b/test/output/colorLegendThreshold.svg
@@ -1,4 +1,4 @@
-<svg class="plot" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" font-family="system-ui, sans-serif" font-size="10" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
diff --git a/test/output/colorLegendThresholdTickSize.svg b/test/output/colorLegendThresholdTickSize.svg
index f20b7a5dcd..d6880b06ae 100644
--- a/test/output/colorLegendThresholdTickSize.svg
+++ b/test/output/colorLegendThresholdTickSize.svg
@@ -1,4 +1,4 @@
-<svg class="plot" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" width="240" height="44" viewBox="0 0 240 44" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" font-family="system-ui, sans-serif" font-size="10" width="240" height="44" viewBox="0 0 240 44" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
diff --git a/test/output/covidIhmeProjectedDeaths.svg b/test/output/covidIhmeProjectedDeaths.svg
index b414abcca3..5bd8ebf384 100644
--- a/test/output/covidIhmeProjectedDeaths.svg
+++ b/test/output/covidIhmeProjectedDeaths.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="960" height="600" viewBox="0 0 960 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="960" height="600" viewBox="0 0 960 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,570.5)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="900" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">1</text>
@@ -138,7 +138,7 @@
       <line stroke="currentColor" x2="900" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">4,000</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Deaths per day to COVID-19 (projected)</text>
   </g>
-  <g transform="translate(0,570)" fill="none" text-anchor="middle">
+  <g transform="translate(0,570)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(66.21428571428571,0)">
       <line stroke="currentColor" y2="6"></line>
       <line stroke="currentColor" y2="-550" stroke-opacity="0.1"></line><text fill="currentColor" y="9" dy="0.71em">March</text>
diff --git a/test/output/crimeanWarOverlapped.svg b/test/output/crimeanWarOverlapped.svg
index 764cdece51..51a6e63ff4 100644
--- a/test/output/crimeanWarOverlapped.svg
+++ b/test/output/crimeanWarOverlapped.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
     </g>
@@ -56,7 +56,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">2,600</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ deaths</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(54.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">Apr</text>
     </g>
diff --git a/test/output/crimeanWarStacked.svg b/test/output/crimeanWarStacked.svg
index b91256af6e..cea238f853 100644
--- a/test/output/crimeanWarStacked.svg
+++ b/test/output/crimeanWarStacked.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
     </g>
@@ -35,7 +35,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">3,000</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ deaths</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(54.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">Apr</text>
     </g>
diff --git a/test/output/d3Survey2015Comfort.svg b/test/output/d3Survey2015Comfort.svg
index 88c81512f1..3736f602a0 100644
--- a/test/output/d3Survey2015Comfort.svg
+++ b/test/output/d3Survey2015Comfort.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="960" height="150" viewBox="0 0 960 150" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="960" height="150" viewBox="0 0 960 150" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(300,0)" fill="none" text-anchor="end">
+  <g transform="translate(300,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,40.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">I looked at some examples!</text>
     </g>
@@ -29,7 +29,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em"></text>
     </g><text fill="currentColor" transform="translate(-300,30)" dy="-1em" text-anchor="start">How comfortable are you with d3 now?</text>
   </g>
-  <g transform="translate(0,30)" fill="none" text-anchor="middle">
+  <g transform="translate(0,30)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(300.5,0)">
       <line stroke="currentColor" y2="-6"></line>
       <line stroke="currentColor" y2="100" stroke-opacity="0.1"></line><text fill="currentColor" y="-9" dy="0em">0</text>
diff --git a/test/output/d3Survey2015Why.svg b/test/output/d3Survey2015Why.svg
index 10f558410a..d619be719b 100644
--- a/test/output/d3Survey2015Why.svg
+++ b/test/output/d3Survey2015Why.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="960" height="350" viewBox="0 0 960 350" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="960" height="350" viewBox="0 0 960 350" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(300,0)" fill="none" text-anchor="end">
+  <g transform="translate(300,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,40.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">For work</text>
     </g>
@@ -59,7 +59,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">to work with open data</text>
     </g><text fill="currentColor" transform="translate(-300,30)" dy="-1em" text-anchor="start">Why do you want to learn d3?</text>
   </g>
-  <g transform="translate(0,30)" fill="none" text-anchor="middle">
+  <g transform="translate(0,30)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(300.5,0)">
       <line stroke="currentColor" y2="-6"></line>
       <line stroke="currentColor" y2="300" stroke-opacity="0.1"></line><text fill="currentColor" y="-9" dy="0em">0</text>
diff --git a/test/output/diamondsCaratPrice.svg b/test/output/diamondsCaratPrice.svg
index 180950344f..2888cf8641 100644
--- a/test/output/diamondsCaratPrice.svg
+++ b/test/output/diamondsCaratPrice.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="640" viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="640" viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,585.3936170212767)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">1,000</text>
     </g>
@@ -71,7 +71,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">19,000</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ price</text>
   </g>
-  <g transform="translate(0,610)" fill="none" text-anchor="middle">
+  <g transform="translate(0,610)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(76.37628865979381,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">0.5</text>
     </g>
diff --git a/test/output/diamondsCaratPriceDots.svg b/test/output/diamondsCaratPriceDots.svg
index 39c784dc48..7bd3539feb 100644
--- a/test/output/diamondsCaratPriceDots.svg
+++ b/test/output/diamondsCaratPriceDots.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="640" viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="640" viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,588.2956989247313)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">1,000</text>
@@ -86,7 +86,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">18,000</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Price ($)</text>
   </g>
-  <g transform="translate(0,610)" fill="none" text-anchor="middle">
+  <g transform="translate(0,610)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(73.72916666666666,0)">
       <line stroke="currentColor" y2="6"></line>
       <line stroke="currentColor" y2="-590" stroke-opacity="0.1"></line><text fill="currentColor" y="9" dy="0.71em">0.5</text>
diff --git a/test/output/empty.svg b/test/output/empty.svg
index 0d6fd22680..fb8758cf14 100644
--- a/test/output/empty.svg
+++ b/test/output/empty.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,364.5)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">0.0</text>
@@ -58,7 +58,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">1.0</text>
     </g>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(46.5,0)">
       <line stroke="currentColor" y2="6"></line>
       <line stroke="currentColor" y2="-350" stroke-opacity="0.1"></line><text fill="currentColor" y="9" dy="0.71em">0.0</text>
diff --git a/test/output/emptyX.svg b/test/output/emptyX.svg
index 085a20038f..b0d0fe0bef 100644
--- a/test/output/emptyX.svg
+++ b/test/output/emptyX.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
diff --git a/test/output/figcaption.html b/test/output/figcaption.html
index 1934366756..a892e0eb2e 100644
--- a/test/output/figcaption.html
+++ b/test/output/figcaption.html
@@ -1,4 +1,4 @@
-<figure style="max-width: initial;"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<figure style="max-width: initial;"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <style>
       .plot {
         display: block;
@@ -12,7 +12,7 @@
         white-space: pre;
       }
     </style>
-    <g transform="translate(40,0)" fill="none" text-anchor="end">
+    <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
       <g class="tick" opacity="1" transform="translate(0,370.5)">
         <line stroke="currentColor" x2="-6"></line>
         <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
@@ -66,7 +66,7 @@
         <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">12</text>
       </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Frequency (%)</text>
     </g>
-    <g transform="translate(0,370)" fill="none" text-anchor="middle">
+    <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
       <g class="tick" opacity="1" transform="translate(55.5,0)">
         <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">A</text>
       </g>
diff --git a/test/output/figcaptionHtml.html b/test/output/figcaptionHtml.html
index ef363970ca..f63b117392 100644
--- a/test/output/figcaptionHtml.html
+++ b/test/output/figcaptionHtml.html
@@ -1,4 +1,4 @@
-<figure style="max-width: initial;"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<figure style="max-width: initial;"><svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <style>
       .plot {
         display: block;
@@ -12,7 +12,7 @@
         white-space: pre;
       }
     </style>
-    <g transform="translate(40,0)" fill="none" text-anchor="end">
+    <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
       <g class="tick" opacity="1" transform="translate(0,370.5)">
         <line stroke="currentColor" x2="-6"></line>
         <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
@@ -66,7 +66,7 @@
         <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">12</text>
       </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Frequency (%)</text>
     </g>
-    <g transform="translate(0,370)" fill="none" text-anchor="middle">
+    <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
       <g class="tick" opacity="1" transform="translate(55.5,0)">
         <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">A</text>
       </g>
diff --git a/test/output/firstLadies.svg b/test/output/firstLadies.svg
index 19afb3fffb..7d2f7f0637 100644
--- a/test/output/firstLadies.svg
+++ b/test/output/firstLadies.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="960" height="1120" viewBox="0 0 960 1120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="960" height="1120" viewBox="0 0 960 1120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(0,30)" fill="none" text-anchor="middle">
+  <g transform="translate(0,30)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(44.6765999414857,0)">
       <line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">1740</text>
     </g>
diff --git a/test/output/footballCoverage.svg b/test/output/footballCoverage.svg
index 5532b73adf..6e65a6f1fe 100644
--- a/test/output/footballCoverage.svg
+++ b/test/output/footballCoverage.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="430" viewBox="0 0 640 430" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="430" viewBox="0 0 640 430" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,400.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">0%</text>
       <path stroke="currentColor" stroke-opacity="0.1" d="M0,0h76M84,0h76M168,0h76M252,0h76M336,0h76M420,0h76M504,0h76"></path>
@@ -58,7 +58,7 @@
       <path stroke="currentColor" stroke-opacity="0.1" d="M0,0h76M84,0h76M168,0h76M252,0h76M336,0h76M420,0h76M504,0h76"></path>
     </g>
   </g>
-  <g transform="translate(0,400)" fill="none" text-anchor="middle">
+  <g transform="translate(0,400)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(78.5,0)">
       <line stroke="currentColor" y2="0"></line><text fill="currentColor" y="9" dy="0.71em">C2</text>
     </g>
diff --git a/test/output/fruitSales.svg b/test/output/fruitSales.svg
index 15d0bf57d5..55ad228425 100644
--- a/test/output/fruitSales.svg
+++ b/test/output/fruitSales.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="140" viewBox="0 0 640 140" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="140" viewBox="0 0 640 140" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(50,0)" fill="none" text-anchor="end">
+  <g transform="translate(50,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,33.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">bananas</text>
     </g>
@@ -26,7 +26,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">apples</text>
     </g>
   </g>
-  <g transform="translate(0,110)" fill="none" text-anchor="middle">
+  <g transform="translate(0,110)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(50.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">0</text>
     </g>
diff --git a/test/output/fruitSalesDate.svg b/test/output/fruitSalesDate.svg
index d0048187c7..0c7272ef86 100644
--- a/test/output/fruitSalesDate.svg
+++ b/test/output/fruitSalesDate.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
     </g>
@@ -35,7 +35,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">30</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ units</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(192.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">2021-03-15</text>
     </g>
diff --git a/test/output/gistempAnomaly.svg b/test/output/gistempAnomaly.svg
index 990236a38a..8045a47714 100644
--- a/test/output/gistempAnomaly.svg
+++ b/test/output/gistempAnomaly.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,340.9225352112676)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">−0.6</text>
@@ -54,7 +54,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">+1.2</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Temperature anomaly (°C)</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(40.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">1880</text>
     </g>
diff --git a/test/output/gistempAnomalyMoving.svg b/test/output/gistempAnomalyMoving.svg
index 54a990b361..dd5fa2347d 100644
--- a/test/output/gistempAnomalyMoving.svg
+++ b/test/output/gistempAnomalyMoving.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,340.9225352112676)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">−0.6</text>
@@ -54,7 +54,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">+1.2</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Temperature anomaly (°C)</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(40.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">1880</text>
     </g>
diff --git a/test/output/gistempAnomalyTransform.svg b/test/output/gistempAnomalyTransform.svg
index b5504e3e44..d92151dace 100644
--- a/test/output/gistempAnomalyTransform.svg
+++ b/test/output/gistempAnomalyTransform.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,333.6194574856547)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">−1.0</text>
@@ -42,7 +42,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">+2.0</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Temperature anomaly (°F)</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(40.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">1880</text>
     </g>
diff --git a/test/output/googleTrendsRidgeline.svg b/test/output/googleTrendsRidgeline.svg
index 6215c9597d..8444605d61 100644
--- a/test/output/googleTrendsRidgeline.svg
+++ b/test/output/googleTrendsRidgeline.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="960" height="1260" viewBox="0 0 960 1260" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="960" height="1260" viewBox="0 0 960 1260" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(160,0)" fill="none" text-anchor="end">
+  <g transform="translate(160,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,68.5)">
       <line stroke="currentColor" x2="0"></line><text fill="currentColor" x="-9" dy="0.32em">Australian bushfires</text>
     </g>
@@ -206,7 +206,7 @@
       <line stroke="currentColor" x2="0"></line><text fill="currentColor" x="-9" dy="0.32em">COVID-19 vaccine</text>
     </g>
   </g>
-  <g transform="translate(0,30)" fill="none" text-anchor="middle">
+  <g transform="translate(0,30)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(166.92857142857144,0)">
       <line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">2020</text>
     </g>
diff --git a/test/output/gridChoropleth.svg b/test/output/gridChoropleth.svg
index cb4540b360..0a5b1f8837 100644
--- a/test/output/gridChoropleth.svg
+++ b/test/output/gridChoropleth.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="420" viewBox="0 0 640 420" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="420" viewBox="0 0 640 420" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
diff --git a/test/output/hadcrutWarmingStripes.svg b/test/output/hadcrutWarmingStripes.svg
index 9186b35a3d..b3cee4841e 100644
--- a/test/output/hadcrutWarmingStripes.svg
+++ b/test/output/hadcrutWarmingStripes.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(0,30)" fill="none" text-anchor="middle">
+  <g transform="translate(0,30)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(55.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">1860</text>
     </g>
diff --git a/test/output/highCardinalityOrdinal.svg b/test/output/highCardinalityOrdinal.svg
index c68e342ea2..d83df73255 100644
--- a/test/output/highCardinalityOrdinal.svg
+++ b/test/output/highCardinalityOrdinal.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(0,30)" fill="none" text-anchor="middle">
+  <g transform="translate(0,30)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(45.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">0</text>
     </g>
diff --git a/test/output/identityScale.svg b/test/output/identityScale.svg
index 987c02218e..4b7ebabdf2 100644
--- a/test/output/identityScale.svg
+++ b/test/output/identityScale.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,350.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">350</text>
     </g>
@@ -35,7 +35,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">50</text>
     </g>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(100.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">100</text>
     </g>
diff --git a/test/output/industryUnemployment.svg b/test/output/industryUnemployment.svg
index b022feb601..f82b9fd7d0 100644
--- a/test/output/industryUnemployment.svg
+++ b/test/output/industryUnemployment.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
@@ -46,7 +46,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">14,000</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ unemployed</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(40.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">2000</text>
     </g>
diff --git a/test/output/industryUnemploymentShare.svg b/test/output/industryUnemploymentShare.svg
index fc0c732a9d..982a97f99c 100644
--- a/test/output/industryUnemploymentShare.svg
+++ b/test/output/industryUnemploymentShare.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">0%</text>
@@ -58,7 +58,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">100%</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ unemployed</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(40.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">2000</text>
     </g>
diff --git a/test/output/industryUnemploymentStream.svg b/test/output/industryUnemploymentStream.svg
index dfb92fa9f0..407637bb01 100644
--- a/test/output/industryUnemploymentStream.svg
+++ b/test/output/industryUnemploymentStream.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
     </g>
@@ -38,7 +38,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">14,000</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ unemployed</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(40.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">2000</text>
     </g>
diff --git a/test/output/learningPoverty.svg b/test/output/learningPoverty.svg
index 356f95b8ab..d15c1ccab9 100644
--- a/test/output/learningPoverty.svg
+++ b/test/output/learningPoverty.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="1160" viewBox="0 0 640 1160" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="1160" viewBox="0 0 640 1160" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(120,0)" fill="none" text-anchor="end">
+  <g transform="translate(120,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,41.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">Niger</text>
     </g>
@@ -314,7 +314,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">Netherlands</text>
     </g>
   </g>
-  <g transform="translate(0,30)" fill="none" text-anchor="middle">
+  <g transform="translate(0,30)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(120.5,0)">
       <line stroke="currentColor" y2="-6"></line>
       <line stroke="currentColor" y2="1110" stroke-opacity="0.1"></line><text fill="currentColor" y="-9" dy="0em">100%</text>
diff --git a/test/output/letterFrequencyBar.svg b/test/output/letterFrequencyBar.svg
index 22f9b9d58a..7b9558caca 100644
--- a/test/output/letterFrequencyBar.svg
+++ b/test/output/letterFrequencyBar.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="580" viewBox="0 0 640 580" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="580" viewBox="0 0 640 580" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,35.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">Z</text>
     </g>
@@ -92,7 +92,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">E</text>
     </g>
   </g>
-  <g transform="translate(0,550)" fill="none" text-anchor="middle">
+  <g transform="translate(0,550)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(40.5,0)">
       <line stroke="currentColor" y2="6"></line>
       <line stroke="currentColor" y2="-530" stroke-opacity="0.1"></line><text fill="currentColor" y="9" dy="0.71em">0</text>
diff --git a/test/output/letterFrequencyCloud.svg b/test/output/letterFrequencyCloud.svg
index 54c27a461f..9bd78fc46f 100644
--- a/test/output/letterFrequencyCloud.svg
+++ b/test/output/letterFrequencyCloud.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
diff --git a/test/output/letterFrequencyColumn.svg b/test/output/letterFrequencyColumn.svg
index b75992a23b..06ab1f3741 100644
--- a/test/output/letterFrequencyColumn.svg
+++ b/test/output/letterFrequencyColumn.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
@@ -66,7 +66,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">12</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Frequency (%)</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(55.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">A</text>
     </g>
diff --git a/test/output/letterFrequencyDot.svg b/test/output/letterFrequencyDot.svg
index a812015761..2e7144fc69 100644
--- a/test/output/letterFrequencyDot.svg
+++ b/test/output/letterFrequencyDot.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(0,30)" fill="none" text-anchor="middle">
+  <g transform="translate(0,30)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(33.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">A</text>
     </g>
diff --git a/test/output/letterFrequencyLollipop.svg b/test/output/letterFrequencyLollipop.svg
index e406465630..43f795d5e2 100644
--- a/test/output/letterFrequencyLollipop.svg
+++ b/test/output/letterFrequencyLollipop.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">0.00</text>
@@ -66,7 +66,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">0.12</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ frequency</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(55.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">A</text>
     </g>
diff --git a/test/output/logDegenerate.svg b/test/output/logDegenerate.svg
index 6f4318b7d0..ef5876e1f7 100644
--- a/test/output/logDegenerate.svg
+++ b/test/output/logDegenerate.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(0,30)" fill="none" text-anchor="middle">
+  <g transform="translate(0,30)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(20.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">100m</text>
     </g>
diff --git a/test/output/metroInequality.svg b/test/output/metroInequality.svg
index 64cd65510c..55e7872a8e 100644
--- a/test/output/metroInequality.svg
+++ b/test/output/metroInequality.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,346.15217391304344)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">3.4</text>
@@ -62,7 +62,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">5.6</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Inequality</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(127.3781294704236,0)">
       <line stroke="currentColor" y2="6"></line>
       <line stroke="currentColor" y2="-350" stroke-opacity="0.1"></line><text fill="currentColor" y="9" dy="0.71em">200k</text>
diff --git a/test/output/metroInequalityChange.svg b/test/output/metroInequalityChange.svg
index 5887dcfb94..7b414bec03 100644
--- a/test/output/metroInequalityChange.svg
+++ b/test/output/metroInequalityChange.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,348.2777777777777)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">3.5</text>
@@ -58,7 +58,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">8.5</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Inequality</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(122.85098938270542,0)">
       <line stroke="currentColor" y2="6"></line>
       <line stroke="currentColor" y2="-350" stroke-opacity="0.1"></line><text fill="currentColor" y="9" dy="0.71em">200k</text>
diff --git a/test/output/metroUnemployment.svg b/test/output/metroUnemployment.svg
index 1f4c74d76f..85ac672345 100644
--- a/test/output/metroUnemployment.svg
+++ b/test/output/metroUnemployment.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
     </g>
@@ -41,7 +41,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">16</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ unemployment</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(40.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">2000</text>
     </g>
diff --git a/test/output/metroUnemploymentHighlight.svg b/test/output/metroUnemploymentHighlight.svg
index 93816e0867..d881a80c91 100644
--- a/test/output/metroUnemploymentHighlight.svg
+++ b/test/output/metroUnemploymentHighlight.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
@@ -50,7 +50,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">16</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Unemployment (%)</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(40.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">2000</text>
     </g>
diff --git a/test/output/metroUnemploymentIndex.svg b/test/output/metroUnemploymentIndex.svg
index 99d4812bd7..3af5af5069 100644
--- a/test/output/metroUnemploymentIndex.svg
+++ b/test/output/metroUnemploymentIndex.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,325.8691275167786)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">4</text>
     </g>
@@ -35,7 +35,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">16</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ unemployment</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(40.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">0</text>
     </g>
diff --git a/test/output/metroUnemploymentMoving.svg b/test/output/metroUnemploymentMoving.svg
index 2089f6ec8c..3aaa3b0d62 100644
--- a/test/output/metroUnemploymentMoving.svg
+++ b/test/output/metroUnemploymentMoving.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
     </g>
@@ -41,7 +41,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">16</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ unemployment</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(40.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">2000</text>
     </g>
diff --git a/test/output/metroUnemploymentNormalize.svg b/test/output/metroUnemploymentNormalize.svg
index 67ceeab607..eab9cd8301 100644
--- a/test/output/metroUnemploymentNormalize.svg
+++ b/test/output/metroUnemploymentNormalize.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,350.31606670681725)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">0.8×</text>
@@ -42,7 +42,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">5×</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Change in unemployment (%)</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(40.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">2000</text>
     </g>
diff --git a/test/output/metroUnemploymentRidgeline.svg b/test/output/metroUnemploymentRidgeline.svg
index d6131acf22..9d5be23bbb 100644
--- a/test/output/metroUnemploymentRidgeline.svg
+++ b/test/output/metroUnemploymentRidgeline.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="960" height="1080" viewBox="0 0 960 1080" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="960" height="1080" viewBox="0 0 960 1080" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(300,0)" fill="none" text-anchor="end">
+  <g transform="translate(300,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,51.5)">
       <line stroke="currentColor" x2="0"></line><text fill="currentColor" x="-9" dy="0.32em">Detroit-Livonia-Dearborn, MI Met Div</text>
     </g>
@@ -149,7 +149,7 @@
       <line stroke="currentColor" x2="0"></line><text fill="currentColor" x="-9" dy="0.32em">Bethesda-Rockville-Frederick, MD Met Div</text>
     </g>
   </g>
-  <g transform="translate(0,1050)" fill="none" text-anchor="middle">
+  <g transform="translate(0,1050)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(300.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">2000</text>
     </g>
diff --git a/test/output/metroUnemploymentStroke.svg b/test/output/metroUnemploymentStroke.svg
index 9fbdeab781..7af3583a07 100644
--- a/test/output/metroUnemploymentStroke.svg
+++ b/test/output/metroUnemploymentStroke.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
     </g>
@@ -41,7 +41,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">16</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ unemployment</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(40.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">2000</text>
     </g>
diff --git a/test/output/mobyDickFaceted.svg b/test/output/mobyDickFaceted.svg
index aa5780bfe0..8f6bfe720d 100644
--- a/test/output/mobyDickFaceted.svg
+++ b/test/output/mobyDickFaceted.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="430" viewBox="0 0 640 430" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="430" viewBox="0 0 640 430" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(600,0)" fill="none" text-anchor="start">
+  <g transform="translate(600,0)" fill="none" text-anchor="start" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,118.5)">
       <line stroke="currentColor" x2="0"></line><text fill="currentColor" x="9" dy="0.32em">lower</text>
     </g>
@@ -20,7 +20,7 @@
       <line stroke="currentColor" x2="0"></line><text fill="currentColor" x="9" dy="0.32em">upper</text>
     </g>
   </g>
-  <g transform="translate(0,30)" fill="none" text-anchor="middle">
+  <g transform="translate(0,30)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(173.5,0)">
       <line stroke="currentColor" y2="0"></line><text fill="currentColor" y="-9" dy="0em"></text>
     </g>
@@ -30,7 +30,7 @@
   </g>
   <g>
     <g transform="translate(0,31)">
-      <g transform="translate(40,0)" fill="none" text-anchor="end">
+      <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
         <g class="tick" opacity="1" transform="translate(0,175.5)">
           <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
           <path stroke="currentColor" stroke-opacity="0.1" d="M1,0h265M295,0h265"></path>
@@ -62,7 +62,7 @@
       </g>
     </g>
     <g transform="translate(0,225)">
-      <g transform="translate(40,0)" fill="none" text-anchor="end">
+      <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
         <g class="tick" opacity="1" transform="translate(0,175.5)">
           <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
           <path stroke="currentColor" stroke-opacity="0.1" d="M1,0h265M295,0h265"></path>
@@ -94,7 +94,7 @@
       </g>
     </g>
     <g transform="translate(41,0)">
-      <g transform="translate(0,400)" fill="none" text-anchor="middle">
+      <g transform="translate(0,400)" fill="none" text-anchor="middle" font-variant="tabular-nums">
         <g class="tick" opacity="1" transform="translate(7.5,0)">
           <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">A</text>
         </g>
@@ -176,7 +176,7 @@
       </g>
     </g>
     <g transform="translate(335,0)">
-      <g transform="translate(0,400)" fill="none" text-anchor="middle">
+      <g transform="translate(0,400)" fill="none" text-anchor="middle" font-variant="tabular-nums">
         <g class="tick" opacity="1" transform="translate(7.5,0)">
           <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">A</text>
         </g>
diff --git a/test/output/mobyDickLetterFrequency.svg b/test/output/mobyDickLetterFrequency.svg
index 8afd29c6a8..77245ded4f 100644
--- a/test/output/mobyDickLetterFrequency.svg
+++ b/test/output/mobyDickLetterFrequency.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
@@ -66,7 +66,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">1,200</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Frequency</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(55.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">A</text>
     </g>
diff --git a/test/output/mobyDickLetterPairs.svg b/test/output/mobyDickLetterPairs.svg
index bc24f7013e..57fead52db 100644
--- a/test/output/mobyDickLetterPairs.svg
+++ b/test/output/mobyDickLetterPairs.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="600" viewBox="0 0 640 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="600" viewBox="0 0 640 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,40.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">*</text>
     </g>
diff --git a/test/output/mobyDickLetterPosition.svg b/test/output/mobyDickLetterPosition.svg
index 278b11a11e..a876f2a370 100644
--- a/test/output/mobyDickLetterPosition.svg
+++ b/test/output/mobyDickLetterPosition.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="640" viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="640" viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,41.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">A</text>
     </g>
@@ -92,7 +92,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">Z</text>
     </g>
   </g>
-  <g transform="translate(0,30)" fill="none" text-anchor="middle">
+  <g transform="translate(0,30)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(60.5,0)">
       <line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">0</text>
     </g>
diff --git a/test/output/mobyDickLetterRelativeFrequency.svg b/test/output/mobyDickLetterRelativeFrequency.svg
index b74550f03b..4eb5c04bd9 100644
--- a/test/output/mobyDickLetterRelativeFrequency.svg
+++ b/test/output/mobyDickLetterRelativeFrequency.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
@@ -66,7 +66,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">12</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Frequency (%)</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(55.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">A</text>
     </g>
diff --git a/test/output/morleyBoxplot.svg b/test/output/morleyBoxplot.svg
index 9bc03f7b6a..e449a4928e 100644
--- a/test/output/morleyBoxplot.svg
+++ b/test/output/morleyBoxplot.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="160" viewBox="0 0 640 160" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="160" viewBox="0 0 640 160" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,33.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">1</text>
     </g>
@@ -29,7 +29,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">5</text>
     </g><text fill="currentColor" transform="translate(-40,75) rotate(-90)" dy="0.75em" text-anchor="middle">Expt</text>
   </g>
-  <g transform="translate(0,130)" fill="none" text-anchor="middle">
+  <g transform="translate(0,130)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(84.36666666666667,0)">
       <line stroke="currentColor" y2="6"></line>
       <line stroke="currentColor" y2="-110" stroke-opacity="0.1"></line><text fill="currentColor" y="9" dy="0.71em">650</text>
diff --git a/test/output/moviesProfitByGenre.svg b/test/output/moviesProfitByGenre.svg
index 4c5470692e..8853617d22 100644
--- a/test/output/moviesProfitByGenre.svg
+++ b/test/output/moviesProfitByGenre.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="320" viewBox="0 0 640 320" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="320" viewBox="0 0 640 320" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(120,0)" fill="none" text-anchor="end">
+  <g transform="translate(120,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,35.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">Adventure</text>
     </g>
@@ -53,7 +53,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">Other</text>
     </g>
   </g>
-  <g transform="translate(0,290)" fill="none" text-anchor="middle">
+  <g transform="translate(0,290)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(182.641592920354,0)">
       <line stroke="currentColor" y2="6"></line>
       <line stroke="currentColor" y2="-270" stroke-opacity="0.1"></line><text fill="currentColor" y="9" dy="0.71em">0</text>
diff --git a/test/output/musicRevenue.svg b/test/output/musicRevenue.svg
index 2f1ba05678..465a3625a3 100644
--- a/test/output/musicRevenue.svg
+++ b/test/output/musicRevenue.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
@@ -62,7 +62,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">22</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Annual revenue (billions, adj.)</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(65.70088089994643,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">1975</text>
     </g>
diff --git a/test/output/opacityLegend.svg b/test/output/opacityLegend.svg
index 3b26c8aae6..b1d687a06d 100644
--- a/test/output/opacityLegend.svg
+++ b/test/output/opacityLegend.svg
@@ -1,4 +1,4 @@
-<svg class="plot" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" font-family="system-ui, sans-serif" font-size="10" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
diff --git a/test/output/opacityLegendColor.svg b/test/output/opacityLegendColor.svg
index e14b6d2c0a..60fb77723c 100644
--- a/test/output/opacityLegendColor.svg
+++ b/test/output/opacityLegendColor.svg
@@ -1,4 +1,4 @@
-<svg class="plot" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" font-family="system-ui, sans-serif" font-size="10" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
diff --git a/test/output/opacityLegendLinear.svg b/test/output/opacityLegendLinear.svg
index 48096cc4a2..3cddc5f6e0 100644
--- a/test/output/opacityLegendLinear.svg
+++ b/test/output/opacityLegendLinear.svg
@@ -1,4 +1,4 @@
-<svg class="plot" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" font-family="system-ui, sans-serif" font-size="10" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
diff --git a/test/output/opacityLegendLog.svg b/test/output/opacityLegendLog.svg
index 268e96fe41..5cd768520a 100644
--- a/test/output/opacityLegendLog.svg
+++ b/test/output/opacityLegendLog.svg
@@ -1,4 +1,4 @@
-<svg class="plot" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" font-family="system-ui, sans-serif" font-size="10" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
diff --git a/test/output/opacityLegendRange.svg b/test/output/opacityLegendRange.svg
index 8be2684365..1da56374cb 100644
--- a/test/output/opacityLegendRange.svg
+++ b/test/output/opacityLegendRange.svg
@@ -1,4 +1,4 @@
-<svg class="plot" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" font-family="system-ui, sans-serif" font-size="10" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
diff --git a/test/output/opacityLegendSqrt.svg b/test/output/opacityLegendSqrt.svg
index 0517968c76..a52cdf0357 100644
--- a/test/output/opacityLegendSqrt.svg
+++ b/test/output/opacityLegendSqrt.svg
@@ -1,4 +1,4 @@
-<svg class="plot" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" font-family="system-ui, sans-serif" font-size="10" width="240" height="50" viewBox="0 0 240 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
diff --git a/test/output/ordinalBar.svg b/test/output/ordinalBar.svg
index 116701e7f2..01d1ca7b02 100644
--- a/test/output/ordinalBar.svg
+++ b/test/output/ordinalBar.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="200" viewBox="0 0 640 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="200" viewBox="0 0 640 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,32.5)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
@@ -42,7 +42,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">F</text>
     </g>
   </g>
-  <g transform="translate(0,170)" fill="none" text-anchor="middle">
+  <g transform="translate(0,170)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(93.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">0</text>
     </g>
diff --git a/test/output/penguinCulmen.svg b/test/output/penguinCulmen.svg
index a271a69343..f1126d655d 100644
--- a/test/output/penguinCulmen.svg
+++ b/test/output/penguinCulmen.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="600" viewBox="0 0 640 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="600" viewBox="0 0 640 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(560,0)" fill="none" text-anchor="start">
+  <g transform="translate(560,0)" fill="none" text-anchor="start" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,113.5)">
       <line stroke="currentColor" x2="0"></line><text fill="currentColor" x="9" dy="0.32em">Adelie</text>
     </g>
@@ -23,7 +23,7 @@
       <line stroke="currentColor" x2="0"></line><text fill="currentColor" x="9" dy="0.32em">Gentoo</text>
     </g><text fill="currentColor" transform="translate(80,300) rotate(-90)" dy="-0.32em" text-anchor="middle">species</text>
   </g>
-  <g transform="translate(0,30)" fill="none" text-anchor="middle">
+  <g transform="translate(0,30)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(120.5,0)">
       <line stroke="currentColor" y2="0"></line><text fill="currentColor" y="-9" dy="0em">FEMALE</text>
     </g>
@@ -36,7 +36,7 @@
   </g>
   <g>
     <g transform="translate(0,30)">
-      <g transform="translate(40,0)" fill="none" text-anchor="end">
+      <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
         <g class="tick" opacity="1" transform="translate(0,149.88909090909092)">
           <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">35</text>
           <path stroke="currentColor" stroke-opacity="0.1" d="M0,0h161M179,0h161M358,0h161"></path>
@@ -60,7 +60,7 @@
       </g>
     </g>
     <g transform="translate(0,216)">
-      <g transform="translate(40,0)" fill="none" text-anchor="end">
+      <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
         <g class="tick" opacity="1" transform="translate(0,149.88909090909092)">
           <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">35</text>
           <path stroke="currentColor" stroke-opacity="0.1" d="M0,0h161M179,0h161"></path>
@@ -84,7 +84,7 @@
       </g>
     </g>
     <g transform="translate(0,402)">
-      <g transform="translate(40,0)" fill="none" text-anchor="end">
+      <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
         <g class="tick" opacity="1" transform="translate(0,149.88909090909092)">
           <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">35</text>
           <path stroke="currentColor" stroke-opacity="0.1" d="M0,0h161M179,0h161M358,0h161"></path>
@@ -108,7 +108,7 @@
       </g>
     </g>
     <g transform="translate(40,0)">
-      <g transform="translate(0,570)" fill="none" text-anchor="middle">
+      <g transform="translate(0,570)" fill="none" text-anchor="middle" font-variant="tabular-nums">
         <g class="tick" opacity="1" transform="translate(36.91666666666667,0)">
           <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">15</text>
           <path stroke="currentColor" stroke-opacity="0.1" d="M0,-540v167M0,-354v167M0,-168v167"></path>
@@ -120,7 +120,7 @@
       </g>
     </g>
     <g transform="translate(219,0)">
-      <g transform="translate(0,570)" fill="none" text-anchor="middle">
+      <g transform="translate(0,570)" fill="none" text-anchor="middle" font-variant="tabular-nums">
         <g class="tick" opacity="1" transform="translate(36.91666666666667,0)">
           <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">15</text>
           <path stroke="currentColor" stroke-opacity="0.1" d="M0,-540v167M0,-354v167M0,-168v167"></path>
@@ -132,7 +132,7 @@
       </g>
     </g>
     <g transform="translate(398,0)">
-      <g transform="translate(0,570)" fill="none" text-anchor="middle">
+      <g transform="translate(0,570)" fill="none" text-anchor="middle" font-variant="tabular-nums">
         <g class="tick" opacity="1" transform="translate(36.91666666666667,0)">
           <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">15</text>
           <path stroke="currentColor" stroke-opacity="0.1" d="M0,-540v167M0,-168v167"></path>
diff --git a/test/output/penguinCulmenArray.svg b/test/output/penguinCulmenArray.svg
index e88a3ae514..7cb762c434 100644
--- a/test/output/penguinCulmenArray.svg
+++ b/test/output/penguinCulmenArray.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="600" viewBox="0 0 640 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="600" viewBox="0 0 640 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(560,0)" fill="none" text-anchor="start">
+  <g transform="translate(560,0)" fill="none" text-anchor="start" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,113.5)">
       <line stroke="currentColor" x2="0"></line><text fill="currentColor" x="9" dy="0.32em">Adelie</text>
     </g>
@@ -23,7 +23,7 @@
       <line stroke="currentColor" x2="0"></line><text fill="currentColor" x="9" dy="0.32em">Gentoo</text>
     </g><text fill="currentColor" transform="translate(80,300) rotate(-90)" dy="-0.32em" text-anchor="middle">species</text>
   </g>
-  <g transform="translate(0,30)" fill="none" text-anchor="middle">
+  <g transform="translate(0,30)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(120.5,0)">
       <line stroke="currentColor" y2="0"></line><text fill="currentColor" y="-9" dy="0em">FEMALE</text>
     </g>
@@ -36,7 +36,7 @@
   </g>
   <g>
     <g transform="translate(0,30)">
-      <g transform="translate(40,0)" fill="none" text-anchor="end">
+      <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
         <g class="tick" opacity="1" transform="translate(0,149.88909090909092)">
           <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">35</text>
           <path stroke="currentColor" stroke-opacity="0.1" d="M0,0h161M179,0h161M358,0h161"></path>
@@ -60,7 +60,7 @@
       </g>
     </g>
     <g transform="translate(0,216)">
-      <g transform="translate(40,0)" fill="none" text-anchor="end">
+      <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
         <g class="tick" opacity="1" transform="translate(0,149.88909090909092)">
           <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">35</text>
           <path stroke="currentColor" stroke-opacity="0.1" d="M0,0h161M179,0h161"></path>
@@ -84,7 +84,7 @@
       </g>
     </g>
     <g transform="translate(0,402)">
-      <g transform="translate(40,0)" fill="none" text-anchor="end">
+      <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
         <g class="tick" opacity="1" transform="translate(0,149.88909090909092)">
           <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">35</text>
           <path stroke="currentColor" stroke-opacity="0.1" d="M0,0h161M179,0h161M358,0h161"></path>
@@ -108,7 +108,7 @@
       </g>
     </g>
     <g transform="translate(40,0)">
-      <g transform="translate(0,570)" fill="none" text-anchor="middle">
+      <g transform="translate(0,570)" fill="none" text-anchor="middle" font-variant="tabular-nums">
         <g class="tick" opacity="1" transform="translate(36.91666666666667,0)">
           <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">15</text>
           <path stroke="currentColor" stroke-opacity="0.1" d="M0,-540v167M0,-354v167M0,-168v167"></path>
@@ -120,7 +120,7 @@
       </g>
     </g>
     <g transform="translate(219,0)">
-      <g transform="translate(0,570)" fill="none" text-anchor="middle">
+      <g transform="translate(0,570)" fill="none" text-anchor="middle" font-variant="tabular-nums">
         <g class="tick" opacity="1" transform="translate(36.91666666666667,0)">
           <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">15</text>
           <path stroke="currentColor" stroke-opacity="0.1" d="M0,-540v167M0,-354v167M0,-168v167"></path>
@@ -132,7 +132,7 @@
       </g>
     </g>
     <g transform="translate(398,0)">
-      <g transform="translate(0,570)" fill="none" text-anchor="middle">
+      <g transform="translate(0,570)" fill="none" text-anchor="middle" font-variant="tabular-nums">
         <g class="tick" opacity="1" transform="translate(36.91666666666667,0)">
           <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">15</text>
           <path stroke="currentColor" stroke-opacity="0.1" d="M0,-540v167M0,-168v167"></path>
diff --git a/test/output/penguinIslandUnknown.svg b/test/output/penguinIslandUnknown.svg
index ab0169850f..ae77c67505 100644
--- a/test/output/penguinIslandUnknown.svg
+++ b/test/output/penguinIslandUnknown.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
     </g>
@@ -41,7 +41,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">160</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Frequency</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(143.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">FEMALE</text>
     </g>
diff --git a/test/output/penguinMass.svg b/test/output/penguinMass.svg
index 74d5fa9c21..d02d9c3435 100644
--- a/test/output/penguinMass.svg
+++ b/test/output/penguinMass.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
@@ -54,7 +54,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">90</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Frequency</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(40.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">2,500</text>
     </g>
diff --git a/test/output/penguinMassSex.svg b/test/output/penguinMassSex.svg
index 6a37e0767e..35b8250f97 100644
--- a/test/output/penguinMassSex.svg
+++ b/test/output/penguinMassSex.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="480" viewBox="0 0 640 480" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="480" viewBox="0 0 640 480" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(570,0)" fill="none" text-anchor="start">
+  <g transform="translate(570,0)" fill="none" text-anchor="start" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,86.5)">
       <line stroke="currentColor" x2="0"></line><text fill="currentColor" x="9" dy="0.32em">FEMALE</text>
     </g>
@@ -23,7 +23,7 @@
       <line stroke="currentColor" x2="0"></line><text fill="currentColor" x="9" dy="0.32em"></text>
     </g><text fill="currentColor" transform="translate(70,235) rotate(-90)" dy="-0.32em" text-anchor="middle">sex</text>
   </g>
-  <g transform="translate(0,450)" fill="none" text-anchor="middle">
+  <g transform="translate(0,450)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(40.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">2,500</text>
     </g>
@@ -54,7 +54,7 @@
   </g>
   <g>
     <g transform="translate(0,20)">
-      <g transform="translate(40,0)" fill="none" text-anchor="end">
+      <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
         <g class="tick" opacity="1" transform="translate(0,133.5)">
           <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
         </g>
@@ -76,7 +76,7 @@
       </g>
     </g>
     <g transform="translate(0,168)">
-      <g transform="translate(40,0)" fill="none" text-anchor="end">
+      <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
         <g class="tick" opacity="1" transform="translate(0,133.5)">
           <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
         </g>
@@ -98,7 +98,7 @@
       </g>
     </g>
     <g transform="translate(0,316)">
-      <g transform="translate(40,0)" fill="none" text-anchor="end">
+      <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
         <g class="tick" opacity="1" transform="translate(0,133.5)">
           <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
         </g>
diff --git a/test/output/penguinMassSexSpecies.svg b/test/output/penguinMassSexSpecies.svg
index e526ecc4c7..c33e254ce1 100644
--- a/test/output/penguinMassSexSpecies.svg
+++ b/test/output/penguinMassSexSpecies.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="510" viewBox="0 0 640 510" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="510" viewBox="0 0 640 510" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(570,0)" fill="none" text-anchor="start">
+  <g transform="translate(570,0)" fill="none" text-anchor="start" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,100.5)">
       <line stroke="currentColor" x2="0"></line><text fill="currentColor" x="9" dy="0.32em">Adelie</text>
     </g>
@@ -23,7 +23,7 @@
       <line stroke="currentColor" x2="0"></line><text fill="currentColor" x="9" dy="0.32em">Gentoo</text>
     </g><text fill="currentColor" transform="translate(70,255) rotate(-90)" dy="-0.32em" text-anchor="middle">species</text>
   </g>
-  <g transform="translate(0,30)" fill="none" text-anchor="middle">
+  <g transform="translate(0,30)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(123.5,0)">
       <line stroke="currentColor" y2="0"></line><text fill="currentColor" y="-9" dy="0em">FEMALE</text>
     </g>
@@ -36,7 +36,7 @@
   </g>
   <g>
     <g transform="translate(0,30)">
-      <g transform="translate(40,0)" fill="none" text-anchor="end">
+      <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
         <g class="tick" opacity="1" transform="translate(0,140.5)">
           <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
         </g>
@@ -55,7 +55,7 @@
       </g>
     </g>
     <g transform="translate(0,185)">
-      <g transform="translate(40,0)" fill="none" text-anchor="end">
+      <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
         <g class="tick" opacity="1" transform="translate(0,140.5)">
           <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
         </g>
@@ -74,7 +74,7 @@
       </g>
     </g>
     <g transform="translate(0,340)">
-      <g transform="translate(40,0)" fill="none" text-anchor="end">
+      <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
         <g class="tick" opacity="1" transform="translate(0,140.5)">
           <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
         </g>
@@ -93,7 +93,7 @@
       </g>
     </g>
     <g transform="translate(41,0)">
-      <g transform="translate(0,480)" fill="none" text-anchor="middle">
+      <g transform="translate(0,480)" fill="none" text-anchor="middle" font-variant="tabular-nums">
         <g class="tick" opacity="1" transform="translate(62.5,0)">
           <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">4,000</text>
         </g>
@@ -103,7 +103,7 @@
       </g>
     </g>
     <g transform="translate(223,0)">
-      <g transform="translate(0,480)" fill="none" text-anchor="middle">
+      <g transform="translate(0,480)" fill="none" text-anchor="middle" font-variant="tabular-nums">
         <g class="tick" opacity="1" transform="translate(62.5,0)">
           <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">4,000</text>
         </g>
@@ -113,7 +113,7 @@
       </g>
     </g>
     <g transform="translate(405,0)">
-      <g transform="translate(0,480)" fill="none" text-anchor="middle">
+      <g transform="translate(0,480)" fill="none" text-anchor="middle" font-variant="tabular-nums">
         <g class="tick" opacity="1" transform="translate(62.5,0)">
           <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">4,000</text>
         </g>
diff --git a/test/output/penguinMassSpecies.svg b/test/output/penguinMassSpecies.svg
index 27bbfe477f..997f981cf2 100644
--- a/test/output/penguinMassSpecies.svg
+++ b/test/output/penguinMassSpecies.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
@@ -54,7 +54,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">90</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Frequency</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(40.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">2,500</text>
     </g>
diff --git a/test/output/penguinSex.svg b/test/output/penguinSex.svg
index 6603cecba0..d5668d8724 100644
--- a/test/output/penguinSex.svg
+++ b/test/output/penguinSex.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
     </g>
@@ -41,7 +41,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">160</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Frequency</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(143.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">FEMALE</text>
     </g>
diff --git a/test/output/penguinSexMassCulmenSpecies.svg b/test/output/penguinSexMassCulmenSpecies.svg
index 6a2393189f..c5578ab4aa 100644
--- a/test/output/penguinSexMassCulmenSpecies.svg
+++ b/test/output/penguinSexMassCulmenSpecies.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="320" viewBox="0 0 640 320" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="320" viewBox="0 0 640 320" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,271.2692307692308)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">34</text>
       <path stroke="currentColor" stroke-opacity="0.1" d="M0,0h180M200,0h180M400,0h180"></path>
@@ -66,7 +66,7 @@
       <path stroke="currentColor" stroke-opacity="0.1" d="M0,0h180M200,0h180M400,0h180"></path>
     </g><text fill="currentColor" transform="translate(-40,30)" dy="-1em" text-anchor="start">↑ culmen_length_mm</text>
   </g>
-  <g transform="translate(0,30)" fill="none" text-anchor="middle">
+  <g transform="translate(0,30)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(130.5,0)">
       <line stroke="currentColor" y2="0"></line><text fill="currentColor" y="-9" dy="0em">FEMALE</text>
     </g>
@@ -79,7 +79,7 @@
   </g>
   <g>
     <g transform="translate(40,0)">
-      <g transform="translate(0,290)" fill="none" text-anchor="middle">
+      <g transform="translate(0,290)" fill="none" text-anchor="middle" font-variant="tabular-nums">
         <g class="tick" opacity="1" transform="translate(21.92857142857143,0)">
           <line stroke="currentColor" y2="6"></line>
           <line stroke="currentColor" y2="-260" stroke-opacity="0.1"></line><text fill="currentColor" y="9" dy="0.71em">3k</text>
@@ -111,7 +111,7 @@
       </g>
     </g>
     <g transform="translate(240,0)">
-      <g transform="translate(0,290)" fill="none" text-anchor="middle">
+      <g transform="translate(0,290)" fill="none" text-anchor="middle" font-variant="tabular-nums">
         <g class="tick" opacity="1" transform="translate(21.92857142857143,0)">
           <line stroke="currentColor" y2="6"></line>
           <line stroke="currentColor" y2="-260" stroke-opacity="0.1"></line><text fill="currentColor" y="9" dy="0.71em">3k</text>
@@ -143,7 +143,7 @@
       </g>
     </g>
     <g transform="translate(440,0)">
-      <g transform="translate(0,290)" fill="none" text-anchor="middle">
+      <g transform="translate(0,290)" fill="none" text-anchor="middle" font-variant="tabular-nums">
         <g class="tick" opacity="1" transform="translate(21.92857142857143,0)">
           <line stroke="currentColor" y2="6"></line>
           <line stroke="currentColor" y2="-260" stroke-opacity="0.1"></line><text fill="currentColor" y="9" dy="0.71em">3k</text>
diff --git a/test/output/penguinSpeciesGroup.svg b/test/output/penguinSpeciesGroup.svg
index 047d378d9e..d5cbcdd47f 100644
--- a/test/output/penguinSpeciesGroup.svg
+++ b/test/output/penguinSpeciesGroup.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(0,30)" fill="none" text-anchor="middle">
+  <g transform="translate(0,30)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(20.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">0.0</text>
     </g>
diff --git a/test/output/penguinSpeciesIsland.svg b/test/output/penguinSpeciesIsland.svg
index ac940b04c4..e15e7dc9ee 100644
--- a/test/output/penguinSpeciesIsland.svg
+++ b/test/output/penguinSpeciesIsland.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
@@ -46,7 +46,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">140</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Frequency</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(143.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">Adelie</text>
     </g>
diff --git a/test/output/penguinSpeciesIslandRelative.svg b/test/output/penguinSpeciesIslandRelative.svg
index 9040d016e7..1aeb684ee0 100644
--- a/test/output/penguinSpeciesIslandRelative.svg
+++ b/test/output/penguinSpeciesIslandRelative.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="430" viewBox="0 0 640 430" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="430" viewBox="0 0 640 430" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,400.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
     </g>
@@ -47,7 +47,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">100</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Frequency (%)</text>
   </g>
-  <g transform="translate(0,400)" fill="none" text-anchor="middle">
+  <g transform="translate(0,400)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(130.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">Adelie</text>
     </g>
diff --git a/test/output/penguinSpeciesIslandSex.svg b/test/output/penguinSpeciesIslandSex.svg
index 6397ed3552..ec216e7792 100644
--- a/test/output/penguinSpeciesIslandSex.svg
+++ b/test/output/penguinSpeciesIslandSex.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="430" viewBox="0 0 640 430" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="430" viewBox="0 0 640 430" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,400.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
       <path stroke="currentColor" stroke-opacity="0.1" d="M0,0h180M200,0h180M400,0h180"></path>
@@ -74,7 +74,7 @@
       <path stroke="currentColor" stroke-opacity="0.1" d="M0,0h180M200,0h180M400,0h180"></path>
     </g><text fill="currentColor" transform="translate(-40,30)" dy="-1em" text-anchor="start">↑ Frequency</text>
   </g>
-  <g transform="translate(0,30)" fill="none" text-anchor="middle">
+  <g transform="translate(0,30)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(130.5,0)">
       <line stroke="currentColor" y2="0"></line><text fill="currentColor" y="-9" dy="0em">Adelie</text>
     </g>
@@ -87,7 +87,7 @@
   </g>
   <g>
     <g transform="translate(40,0)">
-      <g transform="translate(0,400)" fill="none" text-anchor="middle">
+      <g transform="translate(0,400)" fill="none" text-anchor="middle" font-variant="tabular-nums">
         <g class="tick" opacity="1" transform="translate(32.5,0)">
           <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">FEMALE</text>
         </g>
@@ -100,7 +100,7 @@
       </g>
     </g>
     <g transform="translate(240,0)">
-      <g transform="translate(0,400)" fill="none" text-anchor="middle">
+      <g transform="translate(0,400)" fill="none" text-anchor="middle" font-variant="tabular-nums">
         <g class="tick" opacity="1" transform="translate(32.5,0)">
           <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">FEMALE</text>
         </g>
@@ -113,7 +113,7 @@
       </g>
     </g>
     <g transform="translate(440,0)">
-      <g transform="translate(0,400)" fill="none" text-anchor="middle">
+      <g transform="translate(0,400)" fill="none" text-anchor="middle" font-variant="tabular-nums">
         <g class="tick" opacity="1" transform="translate(32.5,0)">
           <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">FEMALE</text>
         </g>
diff --git a/test/output/polylinear.svg b/test/output/polylinear.svg
index 8a2364bf49..7d8f7a8607 100644
--- a/test/output/polylinear.svg
+++ b/test/output/polylinear.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="90" viewBox="0 0 640 90" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="90" viewBox="0 0 640 90" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(0,60)" fill="none" text-anchor="middle">
+  <g transform="translate(0,60)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(40.5,0)">
       <line stroke="currentColor" y2="6"></line>
       <line stroke="currentColor" y2="-60" stroke-opacity="0.1"></line><text fill="currentColor" y="9" dy="0.71em">05</text>
diff --git a/test/output/randomBins.svg b/test/output/randomBins.svg
index a6fb592c7e..3b088ef38a 100644
--- a/test/output/randomBins.svg
+++ b/test/output/randomBins.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
     </g>
@@ -53,7 +53,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">60</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Frequency</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(40.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">0</text>
     </g>
diff --git a/test/output/randomBinsXY.svg b/test/output/randomBinsXY.svg
index 6e5044b868..ee1d026890 100644
--- a/test/output/randomBinsXY.svg
+++ b/test/output/randomBinsXY.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,360.20588235294116)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">2</text>
     </g>
@@ -41,7 +41,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">18</text>
     </g>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(81.92857142857143,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">0</text>
     </g>
diff --git a/test/output/randomQuantile.svg b/test/output/randomQuantile.svg
index 33acba311c..c883b4e785 100644
--- a/test/output/randomQuantile.svg
+++ b/test/output/randomQuantile.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">0.0</text>
     </g>
@@ -47,7 +47,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">1.0</text>
     </g>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(130.61760818792112,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">−2</text>
     </g>
diff --git a/test/output/randomWalk.svg b/test/output/randomWalk.svg
index 97c46a35ee..eaf0e519dd 100644
--- a/test/output/randomWalk.svg
+++ b/test/output/randomWalk.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,368.58757877922415)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">−35</text>
     </g>
@@ -50,7 +50,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">20</text>
     </g>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(40.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">0</text>
     </g>
diff --git a/test/output/seattlePrecipitationRule.svg b/test/output/seattlePrecipitationRule.svg
index 15a4fdea9a..41a472562e 100644
--- a/test/output/seattlePrecipitationRule.svg
+++ b/test/output/seattlePrecipitationRule.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(0,30)" fill="none" text-anchor="middle">
+  <g transform="translate(0,30)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(20.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">2012</text>
     </g>
diff --git a/test/output/seattleTemperatureBand.svg b/test/output/seattleTemperatureBand.svg
index a62b7010fb..a407cd847c 100644
--- a/test/output/seattleTemperatureBand.svg
+++ b/test/output/seattleTemperatureBand.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,366.948087431694)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">20</text>
@@ -46,7 +46,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">90</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Temperature (°F)</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(40.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">2012</text>
     </g>
diff --git a/test/output/seattleTemperatureCell.svg b/test/output/seattleTemperatureCell.svg
index 91530dac50..494b6242b6 100644
--- a/test/output/seattleTemperatureCell.svg
+++ b/test/output/seattleTemperatureCell.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="300" viewBox="0 0 640 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="300" viewBox="0 0 640 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,35.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">J</text>
     </g>
@@ -50,7 +50,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">D</text>
     </g>
   </g>
-  <g transform="translate(0,270)" fill="none" text-anchor="middle">
+  <g transform="translate(0,270)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(60.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">1</text>
     </g>
diff --git a/test/output/sfCovidDeaths.svg b/test/output/sfCovidDeaths.svg
index 8c6f9eb090..98d5bcc2fd 100644
--- a/test/output/sfCovidDeaths.svg
+++ b/test/output/sfCovidDeaths.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
     </g>
@@ -44,7 +44,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">45</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ case_count</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(70.88095238095238,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">April</text>
     </g>
diff --git a/test/output/sfTemperatureBand.svg b/test/output/sfTemperatureBand.svg
index 737eccde59..fb9fd2ad8e 100644
--- a/test/output/sfTemperatureBand.svg
+++ b/test/output/sfTemperatureBand.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="960" height="400" viewBox="0 0 960 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="960" height="400" viewBox="0 0 960 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,350.1875)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="900" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">40</text>
@@ -50,7 +50,7 @@
       <line stroke="currentColor" x2="900" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">80</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Daily temperature range (°F)</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(40.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">October</text>
     </g>
diff --git a/test/output/sfTemperatureBandArea.svg b/test/output/sfTemperatureBandArea.svg
index ad02f0f327..137c02c876 100644
--- a/test/output/sfTemperatureBandArea.svg
+++ b/test/output/sfTemperatureBandArea.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="960" height="400" viewBox="0 0 960 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="960" height="400" viewBox="0 0 960 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,362.6889838556507)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="900" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">42</text>
@@ -74,7 +74,7 @@
       <line stroke="currentColor" x2="900" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">70</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Daily temperature range (°F)</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(40.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">October</text>
     </g>
diff --git a/test/output/simpsonsRatings.svg b/test/output/simpsonsRatings.svg
index 1f15883e28..9a724be750 100644
--- a/test/output/simpsonsRatings.svg
+++ b/test/output/simpsonsRatings.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="640" viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="640" viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,42.5)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">1</text>
@@ -126,7 +126,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">28</text>
     </g><text fill="currentColor" transform="translate(-40,325) rotate(-90)" dy="0.75em" text-anchor="middle">Season</text>
   </g>
-  <g transform="translate(0,30)" fill="none" text-anchor="middle">
+  <g transform="translate(0,30)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(54.5,0)">
       <line stroke="currentColor" y2="-6"></line>
       <line stroke="currentColor" y2="590" stroke-opacity="0.1"></line><text fill="currentColor" y="-9" dy="0em">1</text>
diff --git a/test/output/simpsonsRatingsDots.svg b/test/output/simpsonsRatingsDots.svg
index 29cc022806..6db3e9e4b5 100644
--- a/test/output/simpsonsRatingsDots.svg
+++ b/test/output/simpsonsRatingsDots.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">4.5</text>
     </g>
@@ -44,7 +44,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">9.0</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ IMDb rating</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(60.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">1</text>
     </g>
diff --git a/test/output/simpsonsViews.svg b/test/output/simpsonsViews.svg
index 21cfc1a1d9..4a479a2ee4 100644
--- a/test/output/simpsonsViews.svg
+++ b/test/output/simpsonsViews.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="640" viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="640" viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,610.5)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
@@ -82,7 +82,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">32</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Viewers (U.S., millions)</text>
   </g>
-  <g transform="translate(0,610)" fill="none" text-anchor="middle">
+  <g transform="translate(0,610)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(46.5,0)">
       <line stroke="currentColor" y2="6"></line>
       <line stroke="currentColor" y2="-590" stroke-opacity="0.1"></line><text fill="currentColor" y="9" dy="0.71em">4.5</text>
diff --git a/test/output/singleValueBar.svg b/test/output/singleValueBar.svg
index 3e7b955735..cb3848459e 100644
--- a/test/output/singleValueBar.svg
+++ b/test/output/singleValueBar.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,12 +12,12 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,195.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
     </g>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(330.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">foo</text>
     </g>
diff --git a/test/output/singleValueBin.svg b/test/output/singleValueBin.svg
index e4e1f47112..795c302cec 100644
--- a/test/output/singleValueBin.svg
+++ b/test/output/singleValueBin.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">0.0</text>
     </g>
@@ -47,7 +47,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">1.0</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Frequency</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(330.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">3</text>
     </g>
diff --git a/test/output/softwareVersions.svg b/test/output/softwareVersions.svg
index 630e8232fc..ec45265e54 100644
--- a/test/output/softwareVersions.svg
+++ b/test/output/softwareVersions.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(0,30)" fill="none" text-anchor="middle">
+  <g transform="translate(0,30)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(20.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">0</text>
     </g>
diff --git a/test/output/stackedBar.svg b/test/output/stackedBar.svg
index 57334060ec..01039c9cd8 100644
--- a/test/output/stackedBar.svg
+++ b/test/output/stackedBar.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(0,30)" fill="none" text-anchor="middle">
+  <g transform="translate(0,30)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(20.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">0%</text>
     </g>
diff --git a/test/output/stackedRect.svg b/test/output/stackedRect.svg
index 469439acef..46083dfc5d 100644
--- a/test/output/stackedRect.svg
+++ b/test/output/stackedRect.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(0,30)" fill="none" text-anchor="middle">
+  <g transform="translate(0,30)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(20.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">0%</text>
     </g>
diff --git a/test/output/stargazers.svg b/test/output/stargazers.svg
index 59dbe25523..116fd9946c 100644
--- a/test/output/stargazers.svg
+++ b/test/output/stargazers.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="560" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
@@ -58,7 +58,7 @@
       <line stroke="currentColor" x2="560" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">1,000</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Stargazers</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(111.59942666557393,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">December</text>
     </g>
diff --git a/test/output/stargazersBinned.svg b/test/output/stargazersBinned.svg
index 71e5ee2814..03f0efb80a 100644
--- a/test/output/stargazersBinned.svg
+++ b/test/output/stargazersBinned.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
@@ -66,7 +66,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">600</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Stargazers added per week</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(40.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">November</text>
     </g>
diff --git a/test/output/stargazersHourly.svg b/test/output/stargazersHourly.svg
index 8836356bd7..94dd7bfb10 100644
--- a/test/output/stargazersHourly.svg
+++ b/test/output/stargazersHourly.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
@@ -70,7 +70,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">260</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Frequency</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(40.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">0</text>
     </g>
diff --git a/test/output/stargazersHourlyGroup.svg b/test/output/stargazersHourlyGroup.svg
index 73fa33f0b5..c749135587 100644
--- a/test/output/stargazersHourlyGroup.svg
+++ b/test/output/stargazersHourlyGroup.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
@@ -70,7 +70,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">260</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Frequency</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(104.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">1</text>
     </g>
diff --git a/test/output/stocksIndex.svg b/test/output/stocksIndex.svg
index dc86bdfa30..1accf66c91 100644
--- a/test/output/stocksIndex.svg
+++ b/test/output/stocksIndex.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" style="overflow: visible;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" style="overflow: visible;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,365.9729437945022)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">−40</text>
@@ -54,7 +54,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">+500</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Change in price (%)</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(114.58991228070175,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">2014</text>
     </g>
diff --git a/test/output/travelersYearOverYear.svg b/test/output/travelersYearOverYear.svg
index ec4147f763..0a70a65223 100644
--- a/test/output/travelersYearOverYear.svg
+++ b/test/output/travelersYearOverYear.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">0.0</text>
@@ -78,7 +78,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">3.0</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Travelers per day (millions)</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(40.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">March</text>
     </g>
diff --git a/test/output/uniformRandomDifference.svg b/test/output/uniformRandomDifference.svg
index 92e6ef9932..793d5d4eec 100644
--- a/test/output/uniformRandomDifference.svg
+++ b/test/output/uniformRandomDifference.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">0.0</text>
@@ -58,7 +58,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">5.0</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Frequency (%)</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(40.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">−1.0</text>
     </g>
diff --git a/test/output/untypedDateBin.svg b/test/output/untypedDateBin.svg
index 019bdd7777..92c87ad32c 100644
--- a/test/output/untypedDateBin.svg
+++ b/test/output/untypedDateBin.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
     </g>
@@ -47,7 +47,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">2,000</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Volume</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(117.02127086698977,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">2014</text>
     </g>
diff --git a/test/output/usCongressAge.svg b/test/output/usCongressAge.svg
index 9567c03ff0..27bfe72dfa 100644
--- a/test/output/usCongressAge.svg
+++ b/test/output/usCongressAge.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="300" viewBox="0 0 640 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="300" viewBox="0 0 640 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,270.5)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
@@ -42,7 +42,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">30</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Frequency</text>
   </g>
-  <g transform="translate(0,270)" fill="none" text-anchor="middle">
+  <g transform="translate(0,270)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(40.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">30</text>
     </g>
diff --git a/test/output/usCongressAgeGender.svg b/test/output/usCongressAgeGender.svg
index 96238f3047..2d2829658d 100644
--- a/test/output/usCongressAgeGender.svg
+++ b/test/output/usCongressAgeGender.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="300" viewBox="0 0 640 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="300" viewBox="0 0 640 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,270.5)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">10</text>
@@ -46,7 +46,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">25</text>
     </g><text fill="currentColor" transform="translate(-40,145) rotate(-90)" dy="0.75em" text-anchor="middle">← Women · Men →</text>
   </g>
-  <g transform="translate(0,270)" fill="none" text-anchor="middle">
+  <g transform="translate(0,270)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(40.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">30</text>
     </g>
diff --git a/test/output/usPopulationStateAge.svg b/test/output/usPopulationStateAge.svg
index 0673c33a74..e5c4f2c376 100644
--- a/test/output/usPopulationStateAge.svg
+++ b/test/output/usPopulationStateAge.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="240" viewBox="0 0 640 240" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="240" viewBox="0 0 640 240" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(50,0)" fill="none" text-anchor="end">
+  <g transform="translate(50,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,45.5)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="570" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">&lt;10</text>
@@ -50,7 +50,7 @@
       <line stroke="currentColor" x2="570" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">≥80</text>
     </g><text fill="currentColor" transform="translate(-50,125) rotate(-90)" dy="0.75em" text-anchor="middle">Age</text>
   </g>
-  <g transform="translate(0,30)" fill="none" text-anchor="middle">
+  <g transform="translate(0,30)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(50.5,0)">
       <line stroke="currentColor" y2="-6"></line>
       <line stroke="currentColor" y2="190" stroke-opacity="0.1"></line><text fill="currentColor" y="-9" dy="0em">0</text>
diff --git a/test/output/usPopulationStateAgeDots.svg b/test/output/usPopulationStateAgeDots.svg
index 9c3721bf57..3c8e6e8190 100644
--- a/test/output/usPopulationStateAgeDots.svg
+++ b/test/output/usPopulationStateAgeDots.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="660" viewBox="0 0 640 660" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="660" viewBox="0 0 640 660" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(0,30)" fill="none" text-anchor="middle">
+  <g transform="translate(0,30)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(20.5,0)">
       <line stroke="currentColor" y2="-6"></line>
       <line stroke="currentColor" y2="629" stroke-opacity="0.1"></line><text fill="currentColor" y="-9" dy="0em">0</text>
diff --git a/test/output/usPresidentFavorabilityDots.svg b/test/output/usPresidentFavorabilityDots.svg
index 766ea3b811..bfb923b743 100644
--- a/test/output/usPresidentFavorabilityDots.svg
+++ b/test/output/usPresidentFavorabilityDots.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="960" height="600" viewBox="0 0 960 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="960" height="600" viewBox="0 0 960 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,540.5)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="900" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">−30</text>
@@ -58,7 +58,7 @@
       <line stroke="currentColor" x2="900" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">+70</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">Net favorability (%)</text>
   </g>
-  <g transform="translate(0,570)" fill="none" text-anchor="middle">
+  <g transform="translate(0,570)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(109.18708351056289,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">1800</text>
     </g>
diff --git a/test/output/usPresidentialElection2020.svg b/test/output/usPresidentialElection2020.svg
index cf123b6d24..43bbb09084 100644
--- a/test/output/usPresidentialElection2020.svg
+++ b/test/output/usPresidentialElection2020.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="960" height="640" viewBox="0 0 960 640" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="960" height="640" viewBox="0 0 960 640" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,595.4905114324869)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="900" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em"></text>
@@ -186,7 +186,7 @@
       <line stroke="currentColor" x2="900" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em"></text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Total number of votes</text>
   </g>
-  <g transform="translate(0,610)" fill="none" text-anchor="middle">
+  <g transform="translate(0,610)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(108.542956836157,0)">
       <line stroke="currentColor" y2="6"></line>
       <line stroke="currentColor" y2="-590" stroke-opacity="0.1"></line><text fill="currentColor" y="9" dy="0.71em">−80</text>
diff --git a/test/output/usPresidentialForecast2016.svg b/test/output/usPresidentialForecast2016.svg
index ca72be40a8..6380645d3b 100644
--- a/test/output/usPresidentialForecast2016.svg
+++ b/test/output/usPresidentialForecast2016.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">0.0</text>
     </g>
@@ -32,7 +32,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">2.5</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ probability (%)</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(40.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">0</text>
     </g>
diff --git a/test/output/usRetailSales.svg b/test/output/usRetailSales.svg
index bdf4f3fe82..8cb19b4271 100644
--- a/test/output/usRetailSales.svg
+++ b/test/output/usRetailSales.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
@@ -62,7 +62,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">550</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">U.S. retail monthly sales (in billions, seasonally-adjusted)</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(100.68557091459951,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">1995</text>
     </g>
diff --git a/test/output/usStatePopulationChange.svg b/test/output/usStatePopulationChange.svg
index 3905f9da22..501247d750 100644
--- a/test/output/usStatePopulationChange.svg
+++ b/test/output/usStatePopulationChange.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="800" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="800" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(100,0)" fill="none" text-anchor="end">
+  <g transform="translate(100,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,48.5)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="520" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">Texas</text>
@@ -222,7 +222,7 @@
       <line stroke="currentColor" x2="520" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">Puerto Rico</text>
     </g>
   </g>
-  <g transform="translate(0,30)" fill="none" text-anchor="middle">
+  <g transform="translate(0,30)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(110.5,0)">
       <line stroke="currentColor" y2="-6"></line>
       <line stroke="currentColor" y2="750" stroke-opacity="0.1"></line><text fill="currentColor" y="-9" dy="0em">−0.5</text>
diff --git a/test/output/wealthBritainBar.svg b/test/output/wealthBritainBar.svg
index 7d4c04c593..c9102a3e8c 100644
--- a/test/output/wealthBritainBar.svg
+++ b/test/output/wealthBritainBar.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="60" viewBox="0 0 640 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(0,30)" fill="none" text-anchor="middle">
+  <g transform="translate(0,30)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(20.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">0</text>
     </g>
diff --git a/test/output/wealthBritainProportionPlot.svg b/test/output/wealthBritainProportionPlot.svg
index f675059fa1..a147ff8a5b 100644
--- a/test/output/wealthBritainProportionPlot.svg
+++ b/test/output/wealthBritainProportionPlot.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(0,30)" fill="none" text-anchor="middle">
+  <g transform="translate(0,30)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(50.5,0)">
       <line stroke="currentColor" y2="0"></line><text fill="currentColor" y="-9" dy="0em">Share of population</text>
     </g>
diff --git a/test/output/wordCloud.svg b/test/output/wordCloud.svg
index b8e771fb93..78640ec538 100644
--- a/test/output/wordCloud.svg
+++ b/test/output/wordCloud.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
diff --git a/test/output/wordLengthMobyDick.svg b/test/output/wordLengthMobyDick.svg
index 3f6e77c180..6aacd7adf9 100644
--- a/test/output/wordLengthMobyDick.svg
+++ b/test/output/wordLengthMobyDick.svg
@@ -1,4 +1,4 @@
-<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" font-variant="tabular-nums" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg class="plot" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <style>
     .plot {
       display: block;
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end">
+  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(0,370.5)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
@@ -58,7 +58,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">20</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Frequency (%)</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
     <g class="tick" opacity="1" transform="translate(63.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">1</text>
     </g>
diff --git a/test/plots/aapl-candlestick.js b/test/plots/aapl-candlestick.js
index 3259e38ebe..43054b81e2 100644
--- a/test/plots/aapl-candlestick.js
+++ b/test/plots/aapl-candlestick.js
@@ -7,7 +7,8 @@ export default async function() {
     inset: 6,
     grid: true,
     y: {
-      label: "↑ Apple stock price ($)"
+      label: "↑ Apple stock price ($)",
+      fontVariant: null
     },
     color: {
       range: ["#e41a1c", "#000000", "#4daf4a"]

From d6ea8ef50c37524a0a28f512418e79e2a3455136 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= <fil@rezo.net>
Date: Fri, 10 Dec 2021 17:16:17 +0100
Subject: [PATCH 2/5] Update src/axis.js

Co-authored-by: Mike Bostock <mbostock@gmail.com>
---
 src/axis.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/axis.js b/src/axis.js
index 54101afae4..48a399021a 100644
--- a/src/axis.js
+++ b/src/axis.js
@@ -24,7 +24,7 @@ export class AxisX {
     this.tickSize = number(tickSize);
     this.tickPadding = number(tickPadding);
     this.tickFormat = tickFormat;
-    this.fontVariant = string(fontVariant);
+    this.fontVariant = impliedString(fontVariant, "normal");
     this.grid = boolean(grid);
     this.label = string(label);
     this.labelAnchor = maybeKeyword(labelAnchor, "labelAnchor", ["center", "left", "right"]);

From 4ebf439970e848bdae78a56128222e550cce9432 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= <fil@rezo.net>
Date: Fri, 10 Dec 2021 17:16:22 +0100
Subject: [PATCH 3/5] Update src/axis.js

Co-authored-by: Mike Bostock <mbostock@gmail.com>
---
 src/axis.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/axis.js b/src/axis.js
index 48a399021a..209af0c8cb 100644
--- a/src/axis.js
+++ b/src/axis.js
@@ -111,7 +111,7 @@ export class AxisY {
     this.tickSize = number(tickSize);
     this.tickPadding = number(tickPadding);
     this.tickFormat = tickFormat;
-    this.fontVariant = string(fontVariant);
+    this.fontVariant = impliedString(fontVariant, "normal");
     this.grid = boolean(grid);
     this.label = string(label);
     this.labelAnchor = maybeKeyword(labelAnchor, "labelAnchor", ["center", "top", "bottom"]);

From 04c152a6277722e8ea36690a0e09efd56e33c373 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= <fil@rezo.net>
Date: Fri, 10 Dec 2021 17:44:28 +0100
Subject: [PATCH 4/5] fontVariant defaults to tabular-nums on quantitative axes
 only

---
 README.md                                       |  2 +-
 src/axes.js                                     |  8 ++++++--
 src/axis.js                                     |  5 +++--
 test/output/anscombeQuartet.svg                 |  2 +-
 test/output/athletesNationality.svg             |  2 +-
 test/output/athletesSportSex.svg                |  2 +-
 test/output/athletesSportWeight.svg             |  2 +-
 test/output/ballotStatusRace.svg                |  2 +-
 test/output/beckerBarley.svg                    | 14 +++++++-------
 test/output/carsMpg.svg                         |  2 +-
 test/output/carsParcoords.svg                   |  2 +-
 test/output/crimeanWarOverlapped.svg            |  2 +-
 test/output/crimeanWarStacked.svg               |  2 +-
 test/output/d3Survey2015Comfort.svg             |  2 +-
 test/output/d3Survey2015Why.svg                 |  2 +-
 test/output/figcaption.html                     |  2 +-
 test/output/figcaptionHtml.html                 |  2 +-
 test/output/footballCoverage.svg                |  2 +-
 test/output/fruitSales.svg                      |  2 +-
 test/output/fruitSalesDate.svg                  |  2 +-
 test/output/googleTrendsRidgeline.svg           |  2 +-
 test/output/highCardinalityOrdinal.svg          |  2 +-
 test/output/learningPoverty.svg                 |  2 +-
 test/output/letterFrequencyBar.svg              |  2 +-
 test/output/letterFrequencyColumn.svg           |  2 +-
 test/output/letterFrequencyDot.svg              |  2 +-
 test/output/letterFrequencyLollipop.svg         |  2 +-
 test/output/metroUnemploymentRidgeline.svg      |  2 +-
 test/output/mobyDickFaceted.svg                 |  8 ++++----
 test/output/mobyDickLetterFrequency.svg         |  2 +-
 test/output/mobyDickLetterPairs.svg             |  2 +-
 test/output/mobyDickLetterPosition.svg          |  4 ++--
 test/output/mobyDickLetterRelativeFrequency.svg |  2 +-
 test/output/morleyBoxplot.svg                   |  2 +-
 test/output/moviesProfitByGenre.svg             |  2 +-
 test/output/ordinalBar.svg                      |  4 ++--
 test/output/penguinCulmen.svg                   |  4 ++--
 test/output/penguinCulmenArray.svg              |  4 ++--
 test/output/penguinIslandUnknown.svg            |  2 +-
 test/output/penguinMassSex.svg                  |  2 +-
 test/output/penguinMassSexSpecies.svg           |  4 ++--
 test/output/penguinSex.svg                      |  2 +-
 test/output/penguinSexMassCulmenSpecies.svg     |  2 +-
 test/output/penguinSpeciesIsland.svg            |  2 +-
 test/output/penguinSpeciesIslandRelative.svg    |  2 +-
 test/output/penguinSpeciesIslandSex.svg         |  8 ++++----
 test/output/seattleTemperatureCell.svg          |  4 ++--
 test/output/simpsonsRatings.svg                 |  4 ++--
 test/output/simpsonsRatingsDots.svg             |  2 +-
 test/output/singleValueBar.svg                  |  2 +-
 test/output/stargazersHourlyGroup.svg           |  2 +-
 test/output/usPopulationStateAge.svg            |  2 +-
 test/output/usStatePopulationChange.svg         |  2 +-
 test/output/wealthBritainProportionPlot.svg     |  2 +-
 test/output/wordLengthMobyDick.svg              |  2 +-
 55 files changed, 81 insertions(+), 76 deletions(-)

diff --git a/README.md b/README.md
index 2c53a65400..620e1d276b 100644
--- a/README.md
+++ b/README.md
@@ -273,7 +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.
+* *scale*.**fontVariant** - the font-variant attribute for axis ticks; defaults to tabular-nums for quantitative axes.
 
 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**.
 
diff --git a/src/axes.js b/src/axes.js
index 3586e0beef..9a064e7dea 100644
--- a/src/axes.js
+++ b/src/axes.js
@@ -16,8 +16,8 @@ export function Axes(
   if (!fxScale) fxAxis = null; else if (fxAxis === true) fxAxis = xAxis === "bottom" ? "top" : "bottom";
   if (!fyScale) fyAxis = null; else if (fyAxis === true) fyAxis = yAxis === "left" ? "right" : "left";
   return {
-    ...xAxis && {x: new AxisX({grid, line, label, ...x, axis: xAxis})},
-    ...yAxis && {y: new AxisY({grid, line, label, ...y, axis: yAxis})},
+    ...xAxis && {x: new AxisX({grid, line, label, ...inferFontVariant(xScale), ...x, axis: xAxis})},
+    ...yAxis && {y: new AxisY({grid, line, label, ...inferFontVariant(yScale), ...y, axis: yAxis})},
     ...fxAxis && {fx: new AxisX({name: "fx", grid: facetGrid, label: facetLabel, ...fx, axis: fxAxis})},
     ...fyAxis && {fy: new AxisY({name: "fy", grid: facetGrid, label: facetLabel, ...fy, axis: fyAxis})}
   };
@@ -142,3 +142,7 @@ function inferLabel(channels = [], scale, axis, key) {
   }
   return candidate;
 }
+
+function inferFontVariant(scale) {
+  return isOrdinalScale(scale) ? null : {fontVariant: "tabular-nums"};
+}
diff --git a/src/axis.js b/src/axis.js
index 209af0c8cb..eb9c27e389 100644
--- a/src/axis.js
+++ b/src/axis.js
@@ -1,6 +1,7 @@
 import {axisTop, axisBottom, axisRight, axisLeft, create, format, utcFormat} from "d3";
 import {formatIsoDate} from "./format.js";
 import {boolean, take, number, string, keyword, maybeKeyword, constant, isTemporal} from "./mark.js";
+import {impliedString} from "./style.js";
 
 export class AxisX {
   constructor({
@@ -10,7 +11,7 @@ export class AxisX {
     tickSize = name === "fx" ? 0 : 6,
     tickPadding = tickSize === 0 ? 9 : 3,
     tickFormat,
-    fontVariant = "tabular-nums",
+    fontVariant,
     grid,
     label,
     labelAnchor,
@@ -97,7 +98,7 @@ export class AxisY {
     tickSize = name === "fy" ? 0 : 6,
     tickPadding = tickSize === 0 ? 9 : 3,
     tickFormat,
-    fontVariant = "tabular-nums",
+    fontVariant,
     grid,
     label,
     labelAnchor,
diff --git a/test/output/anscombeQuartet.svg b/test/output/anscombeQuartet.svg
index d35e89258a..cbe281fb52 100644
--- a/test/output/anscombeQuartet.svg
+++ b/test/output/anscombeQuartet.svg
@@ -34,7 +34,7 @@
       <path stroke="currentColor" stroke-opacity="0.1" d="M2,0h207M232,0h207M462,0h207M692,0h207"></path>
     </g><text fill="currentColor" transform="translate(-40,30)" dy="-1em" text-anchor="start">↑ y</text>
   </g>
-  <g transform="translate(0,30)" fill="none" text-anchor="middle" font-variant="tabular-nums">
+  <g transform="translate(0,30)" fill="none" text-anchor="middle">
     <g class="tick" opacity="1" transform="translate(145.5,0)">
       <line stroke="currentColor" y2="0"></line><text fill="currentColor" y="-9" dy="0em">1</text>
     </g>
diff --git a/test/output/athletesNationality.svg b/test/output/athletesNationality.svg
index fab290b4d2..fd9e0409fa 100644
--- a/test/output/athletesNationality.svg
+++ b/test/output/athletesNationality.svg
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
+  <g transform="translate(40,0)" fill="none" text-anchor="end">
     <g class="tick" opacity="1" transform="translate(0,35.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">USA</text>
     </g>
diff --git a/test/output/athletesSportSex.svg b/test/output/athletesSportSex.svg
index a88231cc0c..3d8cd6d2b9 100644
--- a/test/output/athletesSportSex.svg
+++ b/test/output/athletesSportSex.svg
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(100,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
+  <g transform="translate(100,0)" fill="none" text-anchor="end">
     <g class="tick" opacity="1" transform="translate(0,35.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">boxing</text>
     </g>
diff --git a/test/output/athletesSportWeight.svg b/test/output/athletesSportWeight.svg
index 4def8dc3a3..7e1ce1795f 100644
--- a/test/output/athletesSportWeight.svg
+++ b/test/output/athletesSportWeight.svg
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(100,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
+  <g transform="translate(100,0)" fill="none" text-anchor="end">
     <g class="tick" opacity="1" transform="translate(0,35.5)">
       <line stroke="currentColor" x2="0"></line><text fill="currentColor" x="-9" dy="0.32em">aquatics</text>
     </g>
diff --git a/test/output/ballotStatusRace.svg b/test/output/ballotStatusRace.svg
index 24ca6b8625..489839bbd6 100644
--- a/test/output/ballotStatusRace.svg
+++ b/test/output/ballotStatusRace.svg
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(210,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
+  <g transform="translate(210,0)" fill="none" text-anchor="end">
     <g class="tick" opacity="1" transform="translate(0,48.5)">
       <line stroke="currentColor" x2="0"></line><text fill="currentColor" x="-9" dy="0.32em">WHITE</text>
     </g>
diff --git a/test/output/beckerBarley.svg b/test/output/beckerBarley.svg
index 1092d7eba1..7f8a0ec7b4 100644
--- a/test/output/beckerBarley.svg
+++ b/test/output/beckerBarley.svg
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(550,0)" fill="none" text-anchor="start" font-variant="tabular-nums">
+  <g transform="translate(550,0)" fill="none" text-anchor="start">
     <g class="tick" opacity="1" transform="translate(0,77.5)">
       <line stroke="currentColor" x2="0"></line><text fill="currentColor" x="9" dy="0.32em">Waseca</text>
     </g>
@@ -64,7 +64,7 @@
   </g>
   <g>
     <g transform="translate(0,20)">
-      <g transform="translate(110,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
+      <g transform="translate(110,0)" fill="none" text-anchor="end">
         <g class="tick" opacity="1" transform="translate(0,12.5)">
           <line stroke="currentColor" x2="-6"></line>
           <line stroke="currentColor" x2="440" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">Trebi</text>
@@ -108,7 +108,7 @@
       </g>
     </g>
     <g transform="translate(0,147)">
-      <g transform="translate(110,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
+      <g transform="translate(110,0)" fill="none" text-anchor="end">
         <g class="tick" opacity="1" transform="translate(0,12.5)">
           <line stroke="currentColor" x2="-6"></line>
           <line stroke="currentColor" x2="440" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">Trebi</text>
@@ -152,7 +152,7 @@
       </g>
     </g>
     <g transform="translate(0,274)">
-      <g transform="translate(110,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
+      <g transform="translate(110,0)" fill="none" text-anchor="end">
         <g class="tick" opacity="1" transform="translate(0,12.5)">
           <line stroke="currentColor" x2="-6"></line>
           <line stroke="currentColor" x2="440" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">Trebi</text>
@@ -196,7 +196,7 @@
       </g>
     </g>
     <g transform="translate(0,401)">
-      <g transform="translate(110,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
+      <g transform="translate(110,0)" fill="none" text-anchor="end">
         <g class="tick" opacity="1" transform="translate(0,12.5)">
           <line stroke="currentColor" x2="-6"></line>
           <line stroke="currentColor" x2="440" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">Trebi</text>
@@ -240,7 +240,7 @@
       </g>
     </g>
     <g transform="translate(0,528)">
-      <g transform="translate(110,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
+      <g transform="translate(110,0)" fill="none" text-anchor="end">
         <g class="tick" opacity="1" transform="translate(0,12.5)">
           <line stroke="currentColor" x2="-6"></line>
           <line stroke="currentColor" x2="440" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">Trebi</text>
@@ -284,7 +284,7 @@
       </g>
     </g>
     <g transform="translate(0,655)">
-      <g transform="translate(110,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
+      <g transform="translate(110,0)" fill="none" text-anchor="end">
         <g class="tick" opacity="1" transform="translate(0,12.5)">
           <line stroke="currentColor" x2="-6"></line>
           <line stroke="currentColor" x2="440" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">Trebi</text>
diff --git a/test/output/carsMpg.svg b/test/output/carsMpg.svg
index f9f98196e2..f0de5307f1 100644
--- a/test/output/carsMpg.svg
+++ b/test/output/carsMpg.svg
@@ -54,7 +54,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">45</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ economy (mpg)</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle">
     <g class="tick" opacity="1" transform="translate(66.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">70</text>
     </g>
diff --git a/test/output/carsParcoords.svg b/test/output/carsParcoords.svg
index 32238164d0..aeca045308 100644
--- a/test/output/carsParcoords.svg
+++ b/test/output/carsParcoords.svg
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(100,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
+  <g transform="translate(100,0)" fill="none" text-anchor="end">
     <g class="tick" opacity="1" transform="translate(0,25.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-15" dy="0.32em">economy (mpg)</text>
     </g>
diff --git a/test/output/crimeanWarOverlapped.svg b/test/output/crimeanWarOverlapped.svg
index 51a6e63ff4..6694fb196f 100644
--- a/test/output/crimeanWarOverlapped.svg
+++ b/test/output/crimeanWarOverlapped.svg
@@ -56,7 +56,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">2,600</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ deaths</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle">
     <g class="tick" opacity="1" transform="translate(54.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">Apr</text>
     </g>
diff --git a/test/output/crimeanWarStacked.svg b/test/output/crimeanWarStacked.svg
index cea238f853..f4893378ca 100644
--- a/test/output/crimeanWarStacked.svg
+++ b/test/output/crimeanWarStacked.svg
@@ -35,7 +35,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">3,000</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ deaths</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle">
     <g class="tick" opacity="1" transform="translate(54.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">Apr</text>
     </g>
diff --git a/test/output/d3Survey2015Comfort.svg b/test/output/d3Survey2015Comfort.svg
index 3736f602a0..b2f0d5ec6b 100644
--- a/test/output/d3Survey2015Comfort.svg
+++ b/test/output/d3Survey2015Comfort.svg
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(300,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
+  <g transform="translate(300,0)" fill="none" text-anchor="end">
     <g class="tick" opacity="1" transform="translate(0,40.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">I looked at some examples!</text>
     </g>
diff --git a/test/output/d3Survey2015Why.svg b/test/output/d3Survey2015Why.svg
index d619be719b..7927ff06e5 100644
--- a/test/output/d3Survey2015Why.svg
+++ b/test/output/d3Survey2015Why.svg
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(300,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
+  <g transform="translate(300,0)" fill="none" text-anchor="end">
     <g class="tick" opacity="1" transform="translate(0,40.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">For work</text>
     </g>
diff --git a/test/output/figcaption.html b/test/output/figcaption.html
index a892e0eb2e..65458003f1 100644
--- a/test/output/figcaption.html
+++ b/test/output/figcaption.html
@@ -66,7 +66,7 @@
         <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">12</text>
       </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Frequency (%)</text>
     </g>
-    <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
+    <g transform="translate(0,370)" fill="none" text-anchor="middle">
       <g class="tick" opacity="1" transform="translate(55.5,0)">
         <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">A</text>
       </g>
diff --git a/test/output/figcaptionHtml.html b/test/output/figcaptionHtml.html
index f63b117392..6f56f21678 100644
--- a/test/output/figcaptionHtml.html
+++ b/test/output/figcaptionHtml.html
@@ -66,7 +66,7 @@
         <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">12</text>
       </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Frequency (%)</text>
     </g>
-    <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
+    <g transform="translate(0,370)" fill="none" text-anchor="middle">
       <g class="tick" opacity="1" transform="translate(55.5,0)">
         <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">A</text>
       </g>
diff --git a/test/output/footballCoverage.svg b/test/output/footballCoverage.svg
index 6e65a6f1fe..8f7267f3b0 100644
--- a/test/output/footballCoverage.svg
+++ b/test/output/footballCoverage.svg
@@ -58,7 +58,7 @@
       <path stroke="currentColor" stroke-opacity="0.1" d="M0,0h76M84,0h76M168,0h76M252,0h76M336,0h76M420,0h76M504,0h76"></path>
     </g>
   </g>
-  <g transform="translate(0,400)" fill="none" text-anchor="middle" font-variant="tabular-nums">
+  <g transform="translate(0,400)" fill="none" text-anchor="middle">
     <g class="tick" opacity="1" transform="translate(78.5,0)">
       <line stroke="currentColor" y2="0"></line><text fill="currentColor" y="9" dy="0.71em">C2</text>
     </g>
diff --git a/test/output/fruitSales.svg b/test/output/fruitSales.svg
index 55ad228425..d4643128b5 100644
--- a/test/output/fruitSales.svg
+++ b/test/output/fruitSales.svg
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(50,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
+  <g transform="translate(50,0)" fill="none" text-anchor="end">
     <g class="tick" opacity="1" transform="translate(0,33.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">bananas</text>
     </g>
diff --git a/test/output/fruitSalesDate.svg b/test/output/fruitSalesDate.svg
index 0c7272ef86..86f39a9527 100644
--- a/test/output/fruitSalesDate.svg
+++ b/test/output/fruitSalesDate.svg
@@ -35,7 +35,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">30</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ units</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle">
     <g class="tick" opacity="1" transform="translate(192.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">2021-03-15</text>
     </g>
diff --git a/test/output/googleTrendsRidgeline.svg b/test/output/googleTrendsRidgeline.svg
index 8444605d61..6607664579 100644
--- a/test/output/googleTrendsRidgeline.svg
+++ b/test/output/googleTrendsRidgeline.svg
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(160,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
+  <g transform="translate(160,0)" fill="none" text-anchor="end">
     <g class="tick" opacity="1" transform="translate(0,68.5)">
       <line stroke="currentColor" x2="0"></line><text fill="currentColor" x="-9" dy="0.32em">Australian bushfires</text>
     </g>
diff --git a/test/output/highCardinalityOrdinal.svg b/test/output/highCardinalityOrdinal.svg
index d83df73255..f2473874ea 100644
--- a/test/output/highCardinalityOrdinal.svg
+++ b/test/output/highCardinalityOrdinal.svg
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(0,30)" fill="none" text-anchor="middle" font-variant="tabular-nums">
+  <g transform="translate(0,30)" fill="none" text-anchor="middle">
     <g class="tick" opacity="1" transform="translate(45.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">0</text>
     </g>
diff --git a/test/output/learningPoverty.svg b/test/output/learningPoverty.svg
index d15c1ccab9..4b405a6eea 100644
--- a/test/output/learningPoverty.svg
+++ b/test/output/learningPoverty.svg
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(120,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
+  <g transform="translate(120,0)" fill="none" text-anchor="end">
     <g class="tick" opacity="1" transform="translate(0,41.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">Niger</text>
     </g>
diff --git a/test/output/letterFrequencyBar.svg b/test/output/letterFrequencyBar.svg
index 7b9558caca..1d4ddd7b83 100644
--- a/test/output/letterFrequencyBar.svg
+++ b/test/output/letterFrequencyBar.svg
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
+  <g transform="translate(40,0)" fill="none" text-anchor="end">
     <g class="tick" opacity="1" transform="translate(0,35.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">Z</text>
     </g>
diff --git a/test/output/letterFrequencyColumn.svg b/test/output/letterFrequencyColumn.svg
index 06ab1f3741..62513959a1 100644
--- a/test/output/letterFrequencyColumn.svg
+++ b/test/output/letterFrequencyColumn.svg
@@ -66,7 +66,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">12</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Frequency (%)</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle">
     <g class="tick" opacity="1" transform="translate(55.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">A</text>
     </g>
diff --git a/test/output/letterFrequencyDot.svg b/test/output/letterFrequencyDot.svg
index 2e7144fc69..11919db8db 100644
--- a/test/output/letterFrequencyDot.svg
+++ b/test/output/letterFrequencyDot.svg
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(0,30)" fill="none" text-anchor="middle" font-variant="tabular-nums">
+  <g transform="translate(0,30)" fill="none" text-anchor="middle">
     <g class="tick" opacity="1" transform="translate(33.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">A</text>
     </g>
diff --git a/test/output/letterFrequencyLollipop.svg b/test/output/letterFrequencyLollipop.svg
index 43f795d5e2..bda230e520 100644
--- a/test/output/letterFrequencyLollipop.svg
+++ b/test/output/letterFrequencyLollipop.svg
@@ -66,7 +66,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">0.12</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ frequency</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle">
     <g class="tick" opacity="1" transform="translate(55.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">A</text>
     </g>
diff --git a/test/output/metroUnemploymentRidgeline.svg b/test/output/metroUnemploymentRidgeline.svg
index 9d5be23bbb..28419cab1c 100644
--- a/test/output/metroUnemploymentRidgeline.svg
+++ b/test/output/metroUnemploymentRidgeline.svg
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(300,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
+  <g transform="translate(300,0)" fill="none" text-anchor="end">
     <g class="tick" opacity="1" transform="translate(0,51.5)">
       <line stroke="currentColor" x2="0"></line><text fill="currentColor" x="-9" dy="0.32em">Detroit-Livonia-Dearborn, MI Met Div</text>
     </g>
diff --git a/test/output/mobyDickFaceted.svg b/test/output/mobyDickFaceted.svg
index 8f6bfe720d..53c093dfed 100644
--- a/test/output/mobyDickFaceted.svg
+++ b/test/output/mobyDickFaceted.svg
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(600,0)" fill="none" text-anchor="start" font-variant="tabular-nums">
+  <g transform="translate(600,0)" fill="none" text-anchor="start">
     <g class="tick" opacity="1" transform="translate(0,118.5)">
       <line stroke="currentColor" x2="0"></line><text fill="currentColor" x="9" dy="0.32em">lower</text>
     </g>
@@ -20,7 +20,7 @@
       <line stroke="currentColor" x2="0"></line><text fill="currentColor" x="9" dy="0.32em">upper</text>
     </g>
   </g>
-  <g transform="translate(0,30)" fill="none" text-anchor="middle" font-variant="tabular-nums">
+  <g transform="translate(0,30)" fill="none" text-anchor="middle">
     <g class="tick" opacity="1" transform="translate(173.5,0)">
       <line stroke="currentColor" y2="0"></line><text fill="currentColor" y="-9" dy="0em"></text>
     </g>
@@ -94,7 +94,7 @@
       </g>
     </g>
     <g transform="translate(41,0)">
-      <g transform="translate(0,400)" fill="none" text-anchor="middle" font-variant="tabular-nums">
+      <g transform="translate(0,400)" fill="none" text-anchor="middle">
         <g class="tick" opacity="1" transform="translate(7.5,0)">
           <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">A</text>
         </g>
@@ -176,7 +176,7 @@
       </g>
     </g>
     <g transform="translate(335,0)">
-      <g transform="translate(0,400)" fill="none" text-anchor="middle" font-variant="tabular-nums">
+      <g transform="translate(0,400)" fill="none" text-anchor="middle">
         <g class="tick" opacity="1" transform="translate(7.5,0)">
           <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">A</text>
         </g>
diff --git a/test/output/mobyDickLetterFrequency.svg b/test/output/mobyDickLetterFrequency.svg
index 77245ded4f..a578a863e4 100644
--- a/test/output/mobyDickLetterFrequency.svg
+++ b/test/output/mobyDickLetterFrequency.svg
@@ -66,7 +66,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">1,200</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Frequency</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle">
     <g class="tick" opacity="1" transform="translate(55.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">A</text>
     </g>
diff --git a/test/output/mobyDickLetterPairs.svg b/test/output/mobyDickLetterPairs.svg
index 57fead52db..7cc8338bb9 100644
--- a/test/output/mobyDickLetterPairs.svg
+++ b/test/output/mobyDickLetterPairs.svg
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
+  <g transform="translate(40,0)" fill="none" text-anchor="end">
     <g class="tick" opacity="1" transform="translate(0,40.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">*</text>
     </g>
diff --git a/test/output/mobyDickLetterPosition.svg b/test/output/mobyDickLetterPosition.svg
index a876f2a370..77123c6a1f 100644
--- a/test/output/mobyDickLetterPosition.svg
+++ b/test/output/mobyDickLetterPosition.svg
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
+  <g transform="translate(40,0)" fill="none" text-anchor="end">
     <g class="tick" opacity="1" transform="translate(0,41.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">A</text>
     </g>
@@ -92,7 +92,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">Z</text>
     </g>
   </g>
-  <g transform="translate(0,30)" fill="none" text-anchor="middle" font-variant="tabular-nums">
+  <g transform="translate(0,30)" fill="none" text-anchor="middle">
     <g class="tick" opacity="1" transform="translate(60.5,0)">
       <line stroke="currentColor" y2="-6"></line><text fill="currentColor" y="-9" dy="0em">0</text>
     </g>
diff --git a/test/output/mobyDickLetterRelativeFrequency.svg b/test/output/mobyDickLetterRelativeFrequency.svg
index 4eb5c04bd9..606db4daba 100644
--- a/test/output/mobyDickLetterRelativeFrequency.svg
+++ b/test/output/mobyDickLetterRelativeFrequency.svg
@@ -66,7 +66,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">12</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Frequency (%)</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle">
     <g class="tick" opacity="1" transform="translate(55.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">A</text>
     </g>
diff --git a/test/output/morleyBoxplot.svg b/test/output/morleyBoxplot.svg
index e449a4928e..e149fd7c34 100644
--- a/test/output/morleyBoxplot.svg
+++ b/test/output/morleyBoxplot.svg
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
+  <g transform="translate(40,0)" fill="none" text-anchor="end">
     <g class="tick" opacity="1" transform="translate(0,33.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">1</text>
     </g>
diff --git a/test/output/moviesProfitByGenre.svg b/test/output/moviesProfitByGenre.svg
index 8853617d22..d887f8f2cf 100644
--- a/test/output/moviesProfitByGenre.svg
+++ b/test/output/moviesProfitByGenre.svg
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(120,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
+  <g transform="translate(120,0)" fill="none" text-anchor="end">
     <g class="tick" opacity="1" transform="translate(0,35.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">Adventure</text>
     </g>
diff --git a/test/output/ordinalBar.svg b/test/output/ordinalBar.svg
index 01d1ca7b02..2d823947f6 100644
--- a/test/output/ordinalBar.svg
+++ b/test/output/ordinalBar.svg
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
+  <g transform="translate(40,0)" fill="none" text-anchor="end">
     <g class="tick" opacity="1" transform="translate(0,32.5)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
@@ -42,7 +42,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">F</text>
     </g>
   </g>
-  <g transform="translate(0,170)" fill="none" text-anchor="middle" font-variant="tabular-nums">
+  <g transform="translate(0,170)" fill="none" text-anchor="middle">
     <g class="tick" opacity="1" transform="translate(93.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">0</text>
     </g>
diff --git a/test/output/penguinCulmen.svg b/test/output/penguinCulmen.svg
index f1126d655d..825c182fff 100644
--- a/test/output/penguinCulmen.svg
+++ b/test/output/penguinCulmen.svg
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(560,0)" fill="none" text-anchor="start" font-variant="tabular-nums">
+  <g transform="translate(560,0)" fill="none" text-anchor="start">
     <g class="tick" opacity="1" transform="translate(0,113.5)">
       <line stroke="currentColor" x2="0"></line><text fill="currentColor" x="9" dy="0.32em">Adelie</text>
     </g>
@@ -23,7 +23,7 @@
       <line stroke="currentColor" x2="0"></line><text fill="currentColor" x="9" dy="0.32em">Gentoo</text>
     </g><text fill="currentColor" transform="translate(80,300) rotate(-90)" dy="-0.32em" text-anchor="middle">species</text>
   </g>
-  <g transform="translate(0,30)" fill="none" text-anchor="middle" font-variant="tabular-nums">
+  <g transform="translate(0,30)" fill="none" text-anchor="middle">
     <g class="tick" opacity="1" transform="translate(120.5,0)">
       <line stroke="currentColor" y2="0"></line><text fill="currentColor" y="-9" dy="0em">FEMALE</text>
     </g>
diff --git a/test/output/penguinCulmenArray.svg b/test/output/penguinCulmenArray.svg
index 7cb762c434..326f2920ba 100644
--- a/test/output/penguinCulmenArray.svg
+++ b/test/output/penguinCulmenArray.svg
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(560,0)" fill="none" text-anchor="start" font-variant="tabular-nums">
+  <g transform="translate(560,0)" fill="none" text-anchor="start">
     <g class="tick" opacity="1" transform="translate(0,113.5)">
       <line stroke="currentColor" x2="0"></line><text fill="currentColor" x="9" dy="0.32em">Adelie</text>
     </g>
@@ -23,7 +23,7 @@
       <line stroke="currentColor" x2="0"></line><text fill="currentColor" x="9" dy="0.32em">Gentoo</text>
     </g><text fill="currentColor" transform="translate(80,300) rotate(-90)" dy="-0.32em" text-anchor="middle">species</text>
   </g>
-  <g transform="translate(0,30)" fill="none" text-anchor="middle" font-variant="tabular-nums">
+  <g transform="translate(0,30)" fill="none" text-anchor="middle">
     <g class="tick" opacity="1" transform="translate(120.5,0)">
       <line stroke="currentColor" y2="0"></line><text fill="currentColor" y="-9" dy="0em">FEMALE</text>
     </g>
diff --git a/test/output/penguinIslandUnknown.svg b/test/output/penguinIslandUnknown.svg
index ae77c67505..b7a48d6ba2 100644
--- a/test/output/penguinIslandUnknown.svg
+++ b/test/output/penguinIslandUnknown.svg
@@ -41,7 +41,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">160</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Frequency</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle">
     <g class="tick" opacity="1" transform="translate(143.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">FEMALE</text>
     </g>
diff --git a/test/output/penguinMassSex.svg b/test/output/penguinMassSex.svg
index 35b8250f97..c6db1311af 100644
--- a/test/output/penguinMassSex.svg
+++ b/test/output/penguinMassSex.svg
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(570,0)" fill="none" text-anchor="start" font-variant="tabular-nums">
+  <g transform="translate(570,0)" fill="none" text-anchor="start">
     <g class="tick" opacity="1" transform="translate(0,86.5)">
       <line stroke="currentColor" x2="0"></line><text fill="currentColor" x="9" dy="0.32em">FEMALE</text>
     </g>
diff --git a/test/output/penguinMassSexSpecies.svg b/test/output/penguinMassSexSpecies.svg
index c33e254ce1..8f7008571a 100644
--- a/test/output/penguinMassSexSpecies.svg
+++ b/test/output/penguinMassSexSpecies.svg
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(570,0)" fill="none" text-anchor="start" font-variant="tabular-nums">
+  <g transform="translate(570,0)" fill="none" text-anchor="start">
     <g class="tick" opacity="1" transform="translate(0,100.5)">
       <line stroke="currentColor" x2="0"></line><text fill="currentColor" x="9" dy="0.32em">Adelie</text>
     </g>
@@ -23,7 +23,7 @@
       <line stroke="currentColor" x2="0"></line><text fill="currentColor" x="9" dy="0.32em">Gentoo</text>
     </g><text fill="currentColor" transform="translate(70,255) rotate(-90)" dy="-0.32em" text-anchor="middle">species</text>
   </g>
-  <g transform="translate(0,30)" fill="none" text-anchor="middle" font-variant="tabular-nums">
+  <g transform="translate(0,30)" fill="none" text-anchor="middle">
     <g class="tick" opacity="1" transform="translate(123.5,0)">
       <line stroke="currentColor" y2="0"></line><text fill="currentColor" y="-9" dy="0em">FEMALE</text>
     </g>
diff --git a/test/output/penguinSex.svg b/test/output/penguinSex.svg
index d5668d8724..44249f6d19 100644
--- a/test/output/penguinSex.svg
+++ b/test/output/penguinSex.svg
@@ -41,7 +41,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">160</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Frequency</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle">
     <g class="tick" opacity="1" transform="translate(143.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">FEMALE</text>
     </g>
diff --git a/test/output/penguinSexMassCulmenSpecies.svg b/test/output/penguinSexMassCulmenSpecies.svg
index c5578ab4aa..0f31bdcf6c 100644
--- a/test/output/penguinSexMassCulmenSpecies.svg
+++ b/test/output/penguinSexMassCulmenSpecies.svg
@@ -66,7 +66,7 @@
       <path stroke="currentColor" stroke-opacity="0.1" d="M0,0h180M200,0h180M400,0h180"></path>
     </g><text fill="currentColor" transform="translate(-40,30)" dy="-1em" text-anchor="start">↑ culmen_length_mm</text>
   </g>
-  <g transform="translate(0,30)" fill="none" text-anchor="middle" font-variant="tabular-nums">
+  <g transform="translate(0,30)" fill="none" text-anchor="middle">
     <g class="tick" opacity="1" transform="translate(130.5,0)">
       <line stroke="currentColor" y2="0"></line><text fill="currentColor" y="-9" dy="0em">FEMALE</text>
     </g>
diff --git a/test/output/penguinSpeciesIsland.svg b/test/output/penguinSpeciesIsland.svg
index e15e7dc9ee..4db10f5453 100644
--- a/test/output/penguinSpeciesIsland.svg
+++ b/test/output/penguinSpeciesIsland.svg
@@ -46,7 +46,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">140</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Frequency</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle">
     <g class="tick" opacity="1" transform="translate(143.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">Adelie</text>
     </g>
diff --git a/test/output/penguinSpeciesIslandRelative.svg b/test/output/penguinSpeciesIslandRelative.svg
index 1aeb684ee0..86970ae3ee 100644
--- a/test/output/penguinSpeciesIslandRelative.svg
+++ b/test/output/penguinSpeciesIslandRelative.svg
@@ -47,7 +47,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">100</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Frequency (%)</text>
   </g>
-  <g transform="translate(0,400)" fill="none" text-anchor="middle" font-variant="tabular-nums">
+  <g transform="translate(0,400)" fill="none" text-anchor="middle">
     <g class="tick" opacity="1" transform="translate(130.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">Adelie</text>
     </g>
diff --git a/test/output/penguinSpeciesIslandSex.svg b/test/output/penguinSpeciesIslandSex.svg
index ec216e7792..b3353c80d0 100644
--- a/test/output/penguinSpeciesIslandSex.svg
+++ b/test/output/penguinSpeciesIslandSex.svg
@@ -74,7 +74,7 @@
       <path stroke="currentColor" stroke-opacity="0.1" d="M0,0h180M200,0h180M400,0h180"></path>
     </g><text fill="currentColor" transform="translate(-40,30)" dy="-1em" text-anchor="start">↑ Frequency</text>
   </g>
-  <g transform="translate(0,30)" fill="none" text-anchor="middle" font-variant="tabular-nums">
+  <g transform="translate(0,30)" fill="none" text-anchor="middle">
     <g class="tick" opacity="1" transform="translate(130.5,0)">
       <line stroke="currentColor" y2="0"></line><text fill="currentColor" y="-9" dy="0em">Adelie</text>
     </g>
@@ -87,7 +87,7 @@
   </g>
   <g>
     <g transform="translate(40,0)">
-      <g transform="translate(0,400)" fill="none" text-anchor="middle" font-variant="tabular-nums">
+      <g transform="translate(0,400)" fill="none" text-anchor="middle">
         <g class="tick" opacity="1" transform="translate(32.5,0)">
           <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">FEMALE</text>
         </g>
@@ -100,7 +100,7 @@
       </g>
     </g>
     <g transform="translate(240,0)">
-      <g transform="translate(0,400)" fill="none" text-anchor="middle" font-variant="tabular-nums">
+      <g transform="translate(0,400)" fill="none" text-anchor="middle">
         <g class="tick" opacity="1" transform="translate(32.5,0)">
           <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">FEMALE</text>
         </g>
@@ -113,7 +113,7 @@
       </g>
     </g>
     <g transform="translate(440,0)">
-      <g transform="translate(0,400)" fill="none" text-anchor="middle" font-variant="tabular-nums">
+      <g transform="translate(0,400)" fill="none" text-anchor="middle">
         <g class="tick" opacity="1" transform="translate(32.5,0)">
           <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">FEMALE</text>
         </g>
diff --git a/test/output/seattleTemperatureCell.svg b/test/output/seattleTemperatureCell.svg
index 494b6242b6..a88c40126d 100644
--- a/test/output/seattleTemperatureCell.svg
+++ b/test/output/seattleTemperatureCell.svg
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
+  <g transform="translate(40,0)" fill="none" text-anchor="end">
     <g class="tick" opacity="1" transform="translate(0,35.5)">
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">J</text>
     </g>
@@ -50,7 +50,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">D</text>
     </g>
   </g>
-  <g transform="translate(0,270)" fill="none" text-anchor="middle" font-variant="tabular-nums">
+  <g transform="translate(0,270)" fill="none" text-anchor="middle">
     <g class="tick" opacity="1" transform="translate(60.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">1</text>
     </g>
diff --git a/test/output/simpsonsRatings.svg b/test/output/simpsonsRatings.svg
index 9a724be750..d4d8cd19c9 100644
--- a/test/output/simpsonsRatings.svg
+++ b/test/output/simpsonsRatings.svg
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(40,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
+  <g transform="translate(40,0)" fill="none" text-anchor="end">
     <g class="tick" opacity="1" transform="translate(0,42.5)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">1</text>
@@ -126,7 +126,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">28</text>
     </g><text fill="currentColor" transform="translate(-40,325) rotate(-90)" dy="0.75em" text-anchor="middle">Season</text>
   </g>
-  <g transform="translate(0,30)" fill="none" text-anchor="middle" font-variant="tabular-nums">
+  <g transform="translate(0,30)" fill="none" text-anchor="middle">
     <g class="tick" opacity="1" transform="translate(54.5,0)">
       <line stroke="currentColor" y2="-6"></line>
       <line stroke="currentColor" y2="590" stroke-opacity="0.1"></line><text fill="currentColor" y="-9" dy="0em">1</text>
diff --git a/test/output/simpsonsRatingsDots.svg b/test/output/simpsonsRatingsDots.svg
index 6db3e9e4b5..fc132499e9 100644
--- a/test/output/simpsonsRatingsDots.svg
+++ b/test/output/simpsonsRatingsDots.svg
@@ -44,7 +44,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">9.0</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ IMDb rating</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle">
     <g class="tick" opacity="1" transform="translate(60.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">1</text>
     </g>
diff --git a/test/output/singleValueBar.svg b/test/output/singleValueBar.svg
index cb3848459e..a2e489cb2a 100644
--- a/test/output/singleValueBar.svg
+++ b/test/output/singleValueBar.svg
@@ -17,7 +17,7 @@
       <line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">0</text>
     </g>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle">
     <g class="tick" opacity="1" transform="translate(330.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">foo</text>
     </g>
diff --git a/test/output/stargazersHourlyGroup.svg b/test/output/stargazersHourlyGroup.svg
index c749135587..a89bcdcb95 100644
--- a/test/output/stargazersHourlyGroup.svg
+++ b/test/output/stargazersHourlyGroup.svg
@@ -70,7 +70,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">260</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Frequency</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle">
     <g class="tick" opacity="1" transform="translate(104.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">1</text>
     </g>
diff --git a/test/output/usPopulationStateAge.svg b/test/output/usPopulationStateAge.svg
index e5c4f2c376..2e9e4aa3de 100644
--- a/test/output/usPopulationStateAge.svg
+++ b/test/output/usPopulationStateAge.svg
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(50,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
+  <g transform="translate(50,0)" fill="none" text-anchor="end">
     <g class="tick" opacity="1" transform="translate(0,45.5)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="570" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">&lt;10</text>
diff --git a/test/output/usStatePopulationChange.svg b/test/output/usStatePopulationChange.svg
index 501247d750..11696f45ff 100644
--- a/test/output/usStatePopulationChange.svg
+++ b/test/output/usStatePopulationChange.svg
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(100,0)" fill="none" text-anchor="end" font-variant="tabular-nums">
+  <g transform="translate(100,0)" fill="none" text-anchor="end">
     <g class="tick" opacity="1" transform="translate(0,48.5)">
       <line stroke="currentColor" x2="-6"></line>
       <line stroke="currentColor" x2="520" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">Texas</text>
diff --git a/test/output/wealthBritainProportionPlot.svg b/test/output/wealthBritainProportionPlot.svg
index a147ff8a5b..5e86d14ea6 100644
--- a/test/output/wealthBritainProportionPlot.svg
+++ b/test/output/wealthBritainProportionPlot.svg
@@ -12,7 +12,7 @@
       white-space: pre;
     }
   </style>
-  <g transform="translate(0,30)" fill="none" text-anchor="middle" font-variant="tabular-nums">
+  <g transform="translate(0,30)" fill="none" text-anchor="middle">
     <g class="tick" opacity="1" transform="translate(50.5,0)">
       <line stroke="currentColor" y2="0"></line><text fill="currentColor" y="-9" dy="0em">Share of population</text>
     </g>
diff --git a/test/output/wordLengthMobyDick.svg b/test/output/wordLengthMobyDick.svg
index 6aacd7adf9..31ea71fdef 100644
--- a/test/output/wordLengthMobyDick.svg
+++ b/test/output/wordLengthMobyDick.svg
@@ -58,7 +58,7 @@
       <line stroke="currentColor" x2="580" stroke-opacity="0.1"></line><text fill="currentColor" x="-9" dy="0.32em">20</text>
     </g><text fill="currentColor" transform="translate(-40,20)" dy="-1em" text-anchor="start">↑ Frequency (%)</text>
   </g>
-  <g transform="translate(0,370)" fill="none" text-anchor="middle" font-variant="tabular-nums">
+  <g transform="translate(0,370)" fill="none" text-anchor="middle">
     <g class="tick" opacity="1" transform="translate(63.5,0)">
       <line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">1</text>
     </g>

From 898cc3480309f39fc272986b133254d95f8e86ab Mon Sep 17 00:00:00 2001
From: Mike Bostock <mbostock@gmail.com>
Date: Fri, 10 Dec 2021 08:58:12 -0800
Subject: [PATCH 5/5] inferFontVariant returns string | undefined

---
 src/axes.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/axes.js b/src/axes.js
index 9a064e7dea..abb1cd0d92 100644
--- a/src/axes.js
+++ b/src/axes.js
@@ -16,8 +16,8 @@ export function Axes(
   if (!fxScale) fxAxis = null; else if (fxAxis === true) fxAxis = xAxis === "bottom" ? "top" : "bottom";
   if (!fyScale) fyAxis = null; else if (fyAxis === true) fyAxis = yAxis === "left" ? "right" : "left";
   return {
-    ...xAxis && {x: new AxisX({grid, line, label, ...inferFontVariant(xScale), ...x, axis: xAxis})},
-    ...yAxis && {y: new AxisY({grid, line, label, ...inferFontVariant(yScale), ...y, axis: yAxis})},
+    ...xAxis && {x: new AxisX({grid, line, label, fontVariant: inferFontVariant(xScale), ...x, axis: xAxis})},
+    ...yAxis && {y: new AxisY({grid, line, label, fontVariant: inferFontVariant(yScale), ...y, axis: yAxis})},
     ...fxAxis && {fx: new AxisX({name: "fx", grid: facetGrid, label: facetLabel, ...fx, axis: fxAxis})},
     ...fyAxis && {fy: new AxisY({name: "fy", grid: facetGrid, label: facetLabel, ...fy, axis: fyAxis})}
   };
@@ -144,5 +144,5 @@ function inferLabel(channels = [], scale, axis, key) {
 }
 
 function inferFontVariant(scale) {
-  return isOrdinalScale(scale) ? null : {fontVariant: "tabular-nums"};
+  return isOrdinalScale(scale) ? undefined : "tabular-nums";
 }