@internetstiftelsen/charts 0.20.0 → 0.21.0

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/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;
@@ -27,7 +29,11 @@ export declare class TooltipDom {
     setContent(content: string): void;
     getBounds(): DOMRect | null;
     showAt(left: number, top: number): void;
-    hide(): void;
+    hasVisibleTooltips(): boolean;
+    activate(): void;
+    setHideListener(listener: (() => void) | null): void;
+    moveVisibleTooltips(deltaX: number, deltaY: number): void;
+    hide(immediate?: boolean): void;
     cleanup(): void;
     measureTooltip(tooltip: TooltipDivSelection, content: string): {
         width: number;
@@ -50,6 +56,7 @@ export declare class TooltipDom {
     private scheduleTooltipPositionReset;
     private cancelTooltipPositionReset;
     private getTooltipTransitionStyle;
+    private getTooltipNodes;
     private isTooltipVisible;
     private getTooltipPosition;
     private hasVisibleSlideOffset;

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;
@@ -108,14 +114,45 @@ export class TooltipDom {
         }
         this.showTooltipAt(this.tooltipDiv, left, top);
     }
-    hide() {
-        const tooltip = this.tooltipDiv ?? select(`#${this.id}`);
-        if (!tooltip.empty()) {
-            this.hideTooltipSelection(tooltip);
+    hasVisibleTooltips() {
+        return this.getTooltipNodes().some((node) => this.isTooltipVisible(node));
+    }
+    activate() {
+        if (TooltipDom.activeTooltip === this) {
+            return;
         }
-        this.hideSplitTooltips();
+        TooltipDom.activeTooltip?.hide(true);
+        TooltipDom.activeTooltip = this;
+    }
+    setHideListener(listener) {
+        this.hideListener = listener;
+    }
+    moveVisibleTooltips(deltaX, deltaY) {
+        this.getTooltipNodes().forEach((node) => {
+            if (!this.isTooltipVisible(node)) {
+                return;
+            }
+            const position = this.getTooltipPosition(node);
+            if (!position) {
+                return;
+            }
+            node.style.left = `${position.left + deltaX}px`;
+            node.style.top = `${position.top + deltaY}px`;
+        });
+    }
+    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;
@@ -295,6 +332,7 @@ export class TooltipDom {
         if (!node) {
             return;
         }
+        this.activate();
         this.cancelTooltipPositionReset(node);
         tooltip.style('visibility', 'visible');
         if (!this.transition.show) {
@@ -308,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);
@@ -317,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;
         }
@@ -350,6 +388,9 @@ export class TooltipDom {
     getTooltipTransitionStyle() {
         return `opacity ${this.transition.duration}ms ${this.transition.easing}, transform ${this.transition.duration}ms ${this.transition.easing}`;
     }
+    getTooltipNodes() {
+        return Array.from(document.querySelectorAll(`#${this.id}, [data-chart-tooltip-owner="${this.splitTooltipOwner}"]`));
+    }
     isTooltipVisible(node) {
         return (node.style.visibility === 'visible' && node.style.opacity !== '0');
     }
@@ -498,3 +539,9 @@ export class TooltipDom {
         }
     }
 }
+Object.defineProperty(TooltipDom, "activeTooltip", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: null
+});

package/dist/tooltip/xy-interaction.js

@@ -301,11 +301,11 @@ export function attachXYTooltipArea(config) {
         const svgNode = svg.node();
         if (!svgNode) {
             dom.hideTooltipSelection(tooltip);
-            return null;
+            return;
         }
         const placementBounds = getTooltipPlacementBounds(svgNode);
         const candidates = [];
-        series.forEach((currentSeries, seriesIndex) => {
+        series.forEach((currentSeries) => {
             const rawValue = dataPoint[currentSeries.dataKey];
             if (rawValue === null || rawValue === undefined) {
                 return;
@@ -319,59 +319,93 @@ export function attachXYTooltipArea(config) {
             const target = resolveSplitTooltipTarget(currentSeries, visibleAnchor, resolvedBarAnchorPosition);
             candidates.push({
                 series: currentSeries,
-                seriesIndex,
                 anchor: visibleAnchor,
                 target,
             });
         });
-        const selectedCandidate = candidates.find((candidate) => candidate.seriesIndex === request.seriesIndex) ?? getClosestSingleTooltipCandidate(candidates, request);
+        const selectedCandidate = getClosestSingleTooltipCandidate(candidates, request);
         updateVisualStateAtIndex(request.index);
         dom.hideSplitTooltips();
         if (!selectedCandidate) {
             dom.hideTooltipSelection(tooltip);
-            return null;
+            return;
         }
         dom.applyRootTooltipStyles(theme, getSeriesTooltipStyle(selectedCandidate.series, dataPoint, request.index));
         const content = buildSplitTooltipContent(dataPoint, selectedCandidate.series);
         const measuredTooltip = dom.measureTooltip(tooltip, content);
         if (!measuredTooltip) {
             dom.hideTooltipSelection(tooltip);
-            return null;
+            return;
         }
         const arrowEdge = resolveTooltipArrowEdge(resolvedPosition, selectedCandidate.anchor, selectedCandidate.target, measuredTooltip.width, measuredTooltip.height, placementBounds);
         const tooltipPosition = getAnchoredTooltipPosition(selectedCandidate.anchor, selectedCandidate.target, measuredTooltip.width, measuredTooltip.height, arrowEdge, placementBounds);
         if (!tooltipPosition) {
             dom.hideTooltipSelection(tooltip);
-            return null;
+            return;
         }
         dom.renderTooltipWithConnector(tooltip, arrowEdge, tooltipPosition.left, tooltipPosition.top, measuredTooltip.width, measuredTooltip.height, selectedCandidate.target.x, selectedCandidate.target.y, selectedCandidate.anchor);
-        return {
-            index: request.index,
-            seriesIndex: selectedCandidate.seriesIndex,
-        };
-    };
-    let activeTooltipRequest = null;
-    const hideTooltip = () => {
-        activeTooltipRequest = null;
-        dom.hideTooltipSelection(tooltip);
-        dom.hideSplitTooltips();
-        clearVisualState();
     };
     const tooltipSvgNode = svg.node();
-    const queuedRender = createQueuedTooltipRender(tooltipSvgNode, (request) => {
+    let activeSvgBounds = null;
+    let positionTrackingFrame = null;
+    const stopPositionTracking = () => {
+        activeSvgBounds = null;
+        if (positionTrackingFrame !== null) {
+            cancelFrame(positionTrackingFrame);
+            positionTrackingFrame = null;
+        }
+    };
+    const updateTooltipPosition = () => {
+        if (!activeSvgBounds || !tooltipSvgNode) {
+            return;
+        }
+        const nextSvgBounds = getElementTooltipBounds(tooltipSvgNode);
+        const deltaX = nextSvgBounds.minLeft - activeSvgBounds.minLeft;
+        const deltaY = nextSvgBounds.minTop - activeSvgBounds.minTop;
+        if (deltaX === 0 && deltaY === 0) {
+            return;
+        }
+        dom.moveVisibleTooltips(deltaX, deltaY);
+        activeSvgBounds = nextSvgBounds;
+    };
+    const trackTooltipPosition = () => {
+        positionTrackingFrame = null;
+        if (!tooltipSvgNode?.isConnected || !dom.hasVisibleTooltips()) {
+            stopPositionTracking();
+            return;
+        }
+        // Scroll events can arrive late during touch or momentum scrolling.
+        updateTooltipPosition();
+        positionTrackingFrame = requestFrame(trackTooltipPosition);
+    };
+    const renderTooltip = (request) => {
+        if (!tooltipSvgNode) {
+            return;
+        }
+        dom.activate();
+        activeSvgBounds = getElementTooltipBounds(tooltipSvgNode);
+        if (positionTrackingFrame === null) {
+            positionTrackingFrame = requestFrame(trackTooltipPosition);
+        }
         if (mode === 'single') {
-            activeTooltipRequest = showSingleTooltip(request);
+            showSingleTooltip(request);
             return;
         }
-        activeTooltipRequest = { index: request.index };
         if (mode === 'split') {
             showSplitTooltipAtIndex(request.index);
             return;
         }
         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);
@@ -385,8 +419,7 @@ export function attachXYTooltipArea(config) {
         if (isTooltipFocusTarget(document.activeElement)) {
             return;
         }
-        queuedRender.cancel();
-        hideTooltip();
+        dom.hide();
     });
     const focusTargets = svg
         .append('g')
@@ -415,26 +448,14 @@ export function attachXYTooltipArea(config) {
         }
         queuedRender.cancel();
         select(this).attr('stroke', '#111827').attr('stroke-width', 2);
-        if (mode === 'single') {
-            activeTooltipRequest = showSingleTooltip({
-                index: currentIndex,
-            });
-            return;
-        }
-        activeTooltipRequest = { index: currentIndex };
-        if (mode === 'split') {
-            showSplitTooltipAtIndex(currentIndex);
-            return;
-        }
-        showSharedTooltipAtIndex(currentIndex);
+        renderTooltip({ index: currentIndex });
     })
         .on('blur', function (event) {
         select(this).attr('stroke', 'none').attr('stroke-width', 0);
         if (isTooltipFocusTarget(event.relatedTarget)) {
             return;
         }
-        queuedRender.cancel();
-        hideTooltip();
+        dom.hide();
     })
         .on('keydown', function (event) {
         const currentIndex = focusTargetNodes.indexOf(this);
@@ -448,12 +469,13 @@ export function attachXYTooltipArea(config) {
         event.preventDefault();
         focusTargetNodes[nextIndex].focus();
     });
-    return attachTooltipScrollListeners(tooltipSvgNode, () => {
-        if (activeTooltipRequest === null) {
-            return;
-        }
-        queuedRender.request(activeTooltipRequest);
-    });
+    const detachScrollListeners = attachTooltipScrollListeners(tooltipSvgNode, updateTooltipPosition);
+    return () => {
+        detachScrollListeners?.();
+        queuedRender.cancel();
+        stopPositionTracking();
+        dom.setHideListener(null);
+    };
 }
 function normalizeFormatterValue(value) {
     if (value === null ||

package/dist/types.d.ts

@@ -274,10 +274,15 @@ export type XAxisConfigBase = {
     groupLabelMaxWidth?: number;
     groupLabelOversizedBehavior?: LabelOversizedBehavior;
     rotatedLabels?: 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 +293,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

@@ -15,6 +15,7 @@ export declare class XAxis implements LayoutAwareComponent<XAxisConfigBase> {
     private readonly tickPadding;
     private fontSize;
     private readonly maxLabelWidth?;
+    private readonly autoMaxLabelWidth;
     private readonly oversizedBehavior;
     private readonly tickFormat;
     private wrapLineCount;
@@ -34,7 +35,8 @@ 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;
     clearEstimatedSpace(): void;
     private getTickLabelVerticalFootprint;
     render(svg: Selection<SVGSVGElement, undefined, null, undefined>, x: D3Scale, theme: ChartTheme, yPosition: number, data?: DataItem[]): void;
@@ -42,6 +44,7 @@ export declare class XAxis implements LayoutAwareComponent<XAxisConfigBase> {
     private renderGroupLabels;
     private buildGroupRanges;
     private applyLabelConstraints;
+    private getAutomaticLabelWidths;
     private applyGroupLabelConstraints;
     private resolveGroupLabelMaxWidth;
     private wrapTextElement;
@@ -54,7 +57,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

@@ -8,6 +8,7 @@ const DEFAULT_X_AXIS_CONFIG = {
     groupLabelGap: 10,
     groupLabelOversizedBehavior: 'truncate',
     rotatedLabels: false,
+    autoMaxLabelWidth: true,
     oversizedBehavior: 'truncate',
     tickFormat: null,
     autoHideOverlapping: false,
@@ -119,6 +120,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,
@@ -194,6 +201,7 @@ export class XAxis {
             resolvedConfig.groupLabelOversizedBehavior;
         this.rotatedLabels = resolvedConfig.rotatedLabels;
         this.maxLabelWidth = resolvedConfig.maxLabelWidth;
+        this.autoMaxLabelWidth = resolvedConfig.autoMaxLabelWidth;
         this.oversizedBehavior = resolvedConfig.oversizedBehavior;
         this.tickFormat = resolvedConfig.tickFormat;
         this.autoHideOverlapping = resolvedConfig.autoHideOverlapping;
@@ -213,6 +221,7 @@ export class XAxis {
             groupLabelOversizedBehavior: this.groupLabelOversizedBehavior,
             rotatedLabels: this.rotatedLabels,
             maxLabelWidth: this.maxLabelWidth,
+            autoMaxLabelWidth: this.autoMaxLabelWidth,
             oversizedBehavior: this.oversizedBehavior,
             tickFormat: this.tickFormat,
             autoHideOverlapping: this.autoHideOverlapping,
@@ -250,9 +259,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 +274,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,12 +288,13 @@ 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);
         }
@@ -294,10 +302,22 @@ export class XAxis {
         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 ?? ''),
+        }));
+    }
     clearEstimatedSpace() {
         this.estimatedHeight = null;
         this.estimatedTickLabelVerticalFootprint = null;
         this.groupLabelWrapLineCount = 1;
+        this.wrapLineCount = 1;
     }
     getTickLabelVerticalFootprint() {
         if (this.estimatedTickLabelVerticalFootprint !== null) {
@@ -325,7 +345,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 +441,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 +482,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 +564,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,19 +598,27 @@ 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,
         };
     }
@@ -664,12 +729,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 +801,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,6 @@ 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 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,10 +154,15 @@ export class XYChart extends BaseChart {
     }
     prepareLayout(context) {
         super.prepareLayout(context);
-        this.xAxis?.clearEstimatedSpace?.();
-        this.yAxis?.clearEstimatedSpace?.();
+        this.xAxis?.clearEstimatedSpace();
+        this.yAxis?.clearEstimatedSpace();
+        const { x: xConfig, y: yConfig } = this.getResolvedAxisConfigs();
         if (this.yAxis) {
-            this.yAxis.estimateLayoutSpace?.(this.getYAxisEstimateLabels(), this.renderTheme, context.svgNode);
+            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);
         }
         if (this.xAxis) {
             const xKey = this.getXKey();
@@ -167,15 +173,17 @@ export class XYChart extends BaseChart {
                 }
                 return item[xKey];
             });
-            this.xAxis.estimateLayoutSpace?.(labels, this.renderTheme, context.svgNode, this.data, this.getEstimatedXAxisRangeWidth());
+            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;
+            this.xAxis.estimateLayoutSpace(labels, this.renderTheme, context.svgNode, this.data, range[1] - range[0], categoryScale);
         }
     }
-    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);
-    }
     getYAxisEstimateLabels() {
         if (!this.yAxis) {
             return [];

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,36 @@ 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
+    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.
+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 +59,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 +96,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 +163,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',
@@ -167,6 +212,11 @@ paths are omitted when the arrow is already close to its target. For line,
 area, and scatter points, side split tooltips spread nearby point targets
 within the connectorless arrow range before drawing connector paths.
 
+Visible XY tooltips track their targets on every animation frame, including
+during touch and momentum scrolling. Their initial placement is preserved,
+allowing them to pass beyond the container edges instead of sticking there
+until blur. Tracking stops when the tooltips are hidden or the chart is destroyed.
+
 For horizontal bar charts, prefer `position: 'auto'` or `position: 'vertical'`.
 `position: 'side'` and `barAnchorPosition: 'top' | 'middle'` are kept for
 legacy configs, but horizontal bars resolve bar anchoring automatically.

package/package.json

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