plottable 3.9.0-dev-56-geb1f7fd → 3.9.0-dev-57-g2333f4e

package/build/src/axes/axis.d.ts

@@ -1,4 +1,5 @@
 import { Component } from "../components/component";
+import { LabelFontSizePx } from "../components/label";
 import { Formatter } from "../core/formatters";
 import { Point, SimpleSelection, SpaceRequest } from "../core/interfaces";
 import { Scale } from "../scales/scale";
@@ -41,6 +42,11 @@ export declare class Axis<D> extends Component {
     private static _ANNOTATION_LABEL_PADDING;
     protected _tickMarkContainer: SimpleSelection<void>;
     protected _tickLabelContainer: SimpleSelection<void>;
+    /**
+     * `protected` instead of `private` to accommodate time axes which draw their own label containers
+     * and need access to this value.
+     */
+    protected _tickLabelFontSize: LabelFontSizePx;
     protected _baseline: SimpleSelection<void>;
     protected _scale: Scale<D, number>;
     private _formatter;
@@ -74,6 +80,14 @@ export declare class Axis<D> extends Component {
      * @param {Element} element
      */
     tickLabelDataOnElement(element: Element): {};
+    /**
+     * Get the label font size in px.
+     */
+    tickLabelFontSize(): LabelFontSizePx;
+    /**
+     * Set the label font size.
+     */
+    tickLabelFontSize(fontSize: LabelFontSizePx): this;
     protected _computeWidth(): number;
     protected _computeHeight(): number;
     requestedSpace(offeredWidth: number, offeredHeight: number): SpaceRequest;
@@ -86,6 +100,7 @@ export declare class Axis<D> extends Component {
         height: number;
     };
     protected _setup(): void;
+    private _configureTickLabelContainer();
     protected _getTickValues(): D[];
     /**
      * Render tick marks, baseline, and annotations. Should be super called by subclasses and then overridden to draw

package/build/src/axes/axis.js

@@ -8,6 +8,7 @@ var tslib_1 = require("tslib");
 var d3 = require("d3");
 var Typesettable = require("typesettable");
 var component_1 = require("../components/component");
+var label_1 = require("../components/label");
 var Formatters = require("../core/formatters");
 var Utils = require("../utils");
 var makeEnum_1 = require("../utils/makeEnum");
@@ -24,6 +25,11 @@ var Axis = /** @class */ (function (_super) {
      */
     function Axis(scale, orientation) {
         var _this = _super.call(this) || this;
+        /**
+         * `protected` instead of `private` to accommodate time axes which draw their own label containers
+         * and need access to this value.
+         */
+        _this._tickLabelFontSize = label_1.Label._DEFAULT_FONT_SIZE_PX;
         _this._endTickLength = 5;
         _this._innerTickLength = 5;
         _this._tickLabelPadding = 10;
@@ -76,6 +82,18 @@ var Axis = /** @class */ (function (_super) {
         }
         return element === undefined ? undefined : d3.select(element).datum();
     };
+    Axis.prototype.tickLabelFontSize = function (fontSize) {
+        if (fontSize == null) {
+            return this._tickLabelFontSize;
+        }
+        else {
+            this._tickLabelFontSize = fontSize;
+            if (this._tickLabelContainer != null) {
+                this._configureTickLabelContainer();
+            }
+            return this.render();
+        }
+    };
     Axis.prototype._computeWidth = function () {
         // to be overridden by subclass logic
         return this._maxLabelTickLength();
@@ -147,8 +165,7 @@ var Axis = /** @class */ (function (_super) {
         _super.prototype._setup.call(this);
         this._tickMarkContainer = this.content().append("g")
             .classed(Axis.TICK_MARK_CLASS + "-container", true);
-        this._tickLabelContainer = this.content().append("g")
-            .classed(Axis.TICK_LABEL_CLASS + "-container", true);
+        this._configureTickLabelContainer();
         this._baseline = this.content().append("line").classed("baseline", true);
         this._annotationContainer = this.content().append("g")
             .classed("annotation-container", true);
@@ -160,6 +177,15 @@ var Axis = /** @class */ (function (_super) {
         this._annotationMeasurer = new Typesettable.CacheMeasurer(typesetterContext);
         this._annotationWriter = new Typesettable.Writer(this._annotationMeasurer, typesetterContext);
     };
+    Axis.prototype._configureTickLabelContainer = function () {
+        if (this._tickLabelContainer == null) {
+            this._tickLabelContainer = this.content().append("g");
+        }
+        // clearing to remove outdated font-size classes
+        this._tickLabelContainer.attr("class", null)
+            .classed(Axis.TICK_LABEL_CLASS + "-container", true)
+            .classed("label-" + this._tickLabelFontSize, true);
+    };
     /*
      * Function for generating tick values in data-space (as opposed to pixel values).
      * To be implemented by subclasses.
@@ -639,7 +665,9 @@ var Axis = /** @class */ (function (_super) {
     };
     Axis.prototype.invalidateCache = function () {
         _super.prototype.invalidateCache.call(this);
-        this._annotationMeasurer.reset();
+        if (this._annotationMeasurer != null) {
+            this._annotationMeasurer.reset();
+        }
     };
     /**
      * The css class applied to each end tick mark (the line on the end tick).

package/build/src/axes/categoryAxis.d.ts

@@ -1,3 +1,4 @@
+import { LabelFontSizePx } from "../components/label";
 import { Point, SpaceRequest } from "../core/interfaces";
 import * as Scales from "../scales";
 import { Axis, AxisOrientation } from "./axis";
@@ -133,6 +134,8 @@ export declare class Category extends Axis<string> {
      * @param {d3.Selection} ticks The tick elements to write.
      */
     private _drawTicks(stepWidth, ticks);
+    tickLabelFontSize(): LabelFontSizePx;
+    tickLabelFontSize(fontSize: LabelFontSizePx): this;
     /**
      * Measures the size of the tick labels without making any (permanent) DOM changes.
      *

package/build/src/axes/categoryAxis.js

@@ -233,6 +233,14 @@ var Category = /** @class */ (function (_super) {
             self._writer.write(self.formatter()(d), width, height, writeOptions, container.node());
         });
     };
+    Category.prototype.tickLabelFontSize = function (fontSize) {
+        if (fontSize == null) {
+            return _super.prototype.tickLabelFontSize.call(this);
+        }
+        // Resets the measurer to measure distances using the latest font size
+        this.invalidateCache();
+        return _super.prototype.tickLabelFontSize.call(this, fontSize);
+    };
     /**
      * Measures the size of the tick labels without making any (permanent) DOM changes.
      *
@@ -339,7 +347,9 @@ var Category = /** @class */ (function (_super) {
     };
     Category.prototype.invalidateCache = function () {
         _super.prototype.invalidateCache.call(this);
-        this._measurer.reset();
+        if (this._measurer != null) {
+            this._measurer.reset();
+        }
     };
     /**
      * How many pixels to give labels at minimum before downsampling takes effect.

package/build/src/axes/timeAxis.d.ts

@@ -1,5 +1,6 @@
 import { Formatter } from "../core/formatters";
 import * as Scales from "../scales";
+import { LabelFontSizePx } from "../components/label";
 import { Axis } from "./axis";
 export declare const TimeInterval: {
     second: "second";
@@ -80,6 +81,8 @@ export declare class Time extends Axis<Date> {
      * orientations.
      */
     constructor(scale: Scales.Time, orientation: TimeAxisOrientation, useUTC?: boolean);
+    tickLabelFontSize(): LabelFontSizePx;
+    tickLabelFontSize(fontSize: LabelFontSizePx): this;
     /**
      * Gets the label positions for each tier.
      */

package/build/src/axes/timeAxis.js

@@ -50,6 +50,23 @@ var Time = /** @class */ (function (_super) {
         _this.annotationFormatter(Formatters.time("%a %b %d, %Y", _this._useUTC));
         return _this;
     }
+    Time.prototype.tickLabelFontSize = function (fontSize) {
+        var _this = this;
+        if (fontSize == null) {
+            return _super.prototype.tickLabelFontSize.call(this);
+        }
+        if (this._tierLabelContainers != null) {
+            this.invalidateCache();
+            this._computeHeight();
+            this._tierLabelContainers.forEach(function (container) {
+                // clearing to remove outdated font-size classes
+                container.attr("class", null)
+                    .classed(axis_1.Axis.TICK_LABEL_CLASS + "-container", true)
+                    .classed("label-" + _this._tickLabelFontSize, true);
+            });
+        }
+        return _super.prototype.tickLabelFontSize.call(this, fontSize);
+    };
     Time.prototype.tierLabelPositions = function (newPositions) {
         if (newPositions == null) {
             return this._tierLabelPositions;
@@ -194,7 +211,9 @@ var Time = /** @class */ (function (_super) {
         this._baseline.remove();
         for (var i = 0; i < this._numTiers; ++i) {
             var tierContainer = this.content().append("g").classed(Time.TIME_AXIS_TIER_CLASS, true);
-            this._tierLabelContainers.push(tierContainer.append("g").classed(axis_1.Axis.TICK_LABEL_CLASS + "-container", true));
+            this._tierLabelContainers.push(tierContainer.append("g")
+                .classed(axis_1.Axis.TICK_LABEL_CLASS + "-container", true)
+                .classed("label-" + this._tickLabelFontSize, true));
             this._tierMarkContainers.push(tierContainer.append("g").classed(axis_1.Axis.TICK_MARK_CLASS + "-container", true));
             this._tierBaselines.push(tierContainer.append("line").classed("baseline", true));
         }
@@ -243,6 +262,7 @@ var Time = /** @class */ (function (_super) {
             labelPos = tickPos;
         }
         var tickLabelsUpdate = container.selectAll("." + axis_1.Axis.TICK_LABEL_CLASS).data(labelPos, function (d) { return String(d.valueOf()); });
+        tickLabelsUpdate.remove();
         var tickLabelsEnter = tickLabelsUpdate
             .enter()
             .append("g")
@@ -417,7 +437,9 @@ var Time = /** @class */ (function (_super) {
     };
     Time.prototype.invalidateCache = function () {
         _super.prototype.invalidateCache.call(this);
-        this._measurer.reset();
+        if (this._measurer != null) {
+            this._measurer.reset();
+        }
     };
     /**
      * The CSS class applied to each Time Axis tier

package/build/src/components/label.d.ts

@@ -5,7 +5,11 @@
 import * as Typesettable from "typesettable";
 import { SimpleSelection, SpaceRequest } from "../core/interfaces";
 import { Component } from "./component";
+export declare type LabelFontSizePx = 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24;
 export declare class Label extends Component {
+    static _MIN_FONT_SIZE_PX: LabelFontSizePx;
+    static _MAX_FONT_SIZE_PX: LabelFontSizePx;
+    static _DEFAULT_FONT_SIZE_PX: LabelFontSizePx;
     protected _textContainer: SimpleSelection<void>;
     protected _text: string;
     protected _angle: number;

package/build/src/components/label.js

@@ -122,6 +122,9 @@ var Label = /** @class */ (function (_super) {
         _super.prototype.invalidateCache.call(this);
         this._measurer.reset();
     };
+    Label._MIN_FONT_SIZE_PX = 12;
+    Label._MAX_FONT_SIZE_PX = 24;
+    Label._DEFAULT_FONT_SIZE_PX = 12;
     return Label;
 }(component_1.Component));
 exports.Label = Label;

package/build/src/core/version.js

@@ -9,4 +9,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
  * real version number during the dist phase for for npm module publishing. Modifying this line should
  * be accompanied by modifying the "sed-version" task in package.json accordingly.
  */
-exports.version = "3.9.0-dev-56-geb1f7fd";
+exports.version = "3.9.0-dev-57-g2333f4e";

package/build/src/plots/barPlot.d.ts

@@ -1,3 +1,4 @@
+import { LabelFontSizePx } from "../components/label";
 import { Dataset } from "../core/dataset";
 import { DatumFormatter } from "../core/formatters";
 import { AttributeToProjector, IAccessor, IEntityBounds, Point } from "../core/interfaces";
@@ -45,6 +46,7 @@ export declare class Bar<X, Y> extends XYPlot<X, Y> {
     private _labelFormatter;
     private _labelsEnabled;
     private _labelsPosition;
+    protected _labelFontSize: LabelFontSizePx;
     private _hideBarsIfAnyAreTooWide;
     private _labelConfig;
     private _baselineValueProvider;
@@ -178,6 +180,14 @@ export declare class Bar<X, Y> extends XYPlot<X, Y> {
      * @returns {Bar} The calling Bar Plot.
      */
     labelFormatter(formatter: DatumFormatter): this;
+    /**
+     * Get the label font size in px.
+     */
+    labelFontSize(): LabelFontSizePx;
+    /**
+     * Set the label font size.
+     */
+    labelFontSize(fontSize: LabelFontSizePx): this;
     protected _createNodesForDataset(dataset: Dataset): ProxyDrawer;
     protected _removeDatasetNodes(dataset: Dataset): void;
     /**

package/build/src/plots/barPlot.js

@@ -8,6 +8,7 @@ var tslib_1 = require("tslib");
 var d3 = require("d3");
 var Typesettable = require("typesettable");
 var Animators = require("../animators");
+var label_1 = require("../components/label");
 var Formatters = require("../core/formatters");
 var Drawers = require("../drawers");
 var drawer_1 = require("../drawers/drawer");
@@ -37,6 +38,7 @@ var Bar = /** @class */ (function (_super) {
         _this._labelFormatter = Formatters.identity();
         _this._labelsEnabled = false;
         _this._labelsPosition = exports.LabelsPosition.end;
+        _this._labelFontSize = label_1.Label._DEFAULT_FONT_SIZE_PX;
         _this._hideBarsIfAnyAreTooWide = true;
         _this._barAlignment = "middle";
         _this._computeBarPixelThickness = memoize_1.memoize(computeBarPixelThickness);
@@ -210,9 +212,29 @@ var Bar = /** @class */ (function (_super) {
             return this;
         }
     };
+    Bar.prototype.labelFontSize = function (fontSize) {
+        var _this = this;
+        if (fontSize == null) {
+            return this._labelFontSize;
+        }
+        else {
+            this.invalidateCache();
+            this._labelFontSize = fontSize;
+            this._labelConfig.forEach(function (_a) {
+                var labelArea = _a.labelArea;
+                // clearing to remove outdated font-size classes
+                labelArea.attr("class", null)
+                    .classed(Bar._LABEL_AREA_CLASS, true)
+                    .classed("label-" + _this._labelFontSize, true);
+            });
+            return this.render();
+        }
+    };
     Bar.prototype._createNodesForDataset = function (dataset) {
         var drawer = _super.prototype._createNodesForDataset.call(this, dataset);
-        var labelArea = this._renderArea.append("g").classed(Bar._LABEL_AREA_CLASS, true);
+        var labelArea = this._renderArea.append("g")
+            .classed(Bar._LABEL_AREA_CLASS, true)
+            .classed("label-" + this._labelFontSize, true);
         var context = new Typesettable.SvgContext(labelArea.node());
         var measurer = new Typesettable.CacheMeasurer(context);
         var writer = new Typesettable.Writer(measurer, context);
@@ -686,7 +708,12 @@ var Bar = /** @class */ (function (_super) {
     Bar.prototype.invalidateCache = function () {
         var _this = this;
         _super.prototype.invalidateCache.call(this);
-        this.datasets().forEach(function (dataset) { return _this._labelConfig.get(dataset).measurer.reset(); });
+        this.datasets().forEach(function (dataset) {
+            var labelConfig = _this._labelConfig.get(dataset);
+            if (labelConfig != null) {
+                labelConfig.measurer.reset();
+            }
+        });
     };
     Bar._BAR_THICKNESS_RATIO = 0.95;
     Bar._BAR_GAPLESS_THRESHOLD_PX = 3;

package/build/src/plots/scatterPlot.d.ts

@@ -3,6 +3,7 @@ import { AttributeToProjector, Bounds, IAccessor, Point } from "../core/interfac
 import { SymbolFactory } from "../core/symbolFactories";
 import { ProxyDrawer } from "../drawers/drawer";
 import { Scale } from "../scales/scale";
+import { LabelFontSizePx } from "../components/label";
 import * as Drawers from "../drawers";
 import * as Plots from "./";
 import { IAccessorScaleBinding, ILightweightPlotEntity, IPlotEntity, ITransformableAccessorScaleBinding } from "./";
@@ -16,6 +17,7 @@ export declare class Scatter<X, Y> extends XYPlot<X, Y> {
     protected static _LABEL_AREA_CLASS: string;
     private _labelConfig;
     private _labelFormatter;
+    private _labelFontSize;
     protected static _LABEL_MARGIN_FROM_BUBBLE: number;
     private _labelsEnabled;
     /**
@@ -89,6 +91,15 @@ export declare class Scatter<X, Y> extends XYPlot<X, Y> {
      * @returns {Scatter} The calling SCATTER Plot.
      */
     labelsEnabled(enabled: boolean): this;
+    /**
+     * Get the label font size in px.
+     */
+    labelFontSize(): LabelFontSizePx;
+    /**
+     * Set the label font size.
+     */
+    labelFontSize(fontSize: LabelFontSizePx): this;
+    invalidateCache(): void;
     protected _createNodesForDataset(dataset: Dataset): ProxyDrawer;
     protected _removeDatasetNodes(dataset: Dataset): void;
     protected _additionalPaint(time: number): void;

package/build/src/plots/scatterPlot.js

@@ -11,6 +11,7 @@ var SymbolFactories = require("../core/symbolFactories");
 var drawer_1 = require("../drawers/drawer");
 var symbolDrawer_1 = require("../drawers/symbolDrawer");
 var Animators = require("../animators");
+var label_1 = require("../components/label");
 var Drawers = require("../drawers");
 var Scales = require("../scales");
 var Utils = require("../utils");
@@ -27,6 +28,7 @@ var Scatter = /** @class */ (function (_super) {
     function Scatter() {
         var _this = _super.call(this) || this;
         _this._labelFormatter = Formatters.identity();
+        _this._labelFontSize = label_1.Label._DEFAULT_FONT_SIZE_PX;
         _this._labelsEnabled = false;
         _this.addClass("scatter-plot");
         var animator = new Animators.Easing();
@@ -151,9 +153,38 @@ var Scatter = /** @class */ (function (_super) {
             return this;
         }
     };
+    Scatter.prototype.labelFontSize = function (fontSize) {
+        var _this = this;
+        if (fontSize == null) {
+            return this._labelFontSize;
+        }
+        else {
+            this.invalidateCache();
+            this._labelFontSize = fontSize;
+            this._labelConfig.forEach(function (_a) {
+                var labelArea = _a.labelArea;
+                labelArea.attr("class", null)
+                    .classed(Scatter._LABEL_AREA_CLASS, true)
+                    .classed("label-" + _this._labelFontSize, true);
+            });
+            return this.render();
+        }
+    };
+    Scatter.prototype.invalidateCache = function () {
+        var _this = this;
+        _super.prototype.invalidateCache.call(this);
+        this.datasets().forEach(function (dataset) {
+            var labelConfig = _this._labelConfig.get(dataset);
+            if (labelConfig != null) {
+                labelConfig.measurer.reset();
+            }
+        });
+    };
     Scatter.prototype._createNodesForDataset = function (dataset) {
         var drawer = _super.prototype._createNodesForDataset.call(this, dataset);
-        var labelArea = this._renderArea.append("g").classed(Scatter._LABEL_AREA_CLASS, true);
+        var labelArea = this._renderArea.append("g")
+            .classed(Scatter._LABEL_AREA_CLASS, true)
+            .classed("label-" + this._labelFontSize, true);
         var context = new Typesettable.SvgContext(labelArea.node());
         var measurer = new Typesettable.CacheMeasurer(context);
         var writer = new Typesettable.Writer(measurer, context);

package/build/src/plots/stackedBarPlot.d.ts

@@ -1,6 +1,7 @@
 import { Dataset } from "../core/dataset";
 import { Formatter } from "../core/formatters";
 import * as Utils from "../utils";
+import { LabelFontSizePx } from "../components/label";
 import { Bar, BarOrientation } from "./barPlot";
 export declare class StackedBar<X, Y> extends Bar<X, Y> {
     protected static _EXTREMA_LABEL_MARGIN_FROM_BAR: number;
@@ -51,6 +52,8 @@ export declare class StackedBar<X, Y> extends Bar<X, Y> {
      * @returns {this}
      */
     extremaFormatter(formatter: Formatter): this;
+    labelFontSize(): LabelFontSizePx;
+    labelFontSize(fontSize: LabelFontSizePx): this;
     protected _setup(): void;
     protected _drawLabels(): void;
     protected _generateAttrToProjector(): {

package/build/src/plots/stackedBarPlot.js

@@ -55,9 +55,27 @@ var StackedBar = /** @class */ (function (_super) {
             return this;
         }
     };
+    StackedBar.prototype.labelFontSize = function (fontSize) {
+        if (fontSize == null) {
+            return _super.prototype.labelFontSize.call(this);
+        }
+        else {
+            if (this._labelArea != null) {
+                // clearing to remove outdated font-size classes
+                this._labelArea.attr("class", null)
+                    .classed(barPlot_1.Bar._LABEL_AREA_CLASS, true)
+                    .classed("label-" + this._labelFontSize, true);
+            }
+            _super.prototype.labelFontSize.call(this, fontSize);
+            return this;
+        }
+    };
     StackedBar.prototype._setup = function () {
         _super.prototype._setup.call(this);
-        this._labelArea = this._renderArea.append("g").classed(barPlot_1.Bar._LABEL_AREA_CLASS, true);
+        this._labelArea = this._renderArea
+            .append("g")
+            .classed(barPlot_1.Bar._LABEL_AREA_CLASS, true)
+            .classed("label-" + this._labelFontSize, true);
         var context = new Typesettable.SvgContext(this._labelArea.node());
         this._measurer = new Typesettable.CacheMeasurer(context);
         this._writer = new Typesettable.Writer(this._measurer, context);
@@ -210,7 +228,9 @@ var StackedBar = /** @class */ (function (_super) {
     };
     StackedBar.prototype.invalidateCache = function () {
         _super.prototype.invalidateCache.call(this);
-        this._measurer.reset();
+        if (this._measurer != null) {
+            this._measurer.reset();
+        }
     };
     StackedBar._EXTREMA_LABEL_MARGIN_FROM_BAR = 5;
     return StackedBar;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "plottable",
   "description": "A modular charting library built on D3",
-  "version": "3.9.0-dev-56-geb1f7fd",
+  "version": "3.9.0-dev-57-g2333f4e",
   "license": "MIT",
   "repository": {
     "type": "git",

package/plottable.css

@@ -112,11 +112,84 @@
   fill: #32313F;
 }
 
-.plottable .bar-label-text-area text,
-.plottable .scatter-label-text-area text {
+.plottable .tick-label-container.label-12 text,
+.plottable .bar-label-text-area.label-12 text,
+.plottable .scatter-label-text-area.label-12 text {
   font-size: 12px;
 }
 
+.plottable .tick-label-container.label-13 text,
+.plottable .bar-label-text-area.label-13 text,
+.plottable .scatter-label-text-area.label-13 text {
+  font-size: 13px;
+}
+
+.plottable .tick-label-container.label-14 text,
+.plottable .bar-label-text-area.label-14 text,
+.plottable .scatter-label-text-area.label-14 text {
+  font-size: 14px;
+}
+
+.plottable .tick-label-container.label-15 text,
+.plottable .bar-label-text-area.label-15 text,
+.plottable .scatter-label-text-area.label-15 text {
+  font-size: 15px;
+}
+
+.plottable .tick-label-container.label-16 text,
+.plottable .bar-label-text-area.label-16 text,
+.plottable .scatter-label-text-area.label-16 text {
+  font-size: 16px;
+}
+
+.plottable .tick-label-container.label-17 text,
+.plottable .bar-label-text-area.label-17 text,
+.plottable .scatter-label-text-area.label-17 text {
+  font-size: 17px;
+}
+
+.plottable .tick-label-container.label-18 text,
+.plottable .bar-label-text-area.label-18 text,
+.plottable .scatter-label-text-area.label-18 text {
+  font-size: 18px;
+}
+
+.plottable .tick-label-container.label-19 text,
+.plottable .bar-label-text-area.label-19 text,
+.plottable .scatter-label-text-area.label-19 text {
+  font-size: 19px;
+}
+
+.plottable .tick-label-container.label-20 text,
+.plottable .bar-label-text-area.label-20 text,
+.plottable .scatter-label-text-area.label-20 text {
+  font-size: 20px;
+}
+
+.plottable .tick-label-container.label-21 text,
+.plottable .bar-label-text-area.label-21 text,
+.plottable .scatter-label-text-area.label-21 text {
+  font-size: 21px;
+}
+
+.plottable .tick-label-container.label-22 text,
+.plottable .bar-label-text-area.label-22 text,
+.plottable .scatter-label-text-area.label-22 text {
+  font-size: 22px;
+}
+
+.plottable .tick-label-container.label-23 text,
+.plottable .bar-label-text-area.label-23 text,
+.plottable .scatter-label-text-area.label-23 text {
+  font-size: 23px;
+}
+
+.plottable .tick-label-container.label-24 text,
+.plottable .bar-label-text-area.label-24 text,
+.plottable .scatter-label-text-area.label-24 text {
+  font-size: 24px;
+}
+
 .plottable .label-area text {
   fill: #32313F;
   font-size: 14px;