@internetstiftelsen/charts 0.10.0 → 0.10.1

package/dist/xy-chart.js

@@ -114,6 +114,7 @@ export class XYChart extends BaseChart {
     prepareLayout(context) {
         super.prepareLayout(context);
         this.xAxis?.clearEstimatedSpace?.();
+        this.yAxis?.clearEstimatedSpace?.();
         if (this.xAxis) {
             const xKey = this.getXKey();
             const labelKey = this.xAxis.labelKey;
@@ -125,24 +126,59 @@ export class XYChart extends BaseChart {
             });
             this.xAxis.estimateLayoutSpace?.(labels, this.renderTheme, context.svgNode);
         }
+        if (this.yAxis) {
+            this.yAxis.estimateLayoutSpace?.(this.getYAxisEstimateLabels(), this.renderTheme, context.svgNode);
+        }
     }
-    renderChart({ svg, plotGroup, plotArea, }) {
-        this.validateSeriesOrientation();
-        this.series.forEach((series) => {
-            const typeName = this.getSeriesTypeName(series);
-            ChartValidator.validateDataKey(this.data, series.dataKey, typeName);
-            ChartValidator.validateNumericData(this.data, series.dataKey, typeName);
-        });
-        const valueScaleType = this.resolvedScaleConfig.y?.type ?? 'linear';
-        if (valueScaleType === 'log') {
-            this.series.forEach((series) => {
-                const typeName = this.getSeriesTypeName(series);
-                ChartValidator.validatePositiveData(this.data, series.dataKey, typeName);
+    getYAxisEstimateLabels() {
+        if (!this.yAxis) {
+            return [];
+        }
+        const yAxisConfig = this.yAxis.getExportConfig();
+        const { y: yConfig } = this.getResolvedAxisConfigs();
+        const tickFormat = yAxisConfig.tickFormat;
+        if (yConfig.type === 'band') {
+            const tickValues = this.resolveScaleDomain(yConfig, this.isHorizontalOrientation() ? this.getXKey() : null);
+            return tickValues.map((value) => {
+                if (typeof tickFormat === 'function') {
+                    return tickFormat(value);
+                }
+                return String(value);
             });
         }
-        if (this.xAxis?.dataKey) {
-            ChartValidator.validateDataKey(this.data, this.xAxis.dataKey, 'XAxis');
+        const scale = this.createContinuousScaleForLayoutEstimate(yConfig);
+        const tickValues = scale.ticks(5);
+        if (typeof tickFormat === 'function') {
+            return tickValues.map((value) => tickFormat(value));
         }
+        const tickFormatter = scale.tickFormat(5, typeof tickFormat === 'string' ? tickFormat : undefined);
+        return tickValues.map((value) => tickFormatter(value));
+    }
+    createContinuousScaleForLayoutEstimate(config) {
+        const domain = this.resolveScaleDomain(config, null);
+        switch (config.type) {
+            case 'linear': {
+                const scale = scaleLinear()
+                    .domain(domain)
+                    .rangeRound([100, 0]);
+                return config.nice === false ? scale : scale.nice();
+            }
+            case 'time': {
+                const scale = scaleTime()
+                    .domain(domain)
+                    .range([100, 0]);
+                return config.nice === false ? scale : scale.nice();
+            }
+            case 'log': {
+                const scale = scaleLog()
+                    .domain(domain)
+                    .rangeRound([100, 0]);
+                return config.nice === false ? scale : scale.nice();
+            }
+        }
+    }
+    renderChart({ svg, plotGroup, plotArea, }) {
+        this.validateRenderState();
         const xKey = this.getXKey();
         const categoryScaleType = this.getCategoryScaleType();
         const visibleSeries = this.getVisibleSeries();
@@ -152,20 +188,8 @@ export class XYChart extends BaseChart {
             this.grid.render(plotGroup, this.x, this.y, this.renderTheme, this.isHorizontalOrientation());
         }
         this.renderSeries(visibleSeries);
-        if (this.x && this.y) {
-            if (this.xAxis) {
-                this.xAxis.render(svg, this.x, this.renderTheme, plotArea.bottom, this.data);
-            }
-            if (this.yAxis) {
-                this.yAxis.render(svg, this.y, this.renderTheme, plotArea.left);
-            }
-        }
-        if (this.tooltip && this.x && this.y) {
-            const visibleAreaSeries = visibleSeries.filter((series) => series.type === 'area');
-            const areaStackingContextBySeries = this.computeAreaStackingContexts(this.data, xKey, visibleAreaSeries);
-            this.tooltip.initialize(this.renderTheme);
-            this.tooltip.attachToArea(svg, this.data, visibleSeries, xKey, this.x, this.y, this.renderTheme, plotArea, this.parseValue.bind(this), this.isHorizontalOrientation(), categoryScaleType, (series, dataPoint) => this.getSeriesTooltipValue(series, dataPoint, xKey, areaStackingContextBySeries));
-        }
+        this.renderAxes(svg, plotArea);
+        this.attachTooltip(svg, plotArea, visibleSeries, xKey, categoryScaleType);
         this.renderInlineLegend(svg);
     }
     getXKey() {
@@ -487,6 +511,84 @@ export class XYChart extends BaseChart {
         const scaleType = config.type;
         const [rangeStart, rangeEnd] = this.getScaleRange(axis, scaleType, config.reverse ?? false);
         const domain = this.resolveScaleDomain(config, dataKey);
+        this.validateExplicitBarValueDomain(config, dataKey, scaleType, domain);
+        this.validateScaleDomain(scaleType, domain);
+        return this.buildScale(scaleType, domain, [rangeStart, rangeEnd], config);
+    }
+    resolveScaleDomain(config, dataKey) {
+        const buckets = this.getSeriesBuckets();
+        const stackedAreaGroups = this.getStackedAreaGroups(buckets.areaSeries);
+        if (this.isBarValueScale(config.type, dataKey, buckets.barSeries) &&
+            config.type === 'log') {
+            throw new ChartValidationError('XYChart: bar series require a linear value axis because bars need a zero baseline');
+        }
+        const domain = this.resolveRawScaleDomain(config, dataKey, buckets, stackedAreaGroups);
+        return this.applyNiceDomain(config, domain);
+    }
+    getSeriesTooltipValue(series, dataPoint, xKey, areaStackingContextBySeries) {
+        const rawValue = dataPoint[series.dataKey];
+        if (rawValue === null || rawValue === undefined) {
+            return NaN;
+        }
+        const parsedValue = this.parseValue(rawValue);
+        if (!Number.isFinite(parsedValue)) {
+            return NaN;
+        }
+        if (series.type === 'bar') {
+            return series.getRenderedValue(parsedValue, this.orientation);
+        }
+        if (series.type !== 'area') {
+            return parsedValue;
+        }
+        return this.getAreaTooltipValue(dataPoint, xKey, parsedValue, areaStackingContextBySeries.get(series));
+    }
+    validateRenderState() {
+        this.validateSeriesOrientation();
+        this.validateSeriesData();
+        this.validateValueScaleRequirements();
+        this.validateXAxisDataKey();
+    }
+    validateSeriesData() {
+        this.series.forEach((series) => {
+            const typeName = this.getSeriesTypeName(series);
+            ChartValidator.validateDataKey(this.data, series.dataKey, typeName);
+            ChartValidator.validateNumericData(this.data, series.dataKey, typeName);
+        });
+    }
+    validateValueScaleRequirements() {
+        if ((this.resolvedScaleConfig.y?.type ?? 'linear') !== 'log') {
+            return;
+        }
+        this.series.forEach((series) => {
+            ChartValidator.validatePositiveData(this.data, series.dataKey, this.getSeriesTypeName(series));
+        });
+    }
+    validateXAxisDataKey() {
+        if (this.xAxis?.dataKey) {
+            ChartValidator.validateDataKey(this.data, this.xAxis.dataKey, 'XAxis');
+        }
+    }
+    renderAxes(svg, plotArea) {
+        if (!this.x || !this.y) {
+            return;
+        }
+        if (this.xAxis) {
+            this.xAxis.render(svg, this.x, this.renderTheme, plotArea.bottom, this.data);
+        }
+        if (this.yAxis) {
+            this.yAxis.render(svg, this.y, this.renderTheme, plotArea.left);
+        }
+    }
+    attachTooltip(svg, plotArea, visibleSeries, xKey, categoryScaleType) {
+        if (!this.tooltip || !this.x || !this.y) {
+            return;
+        }
+        const visibleAreaSeries = visibleSeries.filter((series) => series.type === 'area');
+        const areaStackingContextBySeries = this.computeAreaStackingContexts(this.data, xKey, visibleAreaSeries);
+        this.tooltip.initialize(this.renderTheme);
+        this.tooltip.attachToArea(svg, this.data, visibleSeries, xKey, this.x, this.y, this.renderTheme, plotArea, this.parseValue.bind(this), this.isHorizontalOrientation(), categoryScaleType, (series, dataPoint) => this.getSeriesTooltipValue(series, dataPoint, xKey, areaStackingContextBySeries));
+    }
+    validateExplicitBarValueDomain(config, dataKey, scaleType, domain) {
         if (dataKey === null &&
             this.series.some((series) => series.type === 'bar') &&
             (scaleType === 'linear' || scaleType === 'log') &&
@@ -495,133 +597,154 @@ export class XYChart extends BaseChart {
                 config.max !== undefined)) {
             ChartValidator.validateBarDomainIncludesZero(domain);
         }
+    }
+    validateScaleDomain(scaleType, domain) {
         if (scaleType === 'log') {
             ChartValidator.validateScaleConfig(scaleType, domain);
         }
+    }
+    buildScale(scaleType, domain, range, config) {
         switch (scaleType) {
-            case 'band': {
-                const scale = scaleBand()
+            case 'band':
+                return scaleBand()
                     .domain(domain)
-                    .rangeRound([rangeStart, rangeEnd]);
-                if (config.padding !== undefined) {
-                    scale.paddingInner(config.padding);
-                }
-                else {
-                    scale.paddingInner(0.1);
-                }
-                return scale;
-            }
+                    .rangeRound(range)
+                    .paddingInner(config.padding ?? 0.1);
             case 'linear': {
                 const scale = scaleLinear()
                     .domain(domain)
-                    .rangeRound([rangeStart, rangeEnd]);
+                    .rangeRound(range);
                 return config.nice === false ? scale : scale.nice();
             }
             case 'time': {
                 const scale = scaleTime()
                     .domain(domain)
-                    .range([rangeStart, rangeEnd]);
+                    .range(range);
                 return config.nice === false ? scale : scale.nice();
             }
             case 'log': {
                 const scale = scaleLog()
                     .domain(domain)
-                    .rangeRound([rangeStart, rangeEnd]);
+                    .rangeRound(range);
                 return config.nice === false ? scale : scale.nice();
             }
             default:
                 throw new Error(`Unsupported scale type: ${scaleType}`);
         }
     }
-    resolveScaleDomain(config, dataKey) {
-        const barSeries = this.series.filter((s) => s.type === 'bar');
-        const lineSeries = this.series.filter((s) => s.type === 'line');
-        const scatterSeries = this.series.filter((s) => s.type === 'scatter');
-        const areaSeries = this.series.filter((s) => s.type === 'area');
-        const stackedAreaGroups = this.getStackedAreaGroups(areaSeries);
-        const isBarValueScale = dataKey === null &&
+    getSeriesBuckets() {
+        return {
+            barSeries: this.series.filter((s) => s.type === 'bar'),
+            lineSeries: this.series.filter((s) => s.type === 'line'),
+            scatterSeries: this.series.filter((s) => s.type === 'scatter'),
+            areaSeries: this.series.filter((s) => s.type === 'area'),
+        };
+    }
+    isBarValueScale(scaleType, dataKey, barSeries) {
+        return (dataKey === null &&
             barSeries.length > 0 &&
-            (config.type === 'linear' || config.type === 'log');
-        let domain;
-        if (isBarValueScale && config.type === 'log') {
-            throw new ChartValidationError('XYChart: bar series require a linear value axis because bars need a zero baseline');
-        }
+            (scaleType === 'linear' || scaleType === 'log'));
+    }
+    resolveRawScaleDomain(config, dataKey, buckets, stackedAreaGroups) {
         if (config.domain) {
-            domain = config.domain;
-        }
-        else if (config.type === 'band' && dataKey) {
-            domain = this.buildBandDomainWithGroupGaps(dataKey, config.groupGap ?? 0);
-        }
-        else if (config.type === 'time' && dataKey) {
-            domain = [
-                min(this.data, (d) => resolveScaleValue(d[dataKey], 'time')),
-                max(this.data, (d) => resolveScaleValue(d[dataKey], 'time')),
-            ];
-        }
-        else if ((config.type === 'linear' || config.type === 'log') &&
-            dataKey) {
-            const values = this.data
-                .map((d) => this.parseValue(d[dataKey]))
-                .filter((value) => Number.isFinite(value));
-            const minVal = config.min ?? min(values) ?? 0;
-            const maxVal = config.max ?? max(values) ?? 100;
-            domain = [minVal, maxVal];
+            return config.domain;
         }
-        else {
-            const hasPercentBars = this.barStackMode === 'percent' && barSeries.length > 0;
-            const hasPercentAreas = this.areaStackMode === 'percent' && stackedAreaGroups.size > 0;
-            if (hasPercentBars || hasPercentAreas) {
-                let minDomain = 0;
-                let maxDomain = 100;
-                if (hasPercentBars) {
-                    [minDomain, maxDomain] = this.getBarValueDomain(this.getXKey(), barSeries);
-                }
-                if (hasPercentAreas) {
-                    minDomain = Math.min(minDomain, 0);
-                    maxDomain = Math.max(maxDomain, 100);
-                }
-                domain = [minDomain, maxDomain];
-            }
-            else {
-                const values = this.collectSeriesValues([
-                    ...lineSeries,
-                    ...scatterSeries,
-                    ...areaSeries,
-                ]);
-                const stackedValues = [];
-                const minCandidates = [...values];
-                const maxCandidates = [...values];
-                if (barSeries.length > 0) {
-                    const [barMin, barMax] = this.getBarValueDomain(this.getXKey(), barSeries);
-                    minCandidates.push(barMin);
-                    maxCandidates.push(barMax);
-                }
-                const stackedAreaKeys = new Set();
-                stackedAreaGroups.forEach((stackSeries) => {
-                    stackSeries.forEach((series) => {
-                        stackedAreaKeys.add(series.dataKey);
-                    });
-                    this.data.forEach((dataPoint) => {
-                        const total = stackSeries.reduce((sum, series) => {
-                            const value = this.parseValue(dataPoint[series.dataKey]);
-                            return Number.isFinite(value) ? sum + value : sum;
-                        }, 0);
-                        stackedValues.push(total);
-                    });
-                    minCandidates.push(0);
-                });
-                areaSeries
-                    .filter((series) => !stackedAreaKeys.has(series.dataKey))
-                    .forEach((series) => {
-                    minCandidates.push(series.baseline);
-                });
-                const minVal = config.min ?? min(minCandidates) ?? 0;
-                const maxVal = config.max ??
-                    max([...maxCandidates, ...stackedValues]) ??
-                    100;
-                domain = [minVal, maxVal];
-            }
+        if (config.type === 'band' && dataKey) {
+            return this.buildBandDomainWithGroupGaps(dataKey, config.groupGap ?? 0);
+        }
+        if (config.type === 'time' && dataKey) {
+            return this.resolveTimeDomain(dataKey);
+        }
+        if ((config.type === 'linear' || config.type === 'log') && dataKey) {
+            return this.resolveNumericDataKeyDomain(config, dataKey);
         }
+        return this.resolveSeriesValueDomain(config, buckets, stackedAreaGroups);
+    }
+    resolveTimeDomain(dataKey) {
+        return [
+            min(this.data, (d) => resolveScaleValue(d[dataKey], 'time')),
+            max(this.data, (d) => resolveScaleValue(d[dataKey], 'time')),
+        ];
+    }
+    resolveNumericDataKeyDomain(config, dataKey) {
+        const values = this.data
+            .map((d) => this.parseValue(d[dataKey]))
+            .filter((value) => Number.isFinite(value));
+        return [
+            config.min ?? min(values) ?? 0,
+            config.max ?? max(values) ?? 100,
+        ];
+    }
+    resolveSeriesValueDomain(config, buckets, stackedAreaGroups) {
+        if (this.hasPercentValueDomain(buckets.barSeries, stackedAreaGroups)) {
+            return this.resolvePercentValueDomain(buckets.barSeries, stackedAreaGroups);
+        }
+        return this.resolveStandardValueDomain(config, buckets, stackedAreaGroups);
+    }
+    hasPercentValueDomain(barSeries, stackedAreaGroups) {
+        return ((this.barStackMode === 'percent' && barSeries.length > 0) ||
+            (this.areaStackMode === 'percent' && stackedAreaGroups.size > 0));
+    }
+    resolvePercentValueDomain(barSeries, stackedAreaGroups) {
+        let minDomain = 0;
+        let maxDomain = 100;
+        if (this.barStackMode === 'percent' && barSeries.length > 0) {
+            [minDomain, maxDomain] = this.getBarValueDomain(this.getXKey(), barSeries);
+        }
+        if (this.areaStackMode === 'percent' && stackedAreaGroups.size > 0) {
+            minDomain = Math.min(minDomain, 0);
+            maxDomain = Math.max(maxDomain, 100);
+        }
+        return [minDomain, maxDomain];
+    }
+    resolveStandardValueDomain(config, buckets, stackedAreaGroups) {
+        const values = this.collectSeriesValues([
+            ...buckets.lineSeries,
+            ...buckets.scatterSeries,
+            ...buckets.areaSeries,
+        ]);
+        const minCandidates = [...values];
+        const maxCandidates = [...values];
+        const stackedValues = this.collectStackedAreaTotals(stackedAreaGroups);
+        if (buckets.barSeries.length > 0) {
+            const [barMin, barMax] = this.getBarValueDomain(this.getXKey(), buckets.barSeries);
+            minCandidates.push(barMin);
+            maxCandidates.push(barMax);
+        }
+        this.addAreaBaselines(minCandidates, buckets.areaSeries, stackedAreaGroups);
+        return [
+            config.min ?? min(minCandidates) ?? 0,
+            config.max ?? max([...maxCandidates, ...stackedValues]) ?? 100,
+        ];
+    }
+    collectStackedAreaTotals(stackedAreaGroups) {
+        const stackedValues = [];
+        stackedAreaGroups.forEach((stackSeries) => {
+            this.data.forEach((dataPoint) => {
+                const total = stackSeries.reduce((sum, series) => {
+                    const value = this.parseValue(dataPoint[series.dataKey]);
+                    return Number.isFinite(value) ? sum + value : sum;
+                }, 0);
+                stackedValues.push(total);
+            });
+        });
+        return stackedValues;
+    }
+    addAreaBaselines(minCandidates, areaSeries, stackedAreaGroups) {
+        const stackedAreaKeys = new Set();
+        stackedAreaGroups.forEach((stackSeries) => {
+            stackSeries.forEach((series) => {
+                stackedAreaKeys.add(series.dataKey);
+            });
+            minCandidates.push(0);
+        });
+        areaSeries
+            .filter((series) => !stackedAreaKeys.has(series.dataKey))
+            .forEach((series) => {
+            minCandidates.push(series.baseline);
+        });
+    }
+    applyNiceDomain(config, domain) {
         if (config.nice === false) {
             return domain;
         }
@@ -645,22 +768,7 @@ export class XYChart extends BaseChart {
         }
         return domain;
     }
-    getSeriesTooltipValue(series, dataPoint, xKey, areaStackingContextBySeries) {
-        const rawValue = dataPoint[series.dataKey];
-        if (rawValue === null || rawValue === undefined) {
-            return NaN;
-        }
-        const parsedValue = this.parseValue(rawValue);
-        if (!Number.isFinite(parsedValue)) {
-            return NaN;
-        }
-        if (series.type !== 'area') {
-            if (series.type === 'bar') {
-                return series.getRenderedValue(parsedValue, this.orientation);
-            }
-            return parsedValue;
-        }
-        const stackingContext = areaStackingContextBySeries.get(series);
+    getAreaTooltipValue(dataPoint, xKey, parsedValue, stackingContext) {
         if (!stackingContext || stackingContext.mode === 'none') {
             return parsedValue;
         }

package/dist/y-axis.d.ts

@@ -5,12 +5,14 @@ export declare class YAxis implements LayoutAwareComponent<YAxisConfigBase> {
     readonly type: "yAxis";
     readonly display: boolean;
     private readonly tickPadding;
-    private readonly fontSize;
-    private readonly maxLabelWidth;
+    private fontSize;
+    private readonly maxLabelWidth?;
     private readonly tickFormat;
     private readonly rotatedLabels;
     private readonly oversizedBehavior;
+    private estimatedWidth;
     readonly exportHooks?: ExportHooks<YAxisConfigBase>;
+    private resolveFontSizeValue;
     constructor(config?: YAxisConfig);
     getExportConfig(): YAxisConfigBase;
     createExportComponent(override?: Partial<YAxisConfigBase>): LayoutAwareComponent<YAxisConfigBase>;
@@ -18,8 +20,11 @@ export declare class YAxis implements LayoutAwareComponent<YAxisConfigBase> {
      * Returns the space required by the y-axis
      */
     getRequiredSpace(): ComponentSpace;
+    estimateLayoutSpace(labels: unknown[], theme: ChartTheme, svg: SVGSVGElement): void;
+    clearEstimatedSpace(): void;
     render(svg: Selection<SVGSVGElement, undefined, null, undefined>, y: D3Scale, theme: ChartTheme, xPosition: number): void;
     private applyLabelConstraints;
+    private measureLabelDimensions;
     private wrapTextElement;
     private addTitleTooltip;
 }

package/dist/y-axis.js

@@ -1,6 +1,18 @@
 import { axisLeft } from 'd3';
 import { measureTextWidth, truncateText, wrapText, mergeDeep } from './utils.js';
 export class YAxis {
+    resolveFontSizeValue(fontSize, fallback) {
+        if (typeof fontSize === 'number' && Number.isFinite(fontSize)) {
+            return fontSize;
+        }
+        if (typeof fontSize === 'string') {
+            const parsedFontSize = parseFloat(fontSize);
+            if (Number.isFinite(parsedFontSize)) {
+                return parsedFontSize;
+            }
+        }
+        return fallback;
+    }
     constructor(config) {
         Object.defineProperty(this, "type", {
             enumerable: true,
@@ -50,18 +62,25 @@ export class YAxis {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "estimatedWidth", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
         Object.defineProperty(this, "exportHooks", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
-        this.display = config?.display ?? true;
-        this.tickFormat = config?.tickFormat ?? null;
-        this.rotatedLabels = config?.rotatedLabels ?? false;
-        this.maxLabelWidth = config?.maxLabelWidth ?? 40; // Default 40 for backward compatibility
-        this.oversizedBehavior = config?.oversizedBehavior ?? 'truncate';
-        this.exportHooks = config?.exportHooks;
+        const { display = true, tickFormat = null, rotatedLabels = false, maxLabelWidth, oversizedBehavior = 'truncate', exportHooks, } = config ?? {};
+        this.display = display;
+        this.tickFormat = tickFormat;
+        this.rotatedLabels = rotatedLabels;
+        this.maxLabelWidth = maxLabelWidth;
+        this.oversizedBehavior = oversizedBehavior;
+        this.exportHooks = exportHooks;
     }
     getExportConfig() {
         return {
@@ -90,20 +109,54 @@ export class YAxis {
                 position: 'left',
             };
         }
-        // Width = max label width + tick padding
-        // Rotated labels need less width (cos(45°) ≈ 0.7 of horizontal width)
-        const baseWidth = this.maxLabelWidth + this.tickPadding;
-        const width = this.rotatedLabels ? baseWidth * 0.7 : baseWidth;
+        if (this.estimatedWidth !== null) {
+            return {
+                width: this.estimatedWidth,
+                height: 0,
+                position: 'left',
+            };
+        }
+        const fallbackLabelWidth = this.maxLabelWidth ?? this.fontSize;
+        const width = fallbackLabelWidth + this.tickPadding;
         return {
             width,
             height: 0, // Y-axis spans full height
             position: 'left',
         };
     }
+    estimateLayoutSpace(labels, theme, svg) {
+        if (!labels.length) {
+            this.estimatedWidth = 0;
+            return;
+        }
+        this.fontSize = this.resolveFontSizeValue(theme.axis.fontSize, this.fontSize);
+        const fontSize = this.fontSize;
+        const fontFamily = theme.axis.fontFamily;
+        const fontWeight = theme.axis.fontWeight || 'normal';
+        let maxWidth = 0;
+        let maxHeight = 0;
+        for (const label of labels) {
+            const text = String(label ?? '');
+            if (!text)
+                continue;
+            const { width, height } = this.measureLabelDimensions(text, fontSize, fontFamily, fontWeight, svg);
+            maxWidth = Math.max(maxWidth, width);
+            maxHeight = Math.max(maxHeight, height);
+        }
+        const radians = Math.PI / 4;
+        const labelFootprint = this.rotatedLabels
+            ? Math.cos(radians) * maxWidth + Math.sin(radians) * maxHeight
+            : maxWidth;
+        this.estimatedWidth = this.tickPadding + labelFootprint;
+    }
+    clearEstimatedSpace() {
+        this.estimatedWidth = null;
+    }
     render(svg, y, theme, xPosition) {
         if (!this.display) {
             return;
         }
+        this.fontSize = this.resolveFontSizeValue(theme.axis.fontSize, this.fontSize);
         const axis = axisLeft(y).tickSize(0).tickPadding(this.tickPadding);
         // Apply tick formatting if specified
         if (this.tickFormat) {
@@ -138,6 +191,9 @@ export class YAxis {
         axisGroup.selectAll('.domain').remove();
     }
     applyLabelConstraints(axisGroup, svg, fontSize, fontFamily, fontWeight) {
+        if (this.maxLabelWidth === undefined) {
+            return;
+        }
         const maxWidth = this.maxLabelWidth;
         const behavior = this.oversizedBehavior;
         axisGroup
@@ -170,6 +226,39 @@ export class YAxis {
             }
         });
     }
+    measureLabelDimensions(text, fontSize, fontFamily, fontWeight, svg) {
+        const textWidth = measureTextWidth(text, fontSize, fontFamily, fontWeight, svg);
+        const lineHeight = fontSize * 1.2;
+        if (this.maxLabelWidth === undefined ||
+            textWidth <= this.maxLabelWidth) {
+            return {
+                width: textWidth,
+                height: fontSize,
+            };
+        }
+        switch (this.oversizedBehavior) {
+            case 'truncate':
+                return {
+                    width: this.maxLabelWidth,
+                    height: fontSize,
+                };
+            case 'wrap': {
+                const lines = wrapText(text, this.maxLabelWidth, fontSize, fontFamily, fontWeight, svg);
+                const widestLine = lines.reduce((widest, line) => {
+                    return Math.max(widest, measureTextWidth(line, fontSize, fontFamily, fontWeight, svg));
+                }, 0);
+                return {
+                    width: widestLine,
+                    height: Math.max(lines.length, 1) * lineHeight,
+                };
+            }
+            case 'hide':
+                return {
+                    width: 0,
+                    height: 0,
+                };
+        }
+    }
     wrapTextElement(textEl, lines, originalText) {
         // Clear existing content
         textEl.textContent = '';