@internetstiftelsen/charts 0.19.3 → 0.20.1

package/README.md

@@ -396,9 +396,14 @@ chart.render('#word-cloud');
 ```
 
 `minFontSize` and `maxFontSize` are percentages of the smaller plot-area
-dimension and define the relative size range passed into `d3-cloud`. The chart
+dimension and define the initial size range passed into `d3-cloud`. The chart
 expects flat `{ word, count }` rows, aggregates duplicate words after trimming,
 and maps theme typography and colors directly into the layout and rendered SVG.
+Long phrases are fitted to the available area, with at most six placement
+attempts. Container resizing is debounced by 150 ms; initial rendering and data
+updates remain immediate. If space remains insufficient, the chart retains the highest-frequency
+words without shrinking below the configured minimum. See the
+[WordCloudChart API](./docs/word-cloud-chart.md#notes) for fitting behavior.
 Set `animate: true` or pass an animation config to fade and scale words from
 their own centers on initial render and `chart.update(...)`.
 

package/dist/area.d.ts

@@ -3,7 +3,7 @@ import type { AreaConfig, AreaCurveType, AreaConfigBase, AreaStackingContext, Ch
 import type { ChartComponent } from './chart-interface.js';
 import type { XYAreaAnimationContext, XYAreaPointSnapshot, XYSeriesRenderResult } from './xy-motion/types.js';
 export declare class Area implements ChartComponent<AreaConfigBase> {
-    readonly type: "area";
+    readonly type: 'area';
     readonly dataKey: string;
     readonly fill: string;
     readonly stroke: string;

package/dist/bar.d.ts

@@ -3,7 +3,7 @@ import type { BarConfig, BarStackingContext, BarSide, BarValueLabelConfig, Chart
 import type { ChartComponent } from './chart-interface.js';
 import type { XYBarAnimationContext, XYBarSnapshot, XYSeriesRenderResult } from './xy-motion/types.js';
 export declare class Bar implements ChartComponent<BarConfigBase> {
-    readonly type: "bar";
+    readonly type: 'bar';
     readonly dataKey: string;
     readonly fill: string;
     readonly colorAdapter?: (data: DataItem, index: number) => string;

package/dist/base-chart.d.ts

@@ -213,6 +213,8 @@ export declare abstract class BaseChart {
      * Setup ResizeObserver for automatic resize handling
      */
     private setupResizeObserver;
+    protected hasContainerSizeChanged(): boolean;
+    protected handleResize(): void;
     private notifyLegendChanged;
     /**
      * Subclasses must implement this method to define their rendering logic

package/dist/base-chart.js

@@ -939,19 +939,22 @@ export class BaseChart {
         if (this.resizeObserver) {
             this.resizeObserver.disconnect();
         }
-        this.resizeObserver = new ResizeObserver(() => {
-            if (!this.container) {
-                return;
-            }
-            const nextDimensions = this.resolveRenderDimensions(this.container.getBoundingClientRect());
-            if (nextDimensions.width === this.width &&
-                nextDimensions.height === this.height) {
-                return;
-            }
-            this.rerender('resize');
-        });
+        this.resizeObserver = new ResizeObserver(() => this.handleResize());
         this.resizeObserver.observe(this.container);
     }
+    hasContainerSizeChanged() {
+        if (!this.container) {
+            return false;
+        }
+        const nextDimensions = this.resolveRenderDimensions(this.container.getBoundingClientRect());
+        return (nextDimensions.width !== this.width ||
+            nextDimensions.height !== this.height);
+    }
+    handleResize() {
+        if (this.hasContainerSizeChanged()) {
+            this.rerender('resize');
+        }
+    }
     notifyLegendChanged() {
         this.emit('legend:change');
     }
@@ -1310,6 +1313,7 @@ export class BaseChart {
         return exportXLSXBlob(this.sourceData, options);
     }
     async exportImage(format, options) {
+        await this.whenReady();
         const { width, height } = this.exportSize(options);
         const svg = await this.exportSVG(options, format);
         const backgroundColor = options?.backgroundColor ??
@@ -1325,8 +1329,8 @@ export class BaseChart {
         });
     }
     async exportSVG(options, formatForHooks = 'svg') {
-        const liveSvg = this.requireRenderedSvg();
         await this.whenReady();
+        const liveSvg = this.requireRenderedSvg();
         const { exportWidth, exportHeight, requiresExportRender, baseContext } = this.resolveExportContext(options, formatForHooks);
         const clone = this.createExportSvgClone(liveSvg, exportWidth, exportHeight);
         const overrides = this.collectExportOverrides(baseContext);

package/dist/donut-center-content.d.ts

@@ -19,7 +19,7 @@ export type DonutCenterContentConfig = DonutCenterContentConfigBase & {
     exportHooks?: ExportHooks<DonutCenterContentConfigBase>;
 };
 export declare class DonutCenterContent implements ChartComponent<DonutCenterContentConfigBase> {
-    readonly type: "donutCenterContent";
+    readonly type: 'donutCenterContent';
     readonly mainValue?: string;
     readonly title?: string;
     readonly subtitle?: string;

package/dist/grid.d.ts

@@ -2,7 +2,7 @@ import { type Selection } from 'd3';
 import type { GridConfig, ChartTheme, D3Scale, ExportHooks, GridConfigBase } from './types.js';
 import type { ChartComponent } from './chart-interface.js';
 export declare class Grid implements ChartComponent<GridConfigBase> {
-    readonly type: "grid";
+    readonly type: 'grid';
     readonly value: boolean;
     readonly category: boolean;
     readonly exportHooks?: ExportHooks<GridConfigBase>;

package/dist/legend.d.ts

@@ -3,7 +3,7 @@ import type { LegendConfig, ChartTheme, HorizontalAlignment, LegendSeries, Expor
 import type { LayoutAwareComponent, ComponentSpace } from './chart-interface.js';
 import { LegendStateController } from './legend-state.js';
 export declare class Legend implements LayoutAwareComponent<LegendConfigBase> {
-    readonly type: "legend";
+    readonly type: 'legend';
     mode: LegendMode;
     readonly position: LegendConfig['position'];
     readonly disconnectedTarget?: string | HTMLElement;

package/dist/line.d.ts

@@ -3,7 +3,7 @@ import type { LineConfig, DataItem, D3Scale, ScaleType, ChartTheme, LineValueLab
 import type { ChartComponent } from './chart-interface.js';
 import type { XYPointAnimationContext, XYPointSnapshot, XYSeriesRenderResult } from './xy-motion/types.js';
 export declare class Line implements ChartComponent<LineConfigBase> {
-    readonly type: "line";
+    readonly type: 'line';
     readonly dataKey: string;
     readonly stroke: string;
     readonly strokeWidth?: number;

package/dist/scatter.d.ts

@@ -3,7 +3,7 @@ import type { ChartComponent } from './chart-interface.js';
 import type { Selection } from 'd3';
 import type { XYPointAnimationContext, XYPointSnapshot, XYSeriesRenderResult } from './xy-motion/types.js';
 export declare class Scatter implements ChartComponent<ScatterConfigBase> {
-    readonly type: "scatter";
+    readonly type: 'scatter';
     readonly dataKey: string;
     readonly stroke: string;
     readonly pointSize?: number;

package/dist/title.d.ts

@@ -2,10 +2,10 @@ import { type Selection } from 'd3';
 import type { ChartTheme, ExportHooks, TitleConfig, TitleConfigBase } from './types.js';
 import type { ComponentSpace, LayoutAwareComponent } from './chart-interface.js';
 export declare class Title implements LayoutAwareComponent<TitleConfigBase> {
-    readonly type: "title";
+    readonly type: 'title';
     readonly display: boolean;
     readonly text: string;
-    readonly position: "top";
+    readonly position: 'top';
     readonly variant = "title";
     readonly exportHooks?: ExportHooks<TitleConfigBase>;
     private readonly textComponent;

package/dist/tooltip/dom.d.ts

@@ -27,6 +27,8 @@ export declare class TooltipDom {
     setContent(content: string): void;
     getBounds(): DOMRect | null;
     showAt(left: number, top: number): void;
+    hasVisibleTooltips(): boolean;
+    moveVisibleTooltips(deltaX: number, deltaY: number): void;
     hide(): void;
     cleanup(): void;
     measureTooltip(tooltip: TooltipDivSelection, content: string): {
@@ -50,6 +52,7 @@ export declare class TooltipDom {
     private scheduleTooltipPositionReset;
     private cancelTooltipPositionReset;
     private getTooltipTransitionStyle;
+    private getTooltipNodes;
     private isTooltipVisible;
     private getTooltipPosition;
     private hasVisibleSlideOffset;

package/dist/tooltip/dom.js

@@ -108,6 +108,22 @@ export class TooltipDom {
         }
         this.showTooltipAt(this.tooltipDiv, left, top);
     }
+    hasVisibleTooltips() {
+        return this.getTooltipNodes().some((node) => this.isTooltipVisible(node));
+    }
+    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() {
         const tooltip = this.tooltipDiv ?? select(`#${this.id}`);
         if (!tooltip.empty()) {
@@ -350,6 +366,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');
     }

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,57 +319,90 @@ 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 tooltipSvgNode = svg.node();
+    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 hideTooltip = () => {
-        activeTooltipRequest = null;
+        stopPositionTracking();
         dom.hideTooltipSelection(tooltip);
         dom.hideSplitTooltips();
         clearVisualState();
     };
