@internetstiftelsen/charts 0.13.1 → 0.13.3

package/README.md

@@ -13,7 +13,8 @@ A framework-agnostic, composable charting library built on D3.js with TypeScript
 - **Custom Value Labels** - XY, pie, and donut charts support optional on-chart labels with custom formatters
 - **Optional XY Animation** - Animate XY series on first render and `chart.update(...)` with `animate`
 - **Optional Gauge Animation** - Animate gauge value transitions with `gauge.animate`
-- **Stacking Control** - Bar stacking modes with optional reversed visual series order
+- **Stacking Control** - Bar and area stacking modes with optional reversed visual series order
+- **Configurable Tooltips** - Shared or split tooltips with connectors, transitions, and default max-width wrapping
 - **Axis Direction Control** - Use `scales.x.reverse` / `scales.y.reverse` to flip an axis when needed
 - **Flexible Scales** - Band, linear, time, and logarithmic scales (bar value axes stay linear)
 - **Explicit or Responsive Sizing** - Set top-level `width`/`height` or let the container drive size

package/dist/tooltip.d.ts

@@ -14,6 +14,7 @@ export declare class Tooltip implements ChartComponent<TooltipConfigBase> {
     readonly mode: TooltipMode;
     readonly position: TooltipPosition;
     readonly barAnchorPosition: TooltipBarAnchorPosition;
+    readonly maxWidth: number;
     readonly transition: Required<TooltipTransitionConfig>;
     readonly formatter?: (dataKey: string, value: DataValue, data: DataItem) => string;
     readonly labelFormatter?: (label: string, data: DataItem) => string;
@@ -68,6 +69,8 @@ export declare class Tooltip implements ChartComponent<TooltipConfigBase> {
     private resolveTooltipConnectorLayout;
     private resolveTooltipBoxArrowPosition;
     private resolveTooltipConnectorPath;
+    private isTooltipArrowTipInsideHorizontalAnchorSpan;
+    private isTooltipArrowTipInsideVerticalAnchorSpan;
     private resolveTooltipArrowTip;
     private hasFiniteNumbers;
     private resolveSplitTooltipCollisions;
@@ -75,7 +78,28 @@ export declare class Tooltip implements ChartComponent<TooltipConfigBase> {
     private getOppositeVerticalArrowEdge;
     private flipTooltipIfItReducesCollisions;
     private countSplitTooltipCollisions;
+    private countPlacedLayoutsOnEdge;
     private doSplitTooltipLayoutsOverlap;
     private resolveSplitTooltipPositions;
+    private resolveHorizontalChartSplitTooltipPositions;
+    private resolveVerticalChartSplitTooltipPositions;
+    private getSplitTooltipViewportBounds;
+    private groupSplitTooltipLayoutsByEdge;
+    private resolveSideSplitTooltipPositions;
+    private resolveHorizontalSideSplitTooltipPositions;
+    private resolveHorizontalSideSplitTooltipCollisions;
+    private flipHorizontalSideTooltipIfItReducesCollisions;
+    private findReusableHorizontalTooltipLane;
+    private resolveNewHorizontalTooltipLaneTop;
+    private getHorizontalTooltipLaneTopCandidates;
+    private assignLayoutToHorizontalTooltipLane;
+    private doHorizontalTooltipLanesOverlap;
+    private doSplitTooltipLayoutsOverlapHorizontally;
+    private resolveHorizontalChartAboveBelowSplitTooltipPositions;
+    private resolvePackedAboveBelowTooltipRow;
+    private resolveVerticalChartAboveBelowSplitTooltipPositions;
+    private resolveCollisionAwareAboveBelowTooltipPositions;
+    private resolveNonOverlappingAboveBelowTooltipLeft;
+    private doesSplitTooltipOverlapPlacedLayouts;
 }
 export {};

package/dist/tooltip.js

@@ -16,6 +16,7 @@ const TOOLTIP_ARROW_FILL_Z_INDEX = 5;
 const TOOLTIP_BODY_Z_INDEX = 6;
 const TOOLTIP_TOTAL_BORDER_WIDTH_PX = TOOLTIP_BORDER_WIDTH_PX * 2;
 const SPLIT_TOOLTIP_GAP_PX = 8;
+const DEFAULT_TOOLTIP_MAX_WIDTH_PX = 280;
 const DEFAULT_TOOLTIP_TRANSITION = {
     show: false,
     duration: 120,
@@ -55,6 +56,12 @@ export class Tooltip {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "maxWidth", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "transition", {
             enumerable: true,
             configurable: true,
@@ -109,13 +116,17 @@ export class Tooltip {
             writable: true,
             value: null
         });
-        const { mode = 'split', position = 'side', barAnchorPosition = 'middle', transition, formatter, labelFormatter, customFormatter, exportHooks, } = config;
+        const { mode = 'split', position = 'side', barAnchorPosition = 'middle', maxWidth, transition, formatter, labelFormatter, customFormatter, exportHooks, } = config;
         const tooltipId = Tooltip.nextTooltipId++;
         this.id = `iisChartTooltip-${tooltipId}`;
         this.splitTooltipOwner = `${this.id}-split`;
         this.mode = mode;
         this.position = position;
         this.barAnchorPosition = barAnchorPosition;
+        this.maxWidth =
+            maxWidth !== undefined && Number.isFinite(maxWidth) && maxWidth > 0
+                ? maxWidth
+                : DEFAULT_TOOLTIP_MAX_WIDTH_PX;
         this.transition = {
             ...DEFAULT_TOOLTIP_TRANSITION,
             ...transition,
@@ -130,6 +141,7 @@ export class Tooltip {
             mode: this.mode,
             position: this.position,
             barAnchorPosition: this.barAnchorPosition,
+            maxWidth: this.maxWidth,
             transition: this.transition,
             formatter: this.formatter,
             labelFormatter: this.labelFormatter,
@@ -454,11 +466,9 @@ export class Tooltip {
             if (layouts.length === 0) {
                 return;
             }
-            this.resolveSplitTooltipCollisions(layouts, 'vertical', this.getOppositeVerticalArrowEdge);
-            this.resolveSplitTooltipCollisions(layouts, 'side', this.getOppositeSideArrowEdge);
-            this.resolveSplitTooltipPositions(layouts);
+            this.resolveSplitTooltipPositions(layouts, isHorizontal);
             layouts.forEach((layout) => {
-                this.renderTooltipWithConnector(layout.div, layout.arrowEdge, layout.left, layout.top, layout.width, layout.height, layout.targetX, layout.targetY);
+                this.renderTooltipWithConnector(layout.div, layout.arrowEdge, layout.left, layout.top, layout.width, layout.height, layout.targetX, layout.targetY, layout.anchor);
             });
         };
         const hideTooltip = () => {
@@ -706,6 +716,7 @@ export class Tooltip {
             theme.tooltip.fontFamily,
             theme.tooltip.fontSize,
             theme.tooltip.fontWeight,
+            this.maxWidth,
             this.transition.show,
             this.transition.duration,
             this.transition.easing,
@@ -724,10 +735,13 @@ export class Tooltip {
             .style('font-family', theme.tooltip.fontFamily)
             .style('font-size', `${theme.tooltip.fontSize}px`)
             .style('font-weight', theme.tooltip.fontWeight)
+            .style('box-sizing', 'border-box')
+            .style('overflow-wrap', 'break-word')
             .style('overflow', 'visible')
             .style('isolation', 'isolate')
             .style('pointer-events', 'none')
             .style('z-index', '1000');
+        tooltip.style('max-width', `${this.maxWidth}px`);
         if (this.transition.show) {
             tooltip
                 .style('transition', `opacity ${this.transition.duration}ms ${this.transition.easing}, transform ${this.transition.duration}ms ${this.transition.easing}`)
@@ -758,7 +772,7 @@ export class Tooltip {
             height: tooltipRect.height,
         };
     }
-    renderTooltipWithConnector(tooltip, arrowEdge, left, top, tooltipWidth, tooltipHeight, targetX, targetY) {
+    renderTooltipWithConnector(tooltip, arrowEdge, left, top, tooltipWidth, tooltipHeight, targetX, targetY, anchor) {
         if (!Number.isFinite(left) ||
             !Number.isFinite(top) ||
             !Number.isFinite(targetX) ||
@@ -766,7 +780,7 @@ export class Tooltip {
             this.hideTooltipSelection(tooltip);
             return;
         }
-        const connectorLayout = this.resolveTooltipConnectorLayout(arrowEdge, left, top, tooltipWidth, tooltipHeight, targetX, targetY);
+        const connectorLayout = this.resolveTooltipConnectorLayout(arrowEdge, left, top, tooltipWidth, tooltipHeight, targetX, targetY, anchor);
         if (!connectorLayout) {
             this.hideTooltipSelection(tooltip);
             return;
@@ -1100,7 +1114,7 @@ export class Tooltip {
             top: Math.max(minTop, Math.min(top, maxTop)),
         };
     }
-    resolveTooltipConnectorLayout(arrowEdge, tooltipLeft, tooltipTop, tooltipWidth, tooltipHeight, targetX, targetY) {
+    resolveTooltipConnectorLayout(arrowEdge, tooltipLeft, tooltipTop, tooltipWidth, tooltipHeight, targetX, targetY, anchor) {
         const localTargetX = targetX - tooltipLeft;
         const localTargetY = targetY - tooltipTop;
         if (!Number.isFinite(localTargetX) || !Number.isFinite(localTargetY)) {
@@ -1120,7 +1134,9 @@ export class Tooltip {
         const startY = arrowTip.y - minY;
         const endX = localTargetX - minX;
         const endY = localTargetY - minY;
-        const connectorPath = this.resolveTooltipConnectorPath(arrowEdge, startX, startY, endX, endY);
+        const arrowTipX = tooltipLeft + arrowTip.x;
+        const arrowTipY = tooltipTop + arrowTip.y;
+        const connectorPath = this.resolveTooltipConnectorPath(arrowEdge, startX, startY, endX, endY, arrowTipX, arrowTipY, anchor);
         if (!this.hasFiniteNumbers(width, height, boxX, boxY, startX, startY, endX, endY)) {
             return null;
         }
@@ -1163,21 +1179,31 @@ export class Tooltip {
                 };
         }
     }
-    resolveTooltipConnectorPath(arrowEdge, startX, startY, endX, endY) {
+    resolveTooltipConnectorPath(arrowEdge, startX, startY, endX, endY, arrowTipX, arrowTipY, anchor) {
         if (arrowEdge === 'left' || arrowEdge === 'right') {
-            if (Math.abs(endY - startY) <=
-                TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX) {
+            if (this.isTooltipArrowTipInsideVerticalAnchorSpan(arrowTipY, anchor)) {
                 return '';
             }
             const elbowX = startX + (endX - startX) * TOOLTIP_CONNECTOR_ELBOW_RATIO;
             return `M ${startX},${startY} L ${elbowX},${startY} L ${endX},${endY}`;
         }
-        if (Math.abs(endX - startX) <= TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX) {
+        if (this.isTooltipArrowTipInsideHorizontalAnchorSpan(arrowTipX, anchor)) {
             return '';
         }
         const elbowY = startY + (endY - startY) * TOOLTIP_CONNECTOR_ELBOW_RATIO;
         return `M ${startX},${startY} L ${startX},${elbowY} L ${endX},${endY}`;
     }
+    isTooltipArrowTipInsideHorizontalAnchorSpan(arrowTipX, anchor) {
+        return (arrowTipX >=
+            anchor.left - TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX &&
+            arrowTipX <= anchor.right + TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX);
+    }
+    isTooltipArrowTipInsideVerticalAnchorSpan(arrowTipY, anchor) {
+        return (arrowTipY >=
+            anchor.top - TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX &&
+            arrowTipY <=
+                anchor.bottom + TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX);
+    }
     resolveTooltipArrowTip(arrowEdge, boxX, boxY, length) {
         if (arrowEdge === 'left' || arrowEdge === 'right') {
             return {
@@ -1198,7 +1224,12 @@ export class Tooltip {
             return;
         }
         const placedLayouts = [];
-        const orderedLayouts = [...layouts].sort((a, b) => a.targetY - b.targetY);
+        const orderedLayouts = [...layouts].sort((a, b) => {
+            if (position === 'vertical') {
+                return a.targetX - b.targetX || a.targetY - b.targetY;
+            }
+            return a.targetY - b.targetY || a.targetX - b.targetX;
+        });
         orderedLayouts.forEach((layout) => {
             this.flipTooltipIfItReducesCollisions(layout, placedLayouts, getOppositeArrowEdge);
             placedLayouts.push(layout);
@@ -1242,7 +1273,12 @@ export class Tooltip {
             top: flippedPosition.top,
         };
         const flippedCollisions = this.countSplitTooltipCollisions(flippedLayout, placedLayouts);
-        if (flippedCollisions >= currentCollisions) {
+        if (flippedCollisions > currentCollisions) {
+            return;
+        }
+        if (flippedCollisions === currentCollisions &&
+            this.countPlacedLayoutsOnEdge(placedLayouts, flippedArrowEdge) >=
+                this.countPlacedLayoutsOnEdge(placedLayouts, layout.arrowEdge)) {
             return;
         }
         layout.arrowEdge = flippedArrowEdge;
@@ -1252,15 +1288,53 @@ export class Tooltip {
     countSplitTooltipCollisions(layout, placedLayouts) {
         return placedLayouts.filter((placedLayout) => this.doSplitTooltipLayoutsOverlap(layout, placedLayout)).length;
     }
+    countPlacedLayoutsOnEdge(placedLayouts, arrowEdge) {
+        return placedLayouts.filter((layout) => layout.arrowEdge === arrowEdge)
+            .length;
+    }
     doSplitTooltipLayoutsOverlap(a, b) {
         return (a.left < b.left + b.width + SPLIT_TOOLTIP_GAP_PX &&
             a.left + a.width + SPLIT_TOOLTIP_GAP_PX > b.left &&
             a.top < b.top + b.height + SPLIT_TOOLTIP_GAP_PX &&
             a.top + a.height + SPLIT_TOOLTIP_GAP_PX > b.top);
     }
-    resolveSplitTooltipPositions(layouts) {
-        const minTop = window.scrollY + TOOLTIP_VIEWPORT_PADDING_PX;
-        const maxBottom = window.scrollY + window.innerHeight - TOOLTIP_VIEWPORT_PADDING_PX;
+    resolveSplitTooltipPositions(layouts, isHorizontal) {
+        if (isHorizontal) {
+            this.resolveHorizontalChartSplitTooltipPositions(layouts);
+            return;
+        }
+        this.resolveVerticalChartSplitTooltipPositions(layouts);
+    }
+    resolveHorizontalChartSplitTooltipPositions(layouts) {
+        if (this.position === 'vertical') {
+            this.resolveSplitTooltipCollisions(layouts, 'vertical', this.getOppositeVerticalArrowEdge);
+            this.resolveHorizontalChartAboveBelowSplitTooltipPositions(layouts);
+            return;
+        }
+        this.resolveHorizontalSideSplitTooltipPositions(layouts);
+    }
+    resolveVerticalChartSplitTooltipPositions(layouts) {
+        if (this.position === 'vertical') {
+            this.resolveSplitTooltipCollisions(layouts, 'vertical', this.getOppositeVerticalArrowEdge);
+            this.resolveVerticalChartAboveBelowSplitTooltipPositions(layouts);
+            return;
+        }
+        this.resolveSplitTooltipCollisions(layouts, 'side', this.getOppositeSideArrowEdge);
+        this.resolveSideSplitTooltipPositions(layouts);
+    }
+    getSplitTooltipViewportBounds() {
+        return {
+            minLeft: window.scrollX + TOOLTIP_VIEWPORT_PADDING_PX,
+            maxRight: window.scrollX +
+                window.innerWidth -
+                TOOLTIP_VIEWPORT_PADDING_PX,
+            minTop: window.scrollY + TOOLTIP_VIEWPORT_PADDING_PX,
+            maxBottom: window.scrollY +
+                window.innerHeight -
+                TOOLTIP_VIEWPORT_PADDING_PX,
+        };
+    }
+    groupSplitTooltipLayoutsByEdge(layouts) {
         const tooltipsByEdge = {
             left: [],
             right: [],
@@ -1270,6 +1344,11 @@ export class Tooltip {
         layouts.forEach((layout) => {
             tooltipsByEdge[layout.arrowEdge].push(layout);
         });
+        return tooltipsByEdge;
+    }
+    resolveSideSplitTooltipPositions(layouts) {
+        const { minTop, maxBottom } = this.getSplitTooltipViewportBounds();
+        const tooltipsByEdge = this.groupSplitTooltipLayoutsByEdge(layouts);
         Object.values(tooltipsByEdge).forEach((edgeLayouts) => {
             if (edgeLayouts.length === 0) {
                 return;
@@ -1309,6 +1388,197 @@ export class Tooltip {
             });
         });
     }
+    resolveHorizontalSideSplitTooltipPositions(layouts) {
+        this.resolveHorizontalSideSplitTooltipCollisions(layouts);
+        const minTop = window.scrollY + TOOLTIP_VIEWPORT_PADDING_PX;
+        const maxBottom = window.scrollY + window.innerHeight - TOOLTIP_VIEWPORT_PADDING_PX;
+        const lanes = [];
+        const orderedLayouts = [...layouts].sort((a, b) => a.targetX - b.targetX || a.left - b.left);
+        orderedLayouts.forEach((layout) => {
+            const maxTop = maxBottom - layout.height;
+            const preferredTop = Math.max(minTop, Math.min(layout.top, maxTop));
+            const reusableLane = this.findReusableHorizontalTooltipLane(lanes, layout, preferredTop);
+            if (reusableLane) {
+                this.assignLayoutToHorizontalTooltipLane(layout, reusableLane);
+                return;
+            }
+            const nextLane = {
+                top: this.resolveNewHorizontalTooltipLaneTop(preferredTop, layout.height, minTop, maxTop, lanes),
+                layouts: [],
+            };
+            lanes.push(nextLane);
+            this.assignLayoutToHorizontalTooltipLane(layout, nextLane);
+        });
+    }
+    resolveHorizontalSideSplitTooltipCollisions(layouts) {
+        const placedLayouts = [];
+        const orderedLayouts = [...layouts].sort((a, b) => a.targetX - b.targetX || a.left - b.left);
+        orderedLayouts.forEach((layout) => {
+            this.flipHorizontalSideTooltipIfItReducesCollisions(layout, placedLayouts);
+            placedLayouts.push(layout);
+        });
+    }
+    flipHorizontalSideTooltipIfItReducesCollisions(layout, placedLayouts) {
+        const currentCollisions = this.countSplitTooltipCollisions(layout, placedLayouts);
+        if (currentCollisions === 0) {
+            return;
+        }
+        const flippedArrowEdge = this.getOppositeSideArrowEdge(layout.arrowEdge);
+        if (!flippedArrowEdge) {
+            return;
+        }
+        const flippedPosition = this.getAnchoredTooltipPosition(layout.anchor, { x: layout.targetX, y: layout.targetY }, layout.width, layout.height, flippedArrowEdge);
+        if (!flippedPosition) {
+            return;
+        }
+        const flippedLayout = {
+            ...layout,
+            arrowEdge: flippedArrowEdge,
+            left: flippedPosition.left,
+            top: flippedPosition.top,
+        };
+        const flippedCollisions = this.countSplitTooltipCollisions(flippedLayout, placedLayouts);
+        if (flippedCollisions > currentCollisions) {
+            return;
+        }
+        if (flippedCollisions === currentCollisions &&
+            this.countPlacedLayoutsOnEdge(placedLayouts, flippedArrowEdge) >=
+                this.countPlacedLayoutsOnEdge(placedLayouts, layout.arrowEdge)) {
+            return;
+        }
+        layout.arrowEdge = flippedArrowEdge;
+        layout.left = flippedPosition.left;
+        layout.top = flippedPosition.top;
+    }
+    findReusableHorizontalTooltipLane(lanes, layout, preferredTop) {
+        const reusableLanes = lanes
+            .filter((lane) => lane.layouts.every((placedLayout) => !this.doSplitTooltipLayoutsOverlapHorizontally(layout, placedLayout)))
+            .sort((a, b) => Math.abs(a.top - preferredTop) -
+            Math.abs(b.top - preferredTop));
+        return reusableLanes[0] ?? null;
+    }
+    resolveNewHorizontalTooltipLaneTop(preferredTop, tooltipHeight, minTop, maxTop, lanes) {
+        const usedTops = new Set(lanes.map((lane) => Math.round(lane.top)));
+        const candidates = this.getHorizontalTooltipLaneTopCandidates(preferredTop, tooltipHeight, minTop, maxTop);
+        return (candidates.find((candidate) => !usedTops.has(Math.round(candidate)) &&
+            lanes.every((lane) => !this.doHorizontalTooltipLanesOverlap(candidate, tooltipHeight, lane))) ??
+            candidates[0] ??
+            preferredTop);
+    }
+    getHorizontalTooltipLaneTopCandidates(preferredTop, tooltipHeight, minTop, maxTop) {
+        const step = tooltipHeight + SPLIT_TOOLTIP_GAP_PX;
+        const candidates = [preferredTop];
+        for (let index = 1; index <= 8; index++) {
+            candidates.push(preferredTop - step * index);
+            candidates.push(preferredTop + step * index);
+        }
+        return Array.from(new Set(candidates.map((candidate) => Math.round(Math.max(minTop, Math.min(candidate, maxTop)))))).sort((a, b) => Math.abs(a - preferredTop) - Math.abs(b - preferredTop));
+    }
+    assignLayoutToHorizontalTooltipLane(layout, lane) {
+        layout.top = lane.top;
+        lane.layouts.push(layout);
+    }
+    doHorizontalTooltipLanesOverlap(top, height, lane) {
+        const laneHeight = lane.layouts.reduce((maxHeight, layout) => Math.max(maxHeight, layout.height), 0);
+        return (top < lane.top + laneHeight + SPLIT_TOOLTIP_GAP_PX &&
+            top + height + SPLIT_TOOLTIP_GAP_PX > lane.top);
+    }
+    doSplitTooltipLayoutsOverlapHorizontally(a, b) {
+        return (a.left < b.left + b.width + SPLIT_TOOLTIP_GAP_PX &&
+            a.left + a.width + SPLIT_TOOLTIP_GAP_PX > b.left);
+    }
+    resolveHorizontalChartAboveBelowSplitTooltipPositions(layouts) {
+        const bounds = this.getSplitTooltipViewportBounds();
+        const tooltipsByEdge = this.groupSplitTooltipLayoutsByEdge(layouts);
+        this.resolvePackedAboveBelowTooltipRow(tooltipsByEdge.top, bounds);
+        this.resolvePackedAboveBelowTooltipRow(tooltipsByEdge.bottom, bounds);
+        this.resolveSideSplitTooltipPositions([
+            ...tooltipsByEdge.left,
+            ...tooltipsByEdge.right,
+        ]);
+    }
+    resolvePackedAboveBelowTooltipRow(layouts, bounds) {
+        if (layouts.length === 0) {
+            return;
+        }
+        const orderedLayouts = [...layouts].sort((a, b) => a.left - b.left || a.targetX - b.targetX);
+        orderedLayouts.forEach((layout) => {
+            const maxTop = Math.max(bounds.minTop, bounds.maxBottom - layout.height);
+            layout.top = Math.max(bounds.minTop, Math.min(layout.top, maxTop));
+        });
+        const firstLayout = orderedLayouts[0];
+        const firstMaxLeft = Math.max(bounds.minLeft, bounds.maxRight - firstLayout.width);
+        firstLayout.left = Math.max(bounds.minLeft, Math.min(firstLayout.left, firstMaxLeft));
+        for (let i = 1; i < orderedLayouts.length; i++) {
+            const previousLayout = orderedLayouts[i - 1];
+            const currentLayout = orderedLayouts[i];
+            const minAllowedLeft = previousLayout.left +
+                previousLayout.width +
+                SPLIT_TOOLTIP_GAP_PX;
+            currentLayout.left = Math.max(currentLayout.left, minAllowedLeft);
+        }
+        const lastLayout = orderedLayouts[orderedLayouts.length - 1];
+        const overflow = lastLayout.left + lastLayout.width - bounds.maxRight;
+        if (overflow > 0) {
+            lastLayout.left -= overflow;
+            for (let i = orderedLayouts.length - 2; i >= 0; i--) {
+                const currentLayout = orderedLayouts[i];
+                const nextLayout = orderedLayouts[i + 1];
+                const maxAllowedLeft = nextLayout.left -
+                    currentLayout.width -
+                    SPLIT_TOOLTIP_GAP_PX;
+                currentLayout.left = Math.min(currentLayout.left, maxAllowedLeft);
+            }
+            const underflow = bounds.minLeft - orderedLayouts[0].left;
+            if (underflow > 0) {
+                orderedLayouts.forEach((layout) => {
+                    layout.left += underflow;
+                });
+            }
+        }
+        orderedLayouts.forEach((layout) => {
+            const maxLeft = Math.max(bounds.minLeft, bounds.maxRight - layout.width);
+            layout.left = Math.max(bounds.minLeft, Math.min(layout.left, maxLeft));
+        });
+    }
+    resolveVerticalChartAboveBelowSplitTooltipPositions(layouts) {
+        const bounds = this.getSplitTooltipViewportBounds();
+        const tooltipsByEdge = this.groupSplitTooltipLayoutsByEdge(layouts);
+        this.resolveCollisionAwareAboveBelowTooltipPositions(tooltipsByEdge.top, bounds);
+        this.resolveCollisionAwareAboveBelowTooltipPositions(tooltipsByEdge.bottom, bounds);
+        this.resolveSideSplitTooltipPositions([
+            ...tooltipsByEdge.left,
+            ...tooltipsByEdge.right,
+        ]);
+    }
+    resolveCollisionAwareAboveBelowTooltipPositions(layouts, bounds) {
+        const placedLayouts = [];
+        const orderedLayouts = [...layouts].sort((a, b) => a.left - b.left || a.top - b.top);
+        orderedLayouts.forEach((layout) => {
+            const maxLeft = Math.max(bounds.minLeft, bounds.maxRight - layout.width);
+            const maxTop = Math.max(bounds.minTop, bounds.maxBottom - layout.height);
+            layout.top = Math.max(bounds.minTop, Math.min(layout.top, maxTop));
+            layout.left = this.resolveNonOverlappingAboveBelowTooltipLeft(layout, placedLayouts, bounds.minLeft, maxLeft);
+            placedLayouts.push(layout);
+        });
+    }
+    resolveNonOverlappingAboveBelowTooltipLeft(layout, placedLayouts, minLeft, maxLeft) {
+        const preferredLeft = Math.max(minLeft, Math.min(layout.left, maxLeft));
+        if (!this.doesSplitTooltipOverlapPlacedLayouts({ ...layout, left: preferredLeft }, placedLayouts)) {
+            return preferredLeft;
+        }
+        const candidates = placedLayouts.flatMap((placedLayout) => [
+            placedLayout.left + placedLayout.width + SPLIT_TOOLTIP_GAP_PX,
+            placedLayout.left - layout.width - SPLIT_TOOLTIP_GAP_PX,
+        ]);
+        return (Array.from(new Set(candidates.map((candidate) => Math.round(Math.max(minLeft, Math.min(candidate, maxLeft))))))
+            .sort((a, b) => Math.abs(a - preferredLeft) -
+            Math.abs(b - preferredLeft))
+            .find((candidate) => !this.doesSplitTooltipOverlapPlacedLayouts({ ...layout, left: candidate }, placedLayouts)) ?? preferredLeft);
+    }
+    doesSplitTooltipOverlapPlacedLayouts(layout, placedLayouts) {
+        return placedLayouts.some((placedLayout) => this.doSplitTooltipLayoutsOverlap(layout, placedLayout));
+    }
 }
 Object.defineProperty(Tooltip, "nextTooltipId", {
     enumerable: true,

package/dist/types.d.ts

@@ -253,6 +253,7 @@ export type BarStackConfig = {
 export type AreaStackMode = 'none' | 'normal' | 'percent';
 export type AreaStackConfig = {
     mode?: AreaStackMode;
+    reverseSeries?: boolean;
 };
 export declare function getSeriesColor(series: {
     stroke?: string;
@@ -308,6 +309,7 @@ export type TooltipConfigBase = {
     mode?: TooltipMode;
     position?: TooltipPosition;
     barAnchorPosition?: TooltipBarAnchorPosition;
+    maxWidth?: number;
     transition?: TooltipTransitionConfig;
     formatter?: SeriesValueFormatter;
     labelFormatter?: (label: string, data: DataItem) => string;

package/dist/xy-chart.d.ts

@@ -15,6 +15,7 @@ export declare class XYChart extends BaseChart {
     private barStackGap;
     private barStackReverseSeries;
     private areaStackMode;
+    private areaStackReverseSeries;
     private readonly orientation;
     private readonly motionDriver;
     private scaleConfigOverride;
@@ -39,6 +40,8 @@ export declare class XYChart extends BaseChart {
     private resolveValueAxisDomain;
     private getVisibleSeries;
     private getDisplaySeries;
+    private getBarDisplaySeries;
+    private getAreaDisplaySeries;
     private resolveSeriesDefaults;
     private shouldReplaceSeriesColor;
     private cloneSeriesWithOverride;

package/dist/xy-chart.js

@@ -14,8 +14,11 @@ function resolveBarStackSettings(config) {
         reverseSeries: config.barStack?.reverseSeries ?? false,
     };
 }
-function resolveAreaStackMode(config) {
-    return config.areaStack?.mode ?? 'none';
+function resolveAreaStackSettings(config) {
+    return {
+        mode: config.areaStack?.mode ?? 'none',
+        reverseSeries: config.areaStack?.reverseSeries ?? false,
+    };
 }
 function isXYSeries(component) {
     return (component.type === 'line' ||
@@ -56,6 +59,12 @@ export class XYChart extends BaseChart {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "areaStackReverseSeries", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "orientation", {
             enumerable: true,
             configurable: true,
@@ -75,11 +84,13 @@ export class XYChart extends BaseChart {
             value: null
         });
         const barStack = resolveBarStackSettings(config);
+        const areaStack = resolveAreaStackSettings(config);
         this.orientation = config.orientation ?? 'vertical';
         this.barStackMode = barStack.mode;
         this.barStackGap = barStack.gap;
         this.barStackReverseSeries = barStack.reverseSeries;
-        this.areaStackMode = resolveAreaStackMode(config);
+        this.areaStackMode = areaStack.mode;
+        this.areaStackReverseSeries = areaStack.reverseSeries;
         this.motionDriver = createXYMotionDriver(config.animate);
     }
     addChild(component) {
@@ -120,6 +131,7 @@ export class XYChart extends BaseChart {
             },
             areaStack: {
                 mode: this.areaStackMode,
+                reverseSeries: this.areaStackReverseSeries,
             },
             animate: false,
         });
@@ -289,18 +301,22 @@ export class XYChart extends BaseChart {
         });
     }
     getDisplaySeries() {
+        const barOrderedSeries = this.getBarDisplaySeries(this.series);
+        return this.getAreaDisplaySeries(barOrderedSeries);
+    }
+    getBarDisplaySeries(series) {
         if (!this.barStackReverseSeries) {
-            return this.series;
+            return series;
         }
-        const barSeries = this.series.filter((entry) => {
+        const barSeries = series.filter((entry) => {
             return entry.type === 'bar';
         });
         if (barSeries.length < 2) {
-            return this.series;
+            return series;
         }
         const reversedBars = [...barSeries].reverse();
         let reversedBarIndex = 0;
-        return this.series.map((entry) => {
+        return series.map((entry) => {
             if (entry.type !== 'bar') {
                 return entry;
             }
@@ -309,6 +325,31 @@ export class XYChart extends BaseChart {
             return nextBar;
         });
     }
+    getAreaDisplaySeries(series) {
+        if (!this.areaStackReverseSeries || this.areaStackMode === 'none') {
+            return series;
+        }
+        const areaSeries = series.filter((entry) => {
+            return entry.type === 'area';
+        });
+        const stackGroups = this.getStackedAreaGroups(areaSeries);
+        if (stackGroups.size === 0) {
+            return series;
+        }
+        const reversedSeriesByOriginal = new Map();
+        stackGroups.forEach((stackSeries) => {
+            const reversedStackSeries = [...stackSeries].reverse();
+            stackSeries.forEach((entry, index) => {
+                reversedSeriesByOriginal.set(entry, reversedStackSeries[index]);
+            });
+        });
+        return series.map((entry) => {
+            if (entry.type !== 'area') {
+                return entry;
+            }
+            return reversedSeriesByOriginal.get(entry) ?? entry;
+        });
+    }
     resolveSeriesDefaults(series) {
         const colorIndex = this.series.length % this.theme.colorPalette.length;
         const paletteColor = this.theme.colorPalette[colorIndex];

package/docs/components.md

@@ -122,6 +122,7 @@ new Tooltip({
     mode?: 'shared' | 'split',
     position?: 'side' | 'vertical',
     barAnchorPosition?: 'top' | 'middle',
+    maxWidth?: number, // default: 280
     transition?: {
         show?: boolean,
         duration?: number,
@@ -155,6 +156,9 @@ possible.
 For bars, `barAnchorPosition` controls whether split tooltips point to the `top`
 or `middle` of each bar.
 
+Tooltips default to a `280px` max width so longer content wraps. Set `maxWidth`
+to choose a different cap in pixels.
+
 Set `transition.show: true` to fade tooltips in and out. Tooltip position and
 connector geometry update immediately; only opacity and the small entrance
 offset transition.

package/docs/xy-chart.md

@@ -20,7 +20,7 @@ new XYChart(config: XYChartConfig)
 | `orientation` | `'vertical' \| 'horizontal'`       | `'vertical'`                                         | Chart orientation. Horizontal mode currently supports bar-only charts |
 | `responsive`  | `ResponsiveConfig`                 | -                                                    | Container-query responsive overrides (theme + components)             |
 | `barStack`    | `BarStackConfig`                   | `{ mode: 'normal', gap: 0.1, reverseSeries: false }` | Bar stacking configuration                                            |
-| `areaStack`   | `AreaStackConfig`                  | `{ mode: 'none' }`                                   | Area stacking configuration                                           |
+| `areaStack`   | `AreaStackConfig`                  | `{ mode: 'none', reverseSeries: false }`             | Area stacking configuration                                           |
 | `animate`     | `boolean \| XYAnimationConfig`     | `false`                                              | Opt-in XY series animation for initial render and `update()`          |
 
 ### Theme Options
@@ -515,6 +515,8 @@ series at the hovered category. Use
 to override the grouping and split-tooltip placement.
 For bars, set `barAnchorPosition: 'top' | 'middle'` to choose whether split
 tooltips point to the top or middle of each bar.
+Tooltips default to a `280px` max width. Set `maxWidth` to choose a different
+cap in pixels.
 Use `transition: { show: true, duration: 120, easing: 'ease-out' }` to opt in
 to softer tooltip opacity transitions without delaying position updates.
 
@@ -576,12 +578,16 @@ Area charts support stacking when series share the same `stackId`:
 ```javascript
 const chart = new XYChart({
     data,
-    areaStack: { mode: 'percent' },
+    areaStack: { mode: 'percent', reverseSeries: true },
 });
 
 chart.addChild(new Area({ dataKey: 'desktop', stackId: 'traffic' })).addChild(new Area({ dataKey: 'mobile', stackId: 'traffic' }));
 ```
 
+Use `areaStack.reverseSeries: true` to reverse stacked area series display order
+for rendering, legend entries, and split tooltip ordering without changing data
+exports. The reversal applies within each shared `stackId` group.
+
 ---
 
 ## Mixed Charts

package/package.json

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