@internetstiftelsen/charts 0.20.1 → 0.21.1

package/dist/base-chart.d.ts

@@ -208,7 +208,7 @@ export declare abstract class BaseChart {
     protected prepareForLegendChange(): void;
     protected initializeDataState(): void;
     protected prepareLayout(context: BaseLayoutContext): void;
-    private applyPlotAreaOverride;
+    protected applyPlotAreaOverride(plotArea: PlotAreaBounds): PlotAreaBounds;
     /**
      * Setup ResizeObserver for automatic resize handling
      */

package/dist/chart-interface.d.ts

@@ -11,6 +11,11 @@ export type ComponentSpace = {
     width: number;
     height: number;
     position: 'top' | 'bottom' | 'left' | 'right';
+    /** Minimum chart-edge space required for labels extending sideways. */
+    minMargins?: {
+        left: number;
+        right: number;
+    };
 };
 export interface LayoutAwareComponentBase extends ChartComponentBase {
     getRequiredSpace(theme?: ChartTheme): ComponentSpace;

package/dist/layout-manager.js

@@ -52,6 +52,13 @@ export class LayoutManager {
                     break;
             }
         }
+        for (const component of components) {
+            const minMargins = component.getRequiredSpace(this.theme).minMargins;
+            if (minMargins) {
+                marginLeft = Math.max(marginLeft, minMargins.left);
+                marginRight = Math.max(marginRight, minMargins.right);
+            }
+        }
         // Calculate plot area bounds
         this.plotBounds = {
             left: marginLeft,

package/dist/tooltip/dom.d.ts

@@ -11,6 +11,7 @@ type ResolvedTooltipStyle = ChartTheme['tooltip'] & {
 };
 export type TooltipStyleOverrides = Partial<Pick<ResolvedTooltipStyle, 'background' | 'border' | 'color' | 'connectorColor'>>;
 export declare class TooltipDom {
+    private static activeTooltip;
     private readonly id;
     private readonly splitTooltipOwner;
     private readonly maxWidth;
@@ -20,6 +21,7 @@ export declare class TooltipDom {
     private readonly tooltipPositionResetTimeoutIds;
     private readonly tooltipStyles;
     private tooltipDiv;
+    private hideListener;
     constructor(config: TooltipDomConfig);
     initialize(theme: ChartTheme): void;
     getRootTooltip(): TooltipDivSelection | null;
@@ -28,8 +30,10 @@ export declare class TooltipDom {
     getBounds(): DOMRect | null;
     showAt(left: number, top: number): void;
     hasVisibleTooltips(): boolean;
+    activate(): void;
+    setHideListener(listener: (() => void) | null): void;
     moveVisibleTooltips(deltaX: number, deltaY: number): void;
-    hide(): void;
+    hide(immediate?: boolean): void;
     cleanup(): void;
     measureTooltip(tooltip: TooltipDivSelection, content: string): {
         width: number;

package/dist/tooltip/dom.js

@@ -58,6 +58,12 @@ export class TooltipDom {
             writable: true,
             value: null
         });
+        Object.defineProperty(this, "hideListener", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
         this.id = config.id;
         this.splitTooltipOwner = config.splitTooltipOwner;
         this.maxWidth = config.maxWidth;
@@ -111,6 +117,16 @@ export class TooltipDom {
     hasVisibleTooltips() {
         return this.getTooltipNodes().some((node) => this.isTooltipVisible(node));
     }
+    activate() {
+        if (TooltipDom.activeTooltip === this) {
+            return;
+        }
+        TooltipDom.activeTooltip?.hide(true);
+        TooltipDom.activeTooltip = this;
+    }
+    setHideListener(listener) {
+        this.hideListener = listener;
+    }
     moveVisibleTooltips(deltaX, deltaY) {
         this.getTooltipNodes().forEach((node) => {
             if (!this.isTooltipVisible(node)) {
@@ -124,14 +140,19 @@ export class TooltipDom {
             node.style.top = `${position.top + deltaY}px`;
         });
     }
-    hide() {
-        const tooltip = this.tooltipDiv ?? select(`#${this.id}`);
-        if (!tooltip.empty()) {
-            this.hideTooltipSelection(tooltip);
-        }
-        this.hideSplitTooltips();
+    hide(immediate = false) {
+        this.hideListener?.();
+        this.getTooltipNodes().forEach((node) => {
+            this.hideTooltipElement(node, immediate);
+        });
+        // Retain ownership during fade-out so the next chart can hide it immediately.
     }
     cleanup() {
+        this.hide(true);
+        this.hideListener = null;
+        if (TooltipDom.activeTooltip === this) {
+            TooltipDom.activeTooltip = null;
+        }
         this.removeRootTooltip();
         this.removeSplitTooltips();
         this.tooltipDiv = null;
@@ -311,6 +332,7 @@ export class TooltipDom {
         if (!node) {
             return;
         }
+        this.activate();
         this.cancelTooltipPositionReset(node);
         tooltip.style('visibility', 'visible');
         if (!this.transition.show) {
@@ -324,7 +346,7 @@ export class TooltipDom {
         }
         this.slideTooltipFromOffset(node, slideOffset);
     }
-    hideTooltipElement(node) {
+    hideTooltipElement(node, immediate = false) {
         const wasVisible = this.isTooltipVisible(node);
         this.cancelTooltipPositionReset(node);
         this.cancelTooltipTransitionFrame(node);
@@ -333,10 +355,10 @@ export class TooltipDom {
             this.resetTooltipPosition(node);
             return;
         }
-        node.style.visibility = 'visible';
+        node.style.visibility = wasVisible && !immediate ? 'visible' : 'hidden';
         node.style.opacity = '0';
         node.style.transform = TOOLTIP_HIDDEN_TRANSFORM;
-        if (!wasVisible) {
+        if (!wasVisible || immediate) {
             this.resetTooltipPosition(node);
             return;
         }
@@ -517,3 +539,9 @@ export class TooltipDom {
         }
     }
 }
+Object.defineProperty(TooltipDom, "activeTooltip", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: null
+});

package/dist/tooltip/xy-interaction.js

@@ -378,16 +378,11 @@ export function attachXYTooltipArea(config) {
         updateTooltipPosition();
         positionTrackingFrame = requestFrame(trackTooltipPosition);
     };
-    const hideTooltip = () => {
-        stopPositionTracking();
-        dom.hideTooltipSelection(tooltip);
-        dom.hideSplitTooltips();
-        clearVisualState();
-    };
     const renderTooltip = (request) => {
         if (!tooltipSvgNode) {
             return;
         }
+        dom.activate();
         activeSvgBounds = getElementTooltipBounds(tooltipSvgNode);
         if (positionTrackingFrame === null) {
             positionTrackingFrame = requestFrame(trackTooltipPosition);
@@ -403,8 +398,14 @@ export function attachXYTooltipArea(config) {
         showSharedTooltipAtIndex(request.index);
     };
     const queuedRender = createQueuedTooltipRender(tooltipSvgNode, renderTooltip);
+    dom.setHideListener(() => {
+        queuedRender.cancel();
+        stopPositionTracking();
+        clearVisualState();
+    });
     overlay
         .on('mousemove', (event) => {
+        dom.activate();
         const [mouseX, mouseY] = pointer(event, svg.node());
         const closestIndex = getClosestIndexFromPointer(mouseX, mouseY, dataPointPositions, isHorizontal);
         const pointerPosition = getDocumentPointerPosition(event);
@@ -418,8 +419,7 @@ export function attachXYTooltipArea(config) {
         if (isTooltipFocusTarget(document.activeElement)) {
             return;
         }
-        queuedRender.cancel();
-        hideTooltip();
+        dom.hide();
     });
     const focusTargets = svg
         .append('g')
@@ -455,8 +455,7 @@ export function attachXYTooltipArea(config) {
         if (isTooltipFocusTarget(event.relatedTarget)) {
             return;
         }
-        queuedRender.cancel();
-        hideTooltip();
+        dom.hide();
     })
         .on('keydown', function (event) {
         const currentIndex = focusTargetNodes.indexOf(this);
@@ -475,6 +474,7 @@ export function attachXYTooltipArea(config) {
         detachScrollListeners?.();
         queuedRender.cancel();
         stopPositionTracking();
+        dom.setHideListener(null);
     };
 }
 function normalizeFormatterValue(value) {

package/dist/types.d.ts

@@ -274,10 +274,17 @@ export type XAxisConfigBase = {
     groupLabelMaxWidth?: number;
     groupLabelOversizedBehavior?: LabelOversizedBehavior;
     rotatedLabels?: boolean;
+    /** Reserve side margins for rotated category labels. Default: true. */
+    autoLabelMargins?: boolean;
+    /** Overrides automatic width for unrotated category labels; also caps numeric/time labels. */
     maxLabelWidth?: number;
+    /** Automatically size category labels when maxLabelWidth is omitted. Default: true. */
+    autoMaxLabelWidth?: boolean;
+    /** Handling for labels exceeding their available width. Default: 'truncate'. */
     oversizedBehavior?: LabelOversizedBehavior;
     tickFormat?: string | AxisTickFormatter | null;
     autoHideOverlapping?: boolean;
+    /** Gap for automatic category-label sizing and overlap hiding. Default: 8px. */
     minLabelGap?: number;
     preserveEndLabels?: boolean;
 };
@@ -288,7 +295,11 @@ export type YAxisConfigBase = {
     display?: boolean;
     tickFormat?: string | AxisTickFormatter | null;
     rotatedLabels?: boolean;
+    /** Overrides the automatic category-axis budget (one third of inner chart width, less tick padding). */
     maxLabelWidth?: number;
+    /** Automatically size category labels when maxLabelWidth is omitted. Default: true. */
+    autoMaxLabelWidth?: boolean;
+    /** Handling for labels exceeding their available width. Default: 'truncate'. */
     oversizedBehavior?: LabelOversizedBehavior;
 };
 export type YAxisConfig = YAxisConfigBase & {

package/dist/x-axis.d.ts

@@ -1,4 +1,5 @@
-import { type Selection } from 'd3';
+import { type ScaleBand, type Selection } from 'd3';
+import type { PlotAreaBounds } from './layout-manager.js';
 import type { XAxisConfig, ChartTheme, D3Scale, DataItem, ExportHooks, XAxisConfigBase } from './types.js';
 import type { LayoutAwareComponent, ComponentSpace } from './chart-interface.js';
 export declare class XAxis implements LayoutAwareComponent<XAxisConfigBase> {
@@ -12,9 +13,12 @@ export declare class XAxis implements LayoutAwareComponent<XAxisConfigBase> {
     private readonly groupLabelMaxWidth?;
     private readonly groupLabelOversizedBehavior;
     private readonly rotatedLabels;
+    private readonly autoLabelMargins;
+    private estimatedSideMargins?;
     private readonly tickPadding;
     private fontSize;
     private readonly maxLabelWidth?;
+    private readonly autoMaxLabelWidth;
     private readonly oversizedBehavior;
     private readonly tickFormat;
     private wrapLineCount;
@@ -34,7 +38,13 @@ export declare class XAxis implements LayoutAwareComponent<XAxisConfigBase> {
      * Returns the space required by the x-axis
      */
     getRequiredSpace(): ComponentSpace;
-    estimateLayoutSpace(labels: unknown[], theme: ChartTheme, svg: SVGSVGElement, data?: DataItem[], estimatedXAxisRangeWidth?: number): void;
+    estimateLayoutSpace(labels: unknown[], theme: ChartTheme, svg: SVGSVGElement, data?: DataItem[], estimatedXAxisRangeWidth?: number, categoryScale?: D3Scale): void;
+    private getEstimateLabels;
+    estimateSideMargins(scale: ScaleBand<string> | undefined, theme: ChartTheme, svg: SVGSVGElement, data: DataItem[], plotArea: PlotAreaBounds, chartWidth: number): {
+        left: number;
+        right: number;
+    } | undefined;
+    private resolveSideMargins;
     clearEstimatedSpace(): void;
     private getTickLabelVerticalFootprint;
     render(svg: Selection<SVGSVGElement, undefined, null, undefined>, x: D3Scale, theme: ChartTheme, yPosition: number, data?: DataItem[]): void;
@@ -42,6 +52,7 @@ export declare class XAxis implements LayoutAwareComponent<XAxisConfigBase> {
     private renderGroupLabels;
     private buildGroupRanges;
     private applyLabelConstraints;
+    private getAutomaticLabelWidths;
     private applyGroupLabelConstraints;
     private resolveGroupLabelMaxWidth;
     private wrapTextElement;
@@ -54,7 +65,6 @@ export declare class XAxis implements LayoutAwareComponent<XAxisConfigBase> {
     private getLabelBlockHeight;
     private setEstimatedDimensions;
     private createAxisGenerator;
-    private applyAxisTextConstraints;
     private applyLabelRotation;
     private resolveGroupRangeInput;
     private resolveGroupLabelKey;

package/dist/x-axis.js

@@ -1,4 +1,4 @@
-import { axisBottom } from 'd3';
+import { axisBottom, select } from 'd3';
 import { measureTextWidth, truncateText, wrapText, mergeDeep } from './utils.js';
 import { GROUPED_CATEGORY_ID_KEY, GROUPED_CATEGORY_LABEL_KEY, GROUPED_GAP_TICK_PREFIX, GROUPED_GROUP_LABEL_KEY, } from './grouped-data.js';
 const GROUP_LABEL_HORIZONTAL_PADDING = 4;
@@ -8,6 +8,8 @@ const DEFAULT_X_AXIS_CONFIG = {
     groupLabelGap: 10,
     groupLabelOversizedBehavior: 'truncate',
     rotatedLabels: false,
+    autoLabelMargins: true,
+    autoMaxLabelWidth: true,
     oversizedBehavior: 'truncate',
     tickFormat: null,
     autoHideOverlapping: false,
@@ -101,6 +103,18 @@ export class XAxis {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "autoLabelMargins", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "estimatedSideMargins", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "tickPadding", {
             enumerable: true,
             configurable: true,
@@ -119,6 +133,12 @@ export class XAxis {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "autoMaxLabelWidth", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "oversizedBehavior", {
             enumerable: true,
             configurable: true,
@@ -193,7 +213,9 @@ export class XAxis {
         this.groupLabelOversizedBehavior =
             resolvedConfig.groupLabelOversizedBehavior;
         this.rotatedLabels = resolvedConfig.rotatedLabels;
+        this.autoLabelMargins = resolvedConfig.autoLabelMargins;
         this.maxLabelWidth = resolvedConfig.maxLabelWidth;
+        this.autoMaxLabelWidth = resolvedConfig.autoMaxLabelWidth;
         this.oversizedBehavior = resolvedConfig.oversizedBehavior;
         this.tickFormat = resolvedConfig.tickFormat;
         this.autoHideOverlapping = resolvedConfig.autoHideOverlapping;
@@ -212,7 +234,9 @@ export class XAxis {
             groupLabelMaxWidth: this.groupLabelMaxWidth,
             groupLabelOversizedBehavior: this.groupLabelOversizedBehavior,
             rotatedLabels: this.rotatedLabels,
+            autoLabelMargins: this.autoLabelMargins,
             maxLabelWidth: this.maxLabelWidth,
+            autoMaxLabelWidth: this.autoMaxLabelWidth,
             oversizedBehavior: this.oversizedBehavior,
             tickFormat: this.tickFormat,
             autoHideOverlapping: this.autoHideOverlapping,
@@ -243,6 +267,7 @@ export class XAxis {
                 width: 0,
                 height: this.estimatedHeight,
                 position: 'bottom',
+                minMargins: this.estimatedSideMargins,
             };
         }
         // Height = tick padding + font size + some extra space for descenders
@@ -250,9 +275,7 @@ export class XAxis {
         const baseHeight = this.tickPadding + this.fontSize + 5;
         let height = this.rotatedLabels ? baseHeight * 2.5 : baseHeight;
         // Account for wrapped text height (multiply by estimated line count)
-        if (this.maxLabelWidth &&
-            this.oversizedBehavior === 'wrap' &&
-            this.wrapLineCount > 1) {
+        if (this.oversizedBehavior === 'wrap' && this.wrapLineCount > 1) {
             height += (this.wrapLineCount - 1) * this.fontSize * 1.2;
         }
         if (this.showGroupLabels) {
@@ -267,7 +290,7 @@ export class XAxis {
             position: 'bottom',
         };
     }
-    estimateLayoutSpace(labels, theme, svg, data = [], estimatedXAxisRangeWidth) {
+    estimateLayoutSpace(labels, theme, svg, data = [], estimatedXAxisRangeWidth, categoryScale) {
         if (!labels.length) {
             this.estimatedHeight = null;
             this.estimatedTickLabelVerticalFootprint = null;
@@ -281,23 +304,115 @@ export class XAxis {
         const fontWeight = theme.axis.fontWeight || 'normal';
         let maxWidth = 0;
         let maxLines = 1;
-        for (const label of labels) {
-            const text = String(label ?? '');
+        const automaticWidths = this.getAutomaticLabelWidths(categoryScale);
+        const tickLabels = this.getEstimateLabels(labels, data, categoryScale);
+        for (const { value, text } of tickLabels) {
             if (!text) {
                 continue;
             }
-            const measurement = this.measureLabel(text, fontSize, fontFamily, fontWeight, svg);
+            const measurement = this.measureLabel(text, fontSize, fontFamily, fontWeight, svg, this.maxLabelWidth ?? automaticWidths.get(value));
             maxLines = Math.max(maxLines, measurement.lines);
             maxWidth = Math.max(maxWidth, measurement.width);
         }
-        this.groupLabelWrapLineCount = this.estimateGroupLabelWrapLineCount(data, theme, svg, estimatedXAxisRangeWidth);
+        this.groupLabelWrapLineCount = this.estimateGroupLabelWrapLineCount(data, theme, svg, estimatedXAxisRangeWidth, categoryScale);
         this.setEstimatedDimensions(maxWidth, maxLines, theme);
         this.wrapLineCount = maxLines;
     }
+    getEstimateLabels(labels, data, scale) {
+        const formatter = scale
+            ? this.createAxisGenerator(scale, this.buildLabelLookup(data)).tickFormat()
+            : null;
+        return (scale?.domain() ?? labels).map((value, index) => ({
+            value: value,
+            text: formatter
+                ? formatter(value, index)
+                : String(value ?? ''),
+        }));
+    }
+    estimateSideMargins(scale, theme, svg, data, plotArea, chartWidth) {
+        this.estimatedSideMargins = undefined;
+        if (!this.display ||
+            !this.rotatedLabels ||
+            !this.autoLabelMargins ||
+            !scale) {
+            return;
+        }
+        // Measure the same formatted, wrapped and anchored text that is rendered.
+        this.fontSize = this.resolveFontSizeValue(theme.axis.fontSize, this.fontSize);
+        const axis = select(svg)
+            .append('g')
+            .call(this.createAxisGenerator(scale, this.buildLabelLookup(data)))
+            .attr('font-size', theme.axis.fontSize)
+            .attr('font-family', theme.axis.fontFamily)
+            .attr('font-weight', theme.axis.fontWeight || 'normal');
+        this.applyLabelConstraints(axis, svg, theme.axis.fontSize, theme.axis.fontFamily, theme.axis.fontWeight || 'normal', scale);
+        this.applyLabelRotation(axis);
+        const range = scale.range();
+        const start = Math.min(...range);
+        const rangeWidth = Math.abs(range[range.length - 1] - range[0]);
+        const footprints = [];
+        axis.selectAll('.tick text').each(function (value) {
+            if (this.style.visibility === 'hidden' ||
+                !this.textContent ||
+                rangeWidth <= 0)
+                return;
+            const box = this.getBBox();
+            // At -45 degrees, the horizontal projection is (x + y) / sqrt(2).
+            const left = (box.x + box.y) * Math.SQRT1_2;
+            const right = (box.x + box.width + box.y + box.height) * Math.SQRT1_2;
+            footprints.push({
+                value,
+                left: Math.max(0, -left) + 4,
+                right: Math.max(0, right) + 4,
+            });
+        });
+        axis.remove();
+        this.estimatedSideMargins = this.resolveSideMargins(footprints, scale, plotArea, chartWidth, start - plotArea.left);
+        return this.estimatedSideMargins;
+    }
+    resolveSideMargins(footprints, scale, plotArea, chartWidth, leadingPadding) {
+        let left = plotArea.left;
+        let right = chartWidth - plotArea.right;
+        const adjustedScale = scale.copy();
+        const reverse = scale.range()[0] > scale.range()[1];
+        // Moving a margin also moves band centers. Resolve both sides together,
+        // with a fixed pass limit and at least 40px retained for the plot.
+        for (let pass = 0; pass < 8; pass += 1) {
+            const previousLeft = left;
+            const previousRight = right;
+            const rangeStart = left + leadingPadding;
+            const rangeEnd = Math.max(rangeStart, chartWidth - right);
+            const rangeWidth = rangeEnd - rangeStart;
+            if (rangeWidth <= 0)
+                break;
+            adjustedScale.range(reverse ? [rangeEnd, rangeStart] : [rangeStart, rangeEnd]);
+            for (const label of footprints) {
+                // Recompute positions because rounded band steps change with the range.
+                const center = adjustedScale(label.value) + adjustedScale.bandwidth() / 2;
+                const p = (center - rangeStart) / rangeWidth;
+                if (p < 1) {
+                    const required = (label.left - p * (chartWidth - right)) / (1 - p) -
+                        leadingPadding;
+                    left = Math.max(left, Math.min(required, chartWidth - right - 40));
+                }
+                if (p > 0) {
+                    const required = (label.right -
+                        (1 - p) * (chartWidth - left - leadingPadding)) /
+                        p;
+                    right = Math.max(right, Math.min(required, chartWidth - left - 40));
+                }
+            }
+            if (left - previousLeft < 0.01 && right - previousRight < 0.01)
+                break;
+        }
+        return { left, right };
+    }
     clearEstimatedSpace() {
+        this.estimatedSideMargins = undefined;
         this.estimatedHeight = null;
         this.estimatedTickLabelVerticalFootprint = null;
         this.groupLabelWrapLineCount = 1;
+        this.wrapLineCount = 1;
     }
     getTickLabelVerticalFootprint() {
         if (this.estimatedTickLabelVerticalFootprint !== null) {
@@ -325,7 +440,9 @@ export class XAxis {
             .attr('font-family', theme.axis.fontFamily)
             .attr('font-weight', theme.axis.fontWeight || 'normal')
             .attr('stroke', 'none');
-        this.applyAxisTextConstraints(axis, svg.node(), theme);
+        this.fontSize = this.resolveFontSizeValue(theme.axis.fontSize, this.fontSize);
+        this.wrapLineCount = 1;
+        this.applyLabelConstraints(axis, svg.node(), theme.axis.fontSize, theme.axis.fontFamily, theme.axis.fontWeight || 'normal', x);
         this.applyLabelRotation(axis);
         this.applyAutoHiding(axis, x);
         axis.selectAll('.domain').remove();
@@ -419,15 +536,21 @@ export class XAxis {
         }
         return ranges.filter((range) => range.label.trim() !== '');
     }
-    applyLabelConstraints(axisGroup, svg, fontSize, fontFamily, fontWeight) {
-        if (!this.maxLabelWidth)
-            return;
-        const maxWidth = this.maxLabelWidth;
+    applyLabelConstraints(axisGroup, svg, fontSize, fontFamily, fontWeight, scale) {
+        const automaticWidths = this.getAutomaticLabelWidths(scale);
         const behavior = this.oversizedBehavior;
         axisGroup
             .selectAll('text')
-            .each((_d, i, nodes) => {
+            .each((value, i, nodes) => {
             const textEl = nodes[i];
+            const maxWidth = this.maxLabelWidth ??
+                automaticWidths.get(value);
+            if (maxWidth === undefined)
+                return;
+            if (maxWidth <= 0) {
+                textEl.style.visibility = 'hidden';
+                return;
+            }
             const originalText = textEl.textContent || '';
             const textWidth = measureTextWidth(originalText, fontSize, fontFamily, fontWeight, svg);
             if (textWidth <= maxWidth) {
@@ -454,6 +577,35 @@ export class XAxis {
             }
         });
     }
+    getAutomaticLabelWidths(scale) {
+        const widths = new Map();
+        if (!this.autoMaxLabelWidth ||
+            this.maxLabelWidth !== undefined ||
+            this.rotatedLabels ||
+            !scale?.bandwidth) {
+            return widths;
+        }
+        const domain = scale.domain();
+        const halfBand = scale.bandwidth() / 2;
+        const positions = domain.map((value) => scale(value) + halfBand);
+        const rangeStart = Math.min(...scale.range());
+        const rangeEnd = Math.max(...scale.range());
+        domain.forEach((value, index) => {
+            const position = positions[index];
+            // Centered labels share the distance between neighboring ticks.
+            // Edge labels must also stay inside the axis range.
+            const previousGap = index > 0
+                ? Math.abs(position - positions[index - 1]) -
+                    this.minLabelGap
+                : Infinity;
+            const nextGap = index < domain.length - 1
+                ? Math.abs(positions[index + 1] - position) -
+                    this.minLabelGap
+                : Infinity;
+            widths.set(value, Math.max(0, Math.min(previousGap, nextGap, 2 * (position - rangeStart), 2 * (rangeEnd - position))));
+        });
+        return widths;
+    }
     applyGroupLabelConstraints(groupLabels, svg, groupLabelStyle) {
         groupLabels.each((range, i, nodes) => {
             const textEl = nodes[i];
@@ -507,7 +659,7 @@ export class XAxis {
             const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
             tspan.textContent = line;
             tspan.setAttribute('x', textEl.getAttribute('x') || '0');
-            tspan.setAttribute('dy', i === 0 ? '0' : `${lineHeight}px`);
+            tspan.setAttribute('dy', i === 0 ? textEl.getAttribute('dy') || '0' : `${lineHeight}px`);
             textEl.appendChild(tspan);
         });
         // Add tooltip with full text
@@ -541,36 +693,51 @@ export class XAxis {
             this.hideLastOverlappingIntervalLabel(labelEntries, skipInterval);
         }
     }
-    measureLabel(text, fontSize, fontFamily, fontWeight, svg) {
-        if (this.maxLabelWidth && this.oversizedBehavior === 'wrap') {
-            const lines = wrapText(text, this.maxLabelWidth, fontSize, fontFamily, fontWeight, svg);
+    measureLabel(text, fontSize, fontFamily, fontWeight, svg, maxWidth) {
+        if (maxWidth !== undefined && maxWidth <= 0) {
+            return { width: 0, lines: 1 };
+        }
+        if (maxWidth !== undefined && this.oversizedBehavior === 'wrap') {
+            const lines = wrapText(text, maxWidth, fontSize, fontFamily, fontWeight, svg);
             return {
-                width: this.maxLabelWidth,
+                width: Math.max(...lines.map((line) => measureTextWidth(line, fontSize, fontFamily, fontWeight, svg))),
                 lines: lines.length || 1,
             };
         }
         const textWidth = measureTextWidth(text, fontSize, fontFamily, fontWeight, svg);
+        if (maxWidth !== undefined &&
+            this.oversizedBehavior === 'hide' &&
+            textWidth > maxWidth) {
+            return { width: 0, lines: 1 };
+        }
         return {
-            width: this.maxLabelWidth
-                ? Math.min(textWidth, this.maxLabelWidth)
-                : textWidth,
+            width: maxWidth === undefined
+                ? textWidth
+                : Math.min(textWidth, maxWidth),
             lines: 1,
         };
     }
-    estimateGroupLabelWrapLineCount(data, theme, svg, estimatedXAxisRangeWidth) {
+    estimateGroupLabelWrapLineCount(data, theme, svg, estimatedXAxisRangeWidth, categoryScale) {
         if (!this.showGroupLabels ||
             this.groupLabelOversizedBehavior !== 'wrap') {
             return 1;
         }
-        const groupLabels = this.buildGroupLabelEstimates(data);
+        const groupLabels = categoryScale
+            ? this.buildGroupRanges(categoryScale, data).map((range) => ({
+                label: range.label,
+                maxWidth: this.resolveGroupLabelMaxWidth(range),
+            }))
+            : this.buildGroupLabelEstimates(data).map((groupLabel) => ({
+                label: groupLabel.label,
+                maxWidth: this.groupLabelMaxWidth ??
+                    this.resolveEstimatedGroupLabelMaxWidth(groupLabel.itemCount, data.length, estimatedXAxisRangeWidth),
+            }));
         if (groupLabels.length === 0) {
             return 1;
         }
         const groupLabelStyle = this.resolveGroupLabelStyle(theme);
-        const totalItemCount = data.length;
         return groupLabels.reduce((maxLines, groupLabel) => {
-            const maxWidth = this.groupLabelMaxWidth ??
-                this.resolveEstimatedGroupLabelMaxWidth(groupLabel.itemCount, totalItemCount, estimatedXAxisRangeWidth);
+            const { maxWidth } = groupLabel;
             if (maxWidth === undefined || maxWidth <= 0) {
                 return maxLines;
             }
@@ -664,12 +831,6 @@ export class XAxis {
         axisGenerator.ticks(5, tickFormat);
         return axisGenerator;
     }
-    applyAxisTextConstraints(axis, svg, theme) {
-        if (!this.maxLabelWidth) {
-            return;
-        }
-        this.applyLabelConstraints(axis, svg, theme.axis.fontSize, theme.axis.fontFamily, theme.axis.fontWeight || 'normal');
-    }
     applyLabelRotation(axis) {
         if (!this.rotatedLabels) {
             return;
@@ -742,6 +903,9 @@ export class XAxis {
     }
     applyAutoHideVisibility(labelEntries, skipInterval) {
         labelEntries.forEach((textEl, index) => {
+            // Overflow hiding takes precedence over interval/end-label rules.
+            if (textEl.style.visibility === 'hidden')
+                return;
             const isFirst = index === 0;
             const isLast = index === labelEntries.length - 1;
             const isAtInterval = index % skipInterval === 0;

package/dist/xy-chart.d.ts

@@ -26,7 +26,7 @@ export declare class XYChart extends BaseChart {
     update(data: ChartData): void;
     protected applyComponentOverrides(overrides: Map<ChartComponentBase, ChartComponentBase>): () => void;
     protected prepareLayout(context: BaseLayoutContext): void;
-    private getEstimatedXAxisRangeWidth;
+    private estimateXAxisLayout;
     private getYAxisEstimateLabels;
     private createContinuousScaleForLayoutEstimate;
     protected renderChart({ svg, plotGroup, plotArea, }: BaseRenderContext): void;

package/dist/xy-chart.js

@@ -4,6 +4,7 @@ import { ChartValidationError, ChartValidator } from './validation.js';
 import { GROUPED_GAP_TICK_PREFIX, GROUPED_GROUP_LABEL_KEY, } from './grouped-data.js';
 import { resolveScaleValue } from './scale-utils.js';
 import { mergeDeep } from './utils.js';
+import { LayoutManager } from './layout-manager.js';
 import { createXYMotionDriver, } from './xy-motion/driver.js';
 import { createXYSeriesSnapshotId } from './xy-motion/helpers.js';
 const DEFAULT_SERIES_COLOR = '#8884d8';
@@ -153,28 +154,45 @@ export class XYChart extends BaseChart {
     }
     prepareLayout(context) {
         super.prepareLayout(context);
-        this.xAxis?.clearEstimatedSpace?.();
-        this.yAxis?.clearEstimatedSpace?.();
+        this.xAxis?.clearEstimatedSpace();
+        this.yAxis?.clearEstimatedSpace();
+        const { y: yConfig } = this.getResolvedAxisConfigs();
         if (this.yAxis) {
-            this.yAxis.estimateLayoutSpace?.(this.getYAxisEstimateLabels(), this.renderTheme, context.svgNode);
-        }
-        if (this.xAxis) {
-            const xKey = this.getXKey();
-            const labelKey = this.xAxis.labelKey;
-            const labels = this.data.map((item) => {
-                if (labelKey) {
-                    return item[labelKey];
-                }
-                return item[xKey];
-            });
-            this.xAxis.estimateLayoutSpace?.(labels, this.renderTheme, context.svgNode, this.data, this.getEstimatedXAxisRangeWidth());
+            this.yAxis.estimateLayoutSpace(this.getYAxisEstimateLabels(), this.renderTheme, context.svgNode, yConfig.type === 'band'
+                ? Math.max(0, this.width -
+                    this.renderTheme.margins.left -
+                    this.renderTheme.margins.right) / 3
+                : undefined);
         }
+        this.estimateXAxisLayout(context);
     }
-    getEstimatedXAxisRangeWidth() {
-        const yAxisWidth = this.yAxis?.getRequiredSpace().width ?? 0;
-        const { left, right } = this.renderTheme.margins;
-        const xScalePadding = 10;
-        return Math.max(0, this.width - left - right - yAxisWidth - xScalePadding);
+    estimateXAxisLayout(context) {
+        if (!this.xAxis)
+            return;
+        const { x: xConfig } = this.getResolvedAxisConfigs();
+        const xKey = this.getXKey();
+        const labelKey = this.xAxis.labelKey;
+        const labels = this.data.map((item) => {
+            if (labelKey) {
+                return item[labelKey];
+            }
+            return item[xKey];
+        });
+        const plotArea = this.applyPlotAreaOverride(new LayoutManager(this.resolvedRenderTheme).calculateLayout(this.getLayoutComponents()));
+        const range = [
+            plotArea.left + 10,
+            Math.max(plotArea.left + 10, plotArea.right),
+        ];
+        const categoryScale = xConfig.type === 'band'
+            ? this.buildScale('band', this.resolveScaleDomain(xConfig, xKey), xConfig.reverse ? [range[1], range[0]] : range, xConfig)
+            : undefined;
+        const sideMargins = this.xAxis.estimateSideMargins(categoryScale, this.renderTheme, context.svgNode, this.data, plotArea, this.width);
+        if (sideMargins && categoryScale) {
+            range[0] = sideMargins.left + 10;
+            range[1] = Math.max(range[0], this.width - sideMargins.right);
+            categoryScale.range(xConfig.reverse ? [range[1], range[0]] : range);
+        }
+        this.xAxis.estimateLayoutSpace(labels, this.renderTheme, context.svgNode, this.data, range[1] - range[0], categoryScale);
     }
     getYAxisEstimateLabels() {
         if (!this.yAxis) {

package/dist/y-axis.d.ts

@@ -7,6 +7,8 @@ export declare class YAxis implements LayoutAwareComponent<YAxisConfigBase> {
     private readonly tickPadding;
     private fontSize;
     private readonly maxLabelWidth?;
+    private readonly autoMaxLabelWidth;
+    private automaticMaxLabelWidth?;
     private readonly tickFormat;
     private readonly rotatedLabels;
     private readonly oversizedBehavior;
@@ -20,8 +22,9 @@ 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;
+    estimateLayoutSpace(labels: unknown[], theme: ChartTheme, svg: SVGSVGElement, categoryAxisWidth?: number): void;
     clearEstimatedSpace(): void;
+    private getAutomaticLabelWidth;
     render(svg: Selection<SVGSVGElement, undefined, null, undefined>, y: D3Scale, theme: ChartTheme, xPosition: number): void;
     private applyLabelConstraints;
     private measureLabelDimensions;

package/dist/y-axis.js

@@ -44,6 +44,18 @@ export class YAxis {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "autoMaxLabelWidth", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "automaticMaxLabelWidth", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "tickFormat", {
             enumerable: true,
             configurable: true,
@@ -74,11 +86,12 @@ export class YAxis {
             writable: true,
             value: void 0
         });
-        const { display = true, tickFormat = null, rotatedLabels = false, maxLabelWidth, oversizedBehavior = 'truncate', exportHooks, } = config ?? {};
+        const { display = true, tickFormat = null, rotatedLabels = false, maxLabelWidth, autoMaxLabelWidth = true, oversizedBehavior = 'truncate', exportHooks, } = config ?? {};
         this.display = display;
         this.tickFormat = tickFormat;
         this.rotatedLabels = rotatedLabels;
         this.maxLabelWidth = maxLabelWidth;
+        this.autoMaxLabelWidth = autoMaxLabelWidth;
         this.oversizedBehavior = oversizedBehavior;
         this.exportHooks = exportHooks;
     }
@@ -88,6 +101,7 @@ export class YAxis {
             tickFormat: this.tickFormat,
             rotatedLabels: this.rotatedLabels,
             maxLabelWidth: this.maxLabelWidth,
+            autoMaxLabelWidth: this.autoMaxLabelWidth,
             oversizedBehavior: this.oversizedBehavior,
         };
     }
@@ -124,7 +138,9 @@ export class YAxis {
             position: 'left',
         };
     }
-    estimateLayoutSpace(labels, theme, svg) {
+    estimateLayoutSpace(labels, theme, svg, categoryAxisWidth) {
+        this.automaticMaxLabelWidth =
+            this.getAutomaticLabelWidth(categoryAxisWidth);
         if (!labels.length) {
             this.estimatedWidth = 0;
             return;
@@ -139,7 +155,7 @@ export class YAxis {
             const text = String(label ?? '');
             if (!text)
                 continue;
-            const { width, height } = this.measureLabelDimensions(text, fontSize, fontFamily, fontWeight, svg);
+            const { width, height } = this.measureLabelDimensions(text, fontSize, fontFamily, fontWeight, svg, this.maxLabelWidth ?? this.automaticMaxLabelWidth);
             maxWidth = Math.max(maxWidth, width);
             maxHeight = Math.max(maxHeight, height);
         }
@@ -151,6 +167,16 @@ export class YAxis {
     }
     clearEstimatedSpace() {
         this.estimatedWidth = null;
+        this.automaticMaxLabelWidth = undefined;
+    }
+    getAutomaticLabelWidth(categoryAxisWidth) {
+        if (!this.autoMaxLabelWidth ||
+            this.rotatedLabels ||
+            categoryAxisWidth === undefined) {
+            return undefined;
+        }
+        // Vertical tick spacing is a height, so use a chart-width budget instead.
+        return Math.max(0, categoryAxisWidth - this.tickPadding);
     }
     render(svg, y, theme, xPosition) {
         if (!this.display) {
@@ -180,7 +206,8 @@ export class YAxis {
             .attr('font-family', theme.axis.fontFamily)
             .attr('font-weight', theme.axis.fontWeight || 'normal');
         // Apply label constraints before rotation
-        this.applyLabelConstraints(axisGroup, svg.node(), theme.axis.fontSize, theme.axis.fontFamily, theme.axis.fontWeight || 'normal');
+        this.applyLabelConstraints(axisGroup, svg.node(), theme.axis.fontSize, theme.axis.fontFamily, theme.axis.fontWeight || 'normal', this.maxLabelWidth ??
+            (y.bandwidth ? this.automaticMaxLabelWidth : undefined));
         // Apply rotation to labels if enabled
         if (this.rotatedLabels) {
             axisGroup
@@ -190,16 +217,19 @@ export class YAxis {
         }
         axisGroup.selectAll('.domain').remove();
     }
-    applyLabelConstraints(axisGroup, svg, fontSize, fontFamily, fontWeight) {
-        if (this.maxLabelWidth === undefined) {
+    applyLabelConstraints(axisGroup, svg, fontSize, fontFamily, fontWeight, maxWidth) {
+        if (maxWidth === undefined) {
             return;
         }
-        const maxWidth = this.maxLabelWidth;
         const behavior = this.oversizedBehavior;
         axisGroup
             .selectAll('text')
             .each((_d, i, nodes) => {
             const textEl = nodes[i];
+            if (maxWidth <= 0) {
+                textEl.style.visibility = 'hidden';
+                return;
+            }
             const originalText = textEl.textContent || '';
             const textWidth = measureTextWidth(originalText, fontSize, fontFamily, fontWeight, svg);
             if (textWidth <= maxWidth) {
@@ -226,11 +256,13 @@ export class YAxis {
             }
         });
     }
-    measureLabelDimensions(text, fontSize, fontFamily, fontWeight, svg) {
+    measureLabelDimensions(text, fontSize, fontFamily, fontWeight, svg, maxWidth) {
+        if (maxWidth !== undefined && maxWidth <= 0) {
+            return { width: 0, height: 0 };
+        }
         const textWidth = measureTextWidth(text, fontSize, fontFamily, fontWeight, svg);
         const lineHeight = fontSize * 1.2;
-        if (this.maxLabelWidth === undefined ||
-            textWidth <= this.maxLabelWidth) {
+        if (maxWidth === undefined || textWidth <= maxWidth) {
             return {
                 width: textWidth,
                 height: fontSize,
@@ -239,11 +271,11 @@ export class YAxis {
         switch (this.oversizedBehavior) {
             case 'truncate':
                 return {
-                    width: this.maxLabelWidth,
+                    width: maxWidth,
                     height: fontSize,
                 };
             case 'wrap': {
-                const lines = wrapText(text, this.maxLabelWidth, fontSize, fontFamily, fontWeight, svg);
+                const lines = wrapText(text, maxWidth, fontSize, fontFamily, fontWeight, svg);
                 const widestLine = lines.reduce((widest, line) => {
                     return Math.max(widest, measureTextWidth(line, fontSize, fontFamily, fontWeight, svg));
                 }, 0);

package/docs/components.md

@@ -17,15 +17,47 @@ new XAxis({
     groupLabelMaxWidth?: number, // Optional cap for grouped-label width
     groupLabelOversizedBehavior?: 'truncate' | 'wrap' | 'hide', // Defaults to truncate
     rotatedLabels?: boolean,  // Rotate tick labels -45deg
-    maxLabelWidth?: number,   // Optional cap for tick-label width
-    oversizedBehavior?: 'truncate' | 'wrap' | 'hide', // Only applies when maxLabelWidth is set
+    autoLabelMargins?: boolean, // Reserve side margins for rotated category labels (default: true)
+    maxLabelWidth?: number,   // Override automatic category-label width, in pixels
+    autoMaxLabelWidth?: boolean, // Automatically size category labels (default: true)
+    oversizedBehavior?: 'truncate' | 'wrap' | 'hide', // Default: truncate
     autoHideOverlapping?: boolean, // Automatically hide overlapping labels
-    minLabelGap?: number,     // Minimum gap between visible labels when auto-hide is enabled
-    preserveEndLabels?: boolean, // Keep first/last labels visible when auto-hide is enabled
+    minLabelGap?: number,     // Gap for automatic category sizing and auto-hide (default: 8px)
+    preserveEndLabels?: boolean, // Preserve end labels during auto-hide unless overflow hides them
     tickFormat?: string | ((value: string | number | Date) => string) | null
 })
 ```
 
+Unrotated category (band-scale) labels automatically fit the rendered axis when
+`maxLabelWidth` is omitted. Each label uses the distance to its neighboring ticks,
+less `minLabelGap`; the first and last labels are also bounded by the axis range.
+This uses the scale's actual domain and positions, including band padding,
+reversed axes, and grouped gaps.
+
+`oversizedBehavior` controls labels that exceed that space: `wrap` creates
+multiple lines (including breaking long words), `truncate` adds an ellipsis,
+and `hide` hides the label. Wrapping and truncation retain the full text in an
+SVG title. Widths and wrapped bottom margins are recalculated on resize and
+chart updates, using the display text from `labelKey` or `tickFormat`.
+
+An explicit `maxLabelWidth` overrides automatic sizing. Numeric/time axes and
+rotated labels retain their existing uncapped behavior unless a width is supplied.
+Rotated category labels automatically reserve side margins inside their own chart,
+including in `ChartGroup`. The layout measures the formatted text after explicit
+width constraints and recalculates on resize, updates, and visual export. Rounded
+tick positions and group-label wrapping use the adjusted plot width. Theme
+side margins remain minimums. Set `autoLabelMargins: false` to use theme margins
+exactly, for example when providing a manual margin override. Numeric/time axes
+are unchanged. Layout adjustment is bounded and retains at least 40px of plot
+width; labels that cannot fit while preserving this plot width still need an
+explicit width limit.
+
+Set `autoMaxLabelWidth: false` to disable automatic sizing and leave category
+labels uncapped too. An explicit `maxLabelWidth` still applies when this is off;
+group-label sizing is controlled separately.
+`autoHideOverlapping` remains a separate interval-based visibility option;
+`preserveEndLabels` does not restore labels hidden by `oversizedBehavior: 'hide'`.
+
 Grouped label styles come from `theme.axis.groupLabel` and are bold by
 default. When `groupLabelMaxWidth` is omitted, grouped labels are automatically
 capped to their rendered group range so adjacent group labels do not collide.
@@ -38,6 +70,14 @@ that cap.
 chart.addChild(new XAxis({ dataKey: 'date' }));
 ```
 
+Automatically wrap category labels such as “ChatGPT”, “Copilot”, and
+“My AI (på Snapchat)” without a fixed pixel width:
+
+```typescript
+chart.addChild(new XAxis({ dataKey: 'category', oversizedBehavior: 'wrap' }));
+// Use oversizedBehavior: 'truncate' or 'hide' for the other overflow modes.
+```
+
 Callback formatter example:
 
 ```typescript
@@ -67,15 +107,26 @@ Renders the Y axis.
 new YAxis({
     display?: boolean,          // Render axis and reserve layout space (default: true)
     rotatedLabels?: boolean,    // Rotate tick labels -45deg
-    maxLabelWidth?: number,     // Optional cap for tick-label width
-    oversizedBehavior?: 'truncate' | 'wrap' | 'hide', // Only applies when maxLabelWidth is set
+    maxLabelWidth?: number,     // Override automatic category-label width, in pixels
+    autoMaxLabelWidth?: boolean, // Automatically size category labels (default: true)
+    oversizedBehavior?: 'truncate' | 'wrap' | 'hide', // Default: truncate
     tickFormat?: string | ((value: string | number | Date) => string) | null
 })
 ```
 
-When `maxLabelWidth` is omitted, `YAxis` reserves the measured width of its
-rendered tick labels. Set `maxLabelWidth` to cap the reserved width and use
-`oversizedBehavior` to control truncation, wrapping, or hiding.
+For unrotated category axes (including horizontal bar charts), omitting
+`maxLabelWidth` automatically budgets up to one third of the chart width inside
+the outer left/right margins for the axis. The label cap is that budget minus
+the 10px tick padding. Vertical tick spacing is a height, so it is not used as a
+text-width limit. Shorter labels reserve only their measured width, and wrapped
+lines are centered vertically on each tick.
+
+The same `wrap`, `truncate`, and `hide` modes apply, and sizing is recalculated on
+resize and chart updates. An explicit `maxLabelWidth` overrides the budget.
+Set `autoMaxLabelWidth: false` to disable the automatic budget; an explicit
+`maxLabelWidth` still applies.
+Numeric/time axes and rotated labels continue to reserve their measured width
+unless `maxLabelWidth` is supplied.
 
 ### Format Examples
 
@@ -123,6 +174,11 @@ chart.addChild(new Grid());
 
 Renders interactive tooltips on hover and keyboard focus.
 
+Only one chart can show tooltips at a time, whether charts are standalone or
+inside a `ChartGroup`. Hovering, tapping, or focusing another chart dismisses
+the previous chart's tooltips immediately, including during transitions.
+Split mode can still show multiple series tooltips within the active chart.
+
 ```typescript
 new Tooltip({
     mode?: 'shared' | 'split' | 'single',

package/package.json

@@ -1,5 +1,5 @@
 {
-    "version": "0.20.1",
+    "version": "0.21.1",
     "name": "@internetstiftelsen/charts",
     "type": "module",
     "sideEffects": false,