-    const tooltipSvgNode = svg.node();
-    const queuedRender = createQueuedTooltipRender(tooltipSvgNode, (request) => {
+    const renderTooltip = (request) => {
+        if (!tooltipSvgNode) {
+            return;
+        }
+        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);
     overlay
         .on('mousemove', (event) => {
         const [mouseX, mouseY] = pointer(event, svg.node());
@@ -415,18 +448,7 @@ 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);
@@ -448,12 +470,12 @@ 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();
+    };
 }
 function normalizeFormatterValue(value) {
     if (value === null ||

package/dist/tooltip.d.ts

@@ -6,7 +6,7 @@ import { type XYTooltipSeries } from './tooltip/types.js';
 export declare class Tooltip implements ChartComponent<TooltipConfigBase> {
     private static nextTooltipId;
     readonly id: string;
-    readonly type: "tooltip";
+    readonly type: 'tooltip';
     readonly mode: TooltipMode;
     readonly position: TooltipPosition;
     readonly barAnchorPosition: TooltipBarAnchorPosition;

package/dist/word-cloud-chart.d.ts

@@ -31,13 +31,21 @@ export declare class WordCloudChart extends BaseChart {
     private hasRenderedLive;
     private nextRenderShouldAnimate;
     private previousWordSnapshot;
+    private resizeTimeout;
+    private pendingResize;
+    private resolvePendingResize;
     constructor(config: WordCloudChartConfig);
     update(data: ChartData): void;
     destroy(): void;
+    whenReady(): Promise<void>;
+    protected handleResize(): void;
+    private cancelPendingResize;
     protected validateSourceData(data: ChartData): void;
     protected renderChart({ svg, plotArea }: BaseRenderContext): void;
     protected createExportChart(): BaseChart;
     private prepareAnimationForUpdate;
+    private minimumFontSize;
+    private fitWordSizes;
     private startLayout;
     private renderWords;
     private shouldAnimateWords;

package/dist/word-cloud-chart.js

@@ -2,6 +2,7 @@ import cloud from 'd3-cloud';
 import { scaleSqrt } from 'd3';
 import { BaseChart, } from './base-chart.js';
 import { isGroupedData } from './grouped-data.js';
+import { measureTextWidth } from './utils.js';
 import { normalizeRadialAnimationConfig, } from './radial-animation.js';
 const DEFAULT_OPTIONS = {
     maxWords: 75,
@@ -14,6 +15,10 @@ const DEFAULT_OPTIONS = {
     spiral: 'archimedean',
 };
 const INITIAL_WORD_SCALE = 0.2;
+const MAX_LAYOUT_ATTEMPTS = 6;
+const LAYOUT_TIME_SLICE_MS = 8;
+const FONT_SIZE_REDUCTION = 0.75;
+const RESIZE_DEBOUNCE_MS = 150;
 const GROUPED_DATA_ERROR = 'WordCloudChart: grouped datasets are not supported; provide a flat array of rows instead';
 function createPreparedWords(data, plotArea, options, colors) {
     const counts = new Map();
@@ -54,6 +59,18 @@ function createPreparedWords(data, plotArea, options, colors) {
         };
     });
 }
+function getPlacedPrefix(words, placedWords) {
+    const placedByText = new Map(placedWords.map((word) => [word.text, word]));
+    const prefix = [];
+    // A missing common word must never be replaced by rarer words.
+    for (const word of words) {
+        const placed = placedByText.get(word.text);
+        if (!placed)
+            break;
+        prefix.push(placed);
+    }
+    return prefix;
+}
 export class WordCloudChart extends BaseChart {
     constructor(config) {
         super(config);
@@ -105,6 +122,24 @@ export class WordCloudChart extends BaseChart {
             writable: true,
             value: new Map()
         });
+        Object.defineProperty(this, "resizeTimeout", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "pendingResize", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "resolvePendingResize", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
         const wordCloud = config.wordCloud ?? {};
         this.options = {
             maxWords: wordCloud.maxWords ?? DEFAULT_OPTIONS.maxWords,
@@ -127,20 +162,62 @@ export class WordCloudChart extends BaseChart {
         super.update(data);
     }
     destroy() {
+        this.cancelPendingResize();
         this.layoutRunId += 1;
         this.stopLayout();
         this.setReadyPromise(Promise.resolve());
         super.destroy();
     }
+    whenReady() {
+        if (this.pendingResize) {
+            return this.pendingResize.then(() => super.whenReady());
+        }
+        return super.whenReady();
+    }
+    handleResize() {
+        if (!this.hasContainerSizeChanged()) {
+            this.cancelPendingResize();
+            return;
+        }
+        if (this.resizeTimeout !== null) {
+            clearTimeout(this.resizeTimeout);
+        }
+        // Keep the same promise throughout a burst of resize notifications.
+        if (!this.pendingResize) {
+            this.pendingResize = new Promise((resolve) => {
+                this.resolvePendingResize = resolve;
+            });
+        }
+        this.resizeTimeout = setTimeout(() => {
+            this.resizeTimeout = null;
+            try {
+                super.handleResize();
+            }
+            finally {
+                this.cancelPendingResize();
+            }
+        }, RESIZE_DEBOUNCE_MS);
+    }
+    cancelPendingResize() {
+        if (this.resizeTimeout !== null) {
+            clearTimeout(this.resizeTimeout);
+            this.resizeTimeout = null;
+        }
+        this.resolvePendingResize?.();
+        this.resolvePendingResize = null;
+        this.pendingResize = null;
+    }
     validateSourceData(data) {
         if (isGroupedData(data)) {
             throw new Error(GROUPED_DATA_ERROR);
         }
     }
     renderChart({ svg, plotArea }) {
+        this.cancelPendingResize();
         this.stopLayout();
         this.renderTitle(svg);
-        const words = createPreparedWords(this.data, plotArea, this.options, this.renderTheme.colorPalette);
+        const preparedWords = createPreparedWords(this.data, plotArea, this.options, this.renderTheme.colorPalette);
+        const words = this.fitWordSizes(preparedWords, plotArea, svg.node());
         this.setReadyPromise(new Promise((resolve) => {
             this.resolvePendingReady = resolve;
             this.startLayout(words, plotArea, ++this.layoutRunId, resolve);
@@ -163,9 +240,46 @@ export class WordCloudChart extends BaseChart {
                 this.animation.duration > 0 &&
                 this.hasRenderedLive;
     }
-    startLayout(words, plotArea, runId, resolve) {
+    minimumFontSize(plotArea) {
+        return Math.max(1, Math.ceil((Math.min(plotArea.width, plotArea.height) *
+            this.options.minFontSize) /
+            100));
+    }
+    fitWordSizes(words, plotArea, svg) {
+        const minimumSize = this.minimumFontSize(plotArea);
+        let scale = 1;
+        words.forEach((word, index) => {
+            // d3-cloud measures at size + 1 and rounds sprite widths to 32px.
+            const width = measureTextWidth(word.text, word.size + 1, this.renderTheme.fontFamily, String(this.renderTheme.valueLabel.fontWeight), svg) + 1;
+            const height = (word.size + 1) * 2;
+            let rotatedWidth = width;
+            let rotatedHeight = height;
+            if (this.options.rotation === 'right-angle' && index % 2 === 1) {
+                rotatedWidth = height;
+                rotatedHeight = width;
+            }
+            else if (this.options.rotation === undefined) {
+                // Leave room for any angle selected by d3-cloud.
+                rotatedWidth = rotatedHeight = Math.hypot(width, height);
+            }
+            const padding = this.options.padding * 2;
+            const fit = Math.min(1, Math.max(1, plotArea.width - 32 - padding) / rotatedWidth, Math.max(1, plotArea.height - padding) / rotatedHeight);
+            const fittedSize = (word.size + 1) * fit - 1;
+            if (word.size > minimumSize) {
+                scale = Math.min(scale, Math.max(0, (fittedSize - minimumSize) / (word.size - minimumSize)));
+            }
+        });
+        // Compress the range uniformly to preserve frequency order and the
+        // configured minimum size, including for long, high-frequency phrases.
+        return words.map((word) => ({
+            ...word,
+            size: Math.max(minimumSize, minimumSize + (word.size - minimumSize) * scale),
+        }));
+    }
+    startLayout(words, plotArea, runId, resolve, attempt = 1, bestWords = []) {
         const layout = cloud()
             .words(words.map((word) => ({ ...word })))
+            .timeInterval(LAYOUT_TIME_SLICE_MS)
             .size([
             Math.max(1, Math.floor(plotArea.width)),
             Math.max(1, Math.floor(plotArea.height)),
@@ -177,18 +291,39 @@ export class WordCloudChart extends BaseChart {
             .fontSize((word) => word.size)
             .text((word) => word.text)
             .on('end', (placedWords) => {
-            this.layout = null;
             if (runId !== this.layoutRunId ||
                 !this.plotGroup ||
                 !this.plotArea) {
                 this.finishReady(resolve);
                 return;
             }
-            if (placedWords.length < words.length) {
-                console.warn(`[Chart Warning] WordCloudChart: rendered ${placedWords.length} of ${words.length} words within the available area; reduce maxWords or font sizes to fit more words`);
+            this.layout = null;
+            const prioritizedWords = getPlacedPrefix(words, placedWords);
+            if (prioritizedWords.length > bestWords.length) {
+                bestWords = prioritizedWords;
             }
-            const transitions = this.renderWords(this.plotGroup, this.plotArea, placedWords);
-            this.completeRender(placedWords, transitions).then(() => {
+            if (bestWords.length < words.length &&
+                attempt < MAX_LAYOUT_ATTEMPTS) {
+                const minimumSize = this.minimumFontSize(plotArea);
+                const smallerWords = words.map((word) => ({
+                    ...word,
+                    // Always try the minimum on the final attempt.
+                    size: attempt === MAX_LAYOUT_ATTEMPTS - 1
+                        ? minimumSize
+                        : Math.max(minimumSize, word.size * FONT_SIZE_REDUCTION),
+                }));
+                const canShrink = smallerWords.some((word, index) => Math.floor(word.size) <
+                    Math.floor(words[index].size));
+                if (canShrink) {
+                    this.startLayout(smallerWords, plotArea, runId, resolve, attempt + 1, bestWords);
+                    return;
+                }
+            }
+            if (bestWords.length < words.length) {
+                console.warn(`[Chart Warning] WordCloudChart: rendered ${bestWords.length} of ${words.length} words within the available area after ${attempt} layout attempt(s); retained the highest-frequency words`);
+            }
+            const transitions = this.renderWords(this.plotGroup, this.plotArea, bestWords);
+            this.completeRender(bestWords, transitions).then(() => {
                 this.finishReady(resolve);
             });
         });
@@ -395,7 +530,9 @@ export class WordCloudChart extends BaseChart {
         this.resolvePendingReady = null;
     }
     finishReady(resolve) {
-        this.resolvePendingReady = null;
+        if (this.resolvePendingReady === resolve) {
+            this.resolvePendingReady = null;
+        }
         resolve();
     }
 }

package/dist/x-axis.d.ts

@@ -2,7 +2,7 @@ import { type Selection } from 'd3';
 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> {
-    readonly type: "xAxis";
+    readonly type: 'xAxis';
     readonly display: boolean;
     readonly dataKey?: string;
     readonly labelKey?: string;

package/dist/y-axis.d.ts

@@ -2,7 +2,7 @@ import { type Selection } from 'd3';
 import type { ChartTheme, YAxisConfig, D3Scale, ExportHooks, YAxisConfigBase } from './types.js';
 import type { LayoutAwareComponent, ComponentSpace } from './chart-interface.js';
 export declare class YAxis implements LayoutAwareComponent<YAxisConfigBase> {
-    readonly type: "yAxis";
+    readonly type: 'yAxis';
     readonly display: boolean;
     private readonly tickPadding;
     private fontSize;

package/docs/components.md

@@ -167,6 +167,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/docs/word-cloud-chart.md

@@ -126,7 +126,23 @@ chart.render('#word-cloud');
 ## Notes
 
 - `minFontSize` and `maxFontSize` use percentages of the smaller plot-area
-  dimension and define the relative size range passed into `d3-cloud`.
+  dimension and define the initial size range. The chart fits long phrases to
+  the available area and may reduce text sizes while preserving frequency order
+  and the configured minimum (rounded up to a whole pixel, at least one pixel).
+- Placement makes at most six attempts, stopping earlier when all words fit or
+  text sizes cannot shrink further. If a sixth attempt is needed, it uses the minimum text size.
+  Each attempt yields between short batches of work. Updating, resizing, or
+  destroying the chart cancels pending placement.
+- If words still do not fit, the chart retains the longest successfully placed
+  prefix of the frequency-sorted input across those attempts and logs a warning.
+  It never substitutes rarer words for a missing more frequent word. If even the
+  most frequent word cannot fit at the minimum size, the cloud may be empty.
+- `whenReady()` resolves after the final placement and any animation, including
+  when only part of the input can be rendered.
+- Container resizing is debounced by 150 ms. `whenReady()` also waits for a
+  pending resize and its layout. Initial renders and data updates remain
+  immediate. Updates, explicit renders, and destruction cancel queued resize
+  work; returning to the current rendered dimensions skips the rerender.
 - The chart uses theme typography and palette colors directly when configuring
   `d3-cloud` and rendering the final SVG.
 - If `rotation` is omitted, the chart uses the native `d3-cloud` rotate

package/package.json

@@ -1,5 +1,5 @@
 {
-    "version": "0.19.3",
+    "version": "0.20.1",
     "name": "@internetstiftelsen/charts",
     "type": "module",
     "sideEffects": false,
@@ -50,56 +50,57 @@
         "write-excel-file": "^4.1.1"
     },
     "devDependencies": {
-        "@chromatic-com/storybook": "^5.2.1",
+        "@chromatic-com/storybook": "^5.3.0",
         "@eslint/js": "^10.0.1",
-        "@handsontable/react-wrapper": "^17.1.0",
+        "@handsontable/react-wrapper": "^18.0.0",
         "@internetstiftelsen/styleguide": "^5.1.27",
-        "@radix-ui/react-label": "^2.1.9",
-        "@radix-ui/react-select": "^2.3.0",
-        "@radix-ui/react-switch": "^1.3.0",
-        "@radix-ui/react-tabs": "^1.1.14",
-        "@speed-highlight/core": "^1.2.17",
-        "@storybook/addon-a11y": "^10.4.6",
-        "@storybook/addon-docs": "^10.4.6",
-        "@storybook/addon-mcp": "^0.6.0",
-        "@storybook/addon-vitest": "^10.4.6",
-        "@storybook/react-vite": "^10.4.6",
-        "@tailwindcss/vite": "^4.3.1",
+        "@radix-ui/react-label": "^2.1.15",
+        "@radix-ui/react-select": "^2.3.7",
+        "@radix-ui/react-switch": "^1.3.7",
+        "@radix-ui/react-tabs": "^1.1.21",
+        "@speed-highlight/core": "^1.2.24",
+        "@storybook/addon-a11y": "^10.5.7",
+        "@storybook/addon-docs": "^10.5.7",
+        "@storybook/addon-mcp": "^0.7.0",
+        "@storybook/addon-vitest": "^10.5.7",
+        "@storybook/react-vite": "^10.5.7",
+        "@tailwindcss/vite": "^4.3.3",
         "@testing-library/dom": "^10.4.1",
-        "@testing-library/jest-dom": "^6.9.1",
+        "@testing-library/jest-dom": "^7.0.0",
         "@testing-library/react": "^16.3.2",
         "@types/d3": "^7.4.3",
         "@types/d3-cloud": "^1.2.9",
-        "@types/node": "^25.9.3",
-        "@types/react": "^19.2.17",
-        "@types/react-dom": "^19.2.3",
-        "@vitest/browser-playwright": "4.1.8",
-        "@vitest/coverage-v8": "4.1.8",
-        "@vitejs/plugin-react-swc": "^4.3.1",
+        "@types/node": "^26.2.0",
+        "@types/react": "^19.2.18",
+        "@types/react-dom": "^19.2.4",
+        "@typescript/native": "npm:typescript@~7.0.2",
+        "@vitejs/plugin-react": "^6.0.5",
+        "@vitest/browser-playwright": "4.1.10",
+        "@vitest/coverage-v8": "4.1.10",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
-        "eslint": "^10.5.0",
+        "eslint": "^10.8.1",
         "eslint-plugin-react-hooks": "^7.1.1",
-        "eslint-plugin-react-refresh": "^0.5.2",
-        "eslint-plugin-storybook": "^10.4.6",
-        "globals": "^17.6.0",
-        "handsontable": "^17.1.0",
-        "jsdom": "^29.1.1",
-        "lucide-react": "^1.18.0",
-        "playwright": "^1.61.1",
-        "prettier": "3.8.4",
-        "radix-ui": "^1.5.0",
-        "react": "^19.2.7",
-        "react-dom": "^19.2.7",
-        "sass": "^1.101.0",
-        "storybook": "^10.4.6",
+        "eslint-plugin-react-refresh": "^0.5.3",
+        "eslint-plugin-storybook": "^10.5.7",
+        "globals": "^17.9.0",
+        "handsontable": "^18.0.0",
+        "jsdom": "^30.0.1",
+        "lucide-react": "^1.30.0",
+        "playwright": "^1.62.1",
+        "prettier": "3.9.6",
+        "radix-ui": "^1.6.7",
+        "react": "^19.2.8",
+        "react-dom": "^19.2.8",
+        "sass": "^1.102.0",
+        "storybook": "^10.5.7",
         "tailwind-merge": "^3.6.0",
-        "tailwindcss": "^4.3.1",
-        "tsc-alias": "^1.8.17",
+        "tailwindcss": "^4.3.3",
+        "tsc-alias": "^1.9.1",
         "tw-animate-css": "^1.4.0",
-        "typescript": "~6.0.3",
-        "typescript-eslint": "^8.61.0",
-        "vite": "^8.0.16",
-        "vitest": "^4.1.8"
+        "typescript": "npm:@typescript/typescript6@~6.0.2",
+        "typescript-eslint": "^8.66.0",
+        "vite": "^8.2.1",
+        "vitest": "^4.1.10"
     }
 }