@internetstiftelsen/charts 0.18.0 → 0.18.2

package/README.md

@@ -16,7 +16,7 @@ A framework-agnostic, composable charting library built on D3.js with TypeScript
 - **Optional Radial Animation** - Animate pie and donut segments on first render and `chart.update(...)` with `animate`
 - **Optional Gauge Animation** - Animate gauge value transitions with `gauge.animate`
 - **Stacking Control** - Bar and area stacking modes with optional reversed visual series order
-- **Configurable Tooltips** - Shared, split, or single tooltips with connectors, transitions, color-coded series styling, and default max-width wrapping
+- **Configurable Tooltips** - Shared, split, or single tooltips with connectors, transitions, color-coded series styling, optional series border and connector overrides, 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
@@ -65,6 +65,19 @@ pnpm dev:docs
 Runs the marketing landing page (`docs.html`) built on
 `@internetstiftelsen/styleguide`.
 
+```bash
+pnpm storybook
+```
+
+Runs Storybook on port 6006 with categorized chart examples for quickly
+checking chart types and configuration combinations.
+
+```bash
+pnpm build-storybook
+```
+
+Builds the static Storybook output.
+
 ## Build Targets
 
 ```bash

package/dist/theme.js

@@ -107,6 +107,7 @@ export const defaultTheme = {
     tooltip: {
         background: '#ffffff',
         border: '#dddddd',
+        seriesBorderColor: '#ffffff',
         color: '#1f2a36',
         fontFamily: SYSTEM_FONT,
         fontSize: 12,
@@ -268,6 +269,7 @@ export const newspaperTheme = {
     tooltip: {
         background: '#111111',
         border: '#111111',
+        seriesBorderColor: '#ffffff',
         color: '#ffffff',
         fontFamily: 'Georgia, "Times New Roman", Times, serif',
         fontSize: 11,

package/dist/tooltip/dom.d.ts

@@ -6,7 +6,10 @@ type TooltipDomConfig = {
     maxWidth: number;
     transition: Required<TooltipTransitionConfig>;
 };
-export type TooltipStyleOverrides = Partial<Pick<ChartTheme['tooltip'], 'background' | 'border' | 'color'>>;
+type ResolvedTooltipStyle = ChartTheme['tooltip'] & {
+    connectorColor: string;
+};
+export type TooltipStyleOverrides = Partial<Pick<ResolvedTooltipStyle, 'background' | 'border' | 'color' | 'connectorColor'>>;
 export declare class TooltipDom {
     private readonly id;
     private readonly splitTooltipOwner;

package/dist/tooltip/dom.js

@@ -214,15 +214,21 @@ export class TooltipDom {
         this.writeTooltipStyles(tooltip, tooltipStyle);
     }
     resolveTooltipStyle(theme, styleOverrides) {
+        const border = styleOverrides?.border ?? theme.tooltip.border;
         return {
             ...theme.tooltip,
             ...styleOverrides,
+            border,
+            connectorColor: styleOverrides?.connectorColor ??
+                styleOverrides?.border ??
+                theme.tooltip.border,
         };
     }
     getTooltipStyleKey(tooltipStyle) {
         return [
             tooltipStyle.background,
             tooltipStyle.border,
+            tooltipStyle.connectorColor,
             tooltipStyle.color,
             tooltipStyle.fontFamily,
             tooltipStyle.fontSize,
@@ -365,7 +371,7 @@ export class TooltipDom {
     }
     appendTooltipConnector(tooltip, connectorLayout) {
         const tooltipStyle = this.getTooltipStyle(tooltip);
-        const tooltipBorder = tooltipStyle?.border ?? '#dddddd';
+        const connectorColor = tooltipStyle?.connectorColor ?? '#dddddd';
         const connector = tooltip
             .append('svg')
             .attr('data-chart-tooltip-connector', 'true')
@@ -385,7 +391,7 @@ export class TooltipDom {
             .attr('data-chart-tooltip-connector-path', 'true')
             .attr('d', connectorLayout.path)
             .attr('fill', 'none')
-            .attr('stroke', tooltipBorder)
+            .attr('stroke', connectorColor)
             .attr('stroke-width', 1.25)
             .attr('stroke-linecap', 'round')
             .attr('stroke-linejoin', 'round');

package/dist/tooltip/geometry.js

@@ -1,6 +1,7 @@
-import { SPLIT_TOOLTIP_GAP_PX, TOOLTIP_BOX_ARROW_LENGTH_PX, TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX, TOOLTIP_CONNECTOR_ELBOW_RATIO, TOOLTIP_CONNECTOR_INSET_PX, TOOLTIP_CONNECTOR_PADDING_PX, TOOLTIP_OFFSET_PX, TOOLTIP_TOTAL_BORDER_WIDTH_PX, TOOLTIP_VIEWPORT_PADDING_PX, } from './types.js';
+import { SPLIT_TOOLTIP_GAP_PX, TOOLTIP_BOX_ARROW_LENGTH_PX, TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX, TOOLTIP_CONNECTOR_ELBOW_RATIO, TOOLTIP_CONNECTOR_INSET_PX, TOOLTIP_CONNECTOR_MIN_PATH_LENGTH_PX, TOOLTIP_CONNECTOR_PADDING_PX, TOOLTIP_OFFSET_PX, TOOLTIP_TOTAL_BORDER_WIDTH_PX, TOOLTIP_VIEWPORT_PADDING_PX, } from './types.js';
 const MAX_EXHAUSTIVE_HORIZONTAL_ROW_LAYOUTS = 10;
 const HORIZONTAL_ROW_ORDER_FLIP_PENALTY_PX = 128;
+const AUTO_BAR_TOOLTIP_CONNECTOR_MIN_PATH_LENGTH_PX = 8;
 export function getSplitTooltipViewportBounds() {
     const visualViewport = window.visualViewport;
     const viewportLeft = window.scrollX + (visualViewport?.offsetLeft ?? 0);
@@ -98,13 +99,16 @@ export function getAnchoredTooltipPosition(anchor, target, tooltipWidth, tooltip
     };
 }
 export function resolveTooltipConnectorLayout(arrowEdge, tooltipLeft, tooltipTop, tooltipWidth, tooltipHeight, targetX, targetY, anchor) {
-    const localTargetX = targetX - tooltipLeft;
-    const localTargetY = targetY - tooltipTop;
+    const boxArrowPosition = resolveTooltipBoxArrowPosition(arrowEdge, tooltipLeft, tooltipTop, tooltipWidth, tooltipHeight, targetX, targetY);
+    const arrowTip = resolveTooltipArrowTip(arrowEdge, boxArrowPosition.x, boxArrowPosition.y, TOOLTIP_BOX_ARROW_LENGTH_PX);
+    const arrowTipX = tooltipLeft + arrowTip.x;
+    const arrowTipY = tooltipTop + arrowTip.y;
+    const connectorTarget = resolveTooltipConnectorTarget(arrowEdge, targetX, targetY, arrowTipX, arrowTipY, anchor);
+    const localTargetX = connectorTarget.x - tooltipLeft;
+    const localTargetY = connectorTarget.y - tooltipTop;
     if (!Number.isFinite(localTargetX) || !Number.isFinite(localTargetY)) {
         return null;
     }
-    const boxArrowPosition = resolveTooltipBoxArrowPosition(arrowEdge, tooltipLeft, tooltipTop, tooltipWidth, tooltipHeight, targetX, targetY);
-    const arrowTip = resolveTooltipArrowTip(arrowEdge, boxArrowPosition.x, boxArrowPosition.y, TOOLTIP_BOX_ARROW_LENGTH_PX);
     const minX = Math.min(arrowTip.x, localTargetX) - TOOLTIP_CONNECTOR_PADDING_PX;
     const maxX = Math.max(arrowTip.x, localTargetX) + TOOLTIP_CONNECTOR_PADDING_PX;
     const minY = Math.min(arrowTip.y, localTargetY) - TOOLTIP_CONNECTOR_PADDING_PX;
@@ -117,9 +121,7 @@ export function resolveTooltipConnectorLayout(arrowEdge, tooltipLeft, tooltipTop
     const startY = arrowTip.y - minY;
     const endX = localTargetX - minX;
     const endY = localTargetY - minY;
-    const arrowTipX = tooltipLeft + arrowTip.x;
-    const arrowTipY = tooltipTop + arrowTip.y;
-    const connectorPath = resolveTooltipConnectorPath(arrowEdge, startX, startY, endX, endY, arrowTipX, arrowTipY, anchor);
+    const connectorPath = resolveTooltipConnectorPath(arrowEdge, startX, startY, endX, endY, arrowTipX, arrowTipY, anchor, connectorTarget.preferDirectPath);
     if (!hasFiniteNumbers(width, height, boxX, boxY, startX, startY, endX, endY)) {
         return null;
     }
@@ -134,6 +136,43 @@ export function resolveTooltipConnectorLayout(arrowEdge, tooltipLeft, tooltipTop
         arrowY: boxArrowPosition.y,
     };
 }
+function resolveTooltipConnectorTarget(arrowEdge, targetX, targetY, arrowTipX, arrowTipY, anchor) {
+    if (isPointTooltipAnchor(anchor)) {
+        return { x: targetX, y: targetY, preferDirectPath: false };
+    }
+    if (arrowEdge === 'left') {
+        return {
+            x: anchor.right,
+            y: clampTooltipCoordinate(arrowTipY, anchor.top, anchor.bottom),
+            preferDirectPath: true,
+        };
+    }
+    if (arrowEdge === 'right') {
+        return {
+            x: anchor.left,
+            y: clampTooltipCoordinate(arrowTipY, anchor.top, anchor.bottom),
+            preferDirectPath: true,
+        };
+    }
+    if (arrowEdge === 'top') {
+        return {
+            x: clampTooltipCoordinate(arrowTipX, anchor.left, anchor.right),
+            y: anchor.bottom,
+            preferDirectPath: true,
+        };
+    }
+    return {
+        x: clampTooltipCoordinate(arrowTipX, anchor.left, anchor.right),
+        y: anchor.top,
+        preferDirectPath: true,
+    };
+}
+function isPointTooltipAnchor(anchor) {
+    return (Math.abs(anchor.left - anchor.right) <=
+        TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX &&
+        Math.abs(anchor.top - anchor.bottom) <=
+            TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX);
+}
 export function resolveTooltipArrowPosition(arrowEdge, boxX, boxY, length, halfHeight) {
     switch (arrowEdge) {
         case 'left':
@@ -175,7 +214,7 @@ export function resolveSplitTooltipPositions(layouts, position, bounds = getSpli
         return;
     }
     const arrowEdge = resolveSidePlacementArrowEdge(getCombinedSplitTooltipAnchor(layouts), Math.max(...layouts.map((layout) => layout.width)), bounds);
-    const orderedLayouts = getVerticallyOrderedSplitTooltipLayouts(layouts);
+    const orderedLayouts = getSideSplitTooltipLayouts(layouts);
     positionSideSplitTooltipStack(orderedLayouts, arrowEdge, bounds);
 }
 function resolveTooltipBoxArrowPosition(arrowEdge, tooltipLeft, tooltipTop, tooltipWidth, tooltipHeight, targetX, targetY) {
@@ -210,17 +249,26 @@ function getTooltipConnectorOffset(start, size, target) {
     const preferredOffset = target - start;
     return Math.max(minOffset, Math.min(preferredOffset, maxOffset));
 }
-function resolveTooltipConnectorPath(arrowEdge, startX, startY, endX, endY, arrowTipX, arrowTipY, anchor) {
+function resolveTooltipConnectorPath(arrowEdge, startX, startY, endX, endY, arrowTipX, arrowTipY, anchor, preferDirectPath) {
     if (arrowEdge === 'left' || arrowEdge === 'right') {
-        if (isTooltipArrowTipInsideVerticalAnchorSpan(arrowTipY, anchor)) {
+        const minPathLength = preferDirectPath
+            ? AUTO_BAR_TOOLTIP_CONNECTOR_MIN_PATH_LENGTH_PX
+            : TOOLTIP_CONNECTOR_MIN_PATH_LENGTH_PX;
+        if (isTooltipArrowTipNearVerticalAnchorSpan(arrowTipY, anchor, minPathLength)) {
             return '';
         }
+        if (preferDirectPath) {
+            return `M ${startX},${startY} L ${endX},${endY}`;
+        }
         const elbowX = startX + (endX - startX) * TOOLTIP_CONNECTOR_ELBOW_RATIO;
         return `M ${startX},${startY} L ${elbowX},${startY} L ${endX},${endY}`;
     }
     if (isTooltipArrowTipInsideHorizontalAnchorSpan(arrowTipX, anchor)) {
         return '';
     }
+    if (preferDirectPath) {
+        return `M ${startX},${startY} L ${endX},${endY}`;
+    }
     const elbowY = startY + (endY - startY) * TOOLTIP_CONNECTOR_ELBOW_RATIO;
     return `M ${startX},${startY} L ${startX},${elbowY} L ${endX},${endY}`;
 }
@@ -232,6 +280,13 @@ function isTooltipArrowTipInsideVerticalAnchorSpan(arrowTipY, anchor) {
     return (arrowTipY >= anchor.top - TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX &&
         arrowTipY <= anchor.bottom + TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX);
 }
+function isTooltipArrowTipNearVerticalAnchorSpan(arrowTipY, anchor, minPathLength = TOOLTIP_CONNECTOR_MIN_PATH_LENGTH_PX) {
+    if (isTooltipArrowTipInsideVerticalAnchorSpan(arrowTipY, anchor)) {
+        return true;
+    }
+    return (arrowTipY >= anchor.top - minPathLength &&
+        arrowTipY <= anchor.bottom + minPathLength);
+}
 function resolveTooltipArrowTip(arrowEdge, boxX, boxY, length) {
     if (arrowEdge === 'left' || arrowEdge === 'right') {
         return {
@@ -278,6 +333,15 @@ function getCombinedSplitTooltipTarget(layouts) {
         y: (minY + maxY) / 2,
     };
 }
+function getSideSplitTooltipLayouts(layouts) {
+    if (layouts.every((layout) => layout.targetMode === 'auto')) {
+        return [...layouts].sort((a, b) => a.anchor.top - b.anchor.top ||
+            a.anchor.bottom - b.anchor.bottom ||
+            a.anchor.left - b.anchor.left ||
+            a.order - b.order);
+    }
+    return getVerticallyOrderedSplitTooltipLayouts(layouts);
+}
 function resolveHorizontalSideSplitTooltipPositions(layouts, bounds) {
     const rowPlacement = getBestHorizontalSideRowPlacement(getHorizontallyOrderedSplitTooltipLayouts(layouts), bounds);
     rowPlacement.placements.forEach(({ layout, left, top, arrowEdge }) => {
@@ -424,6 +488,7 @@ function getHorizontalAboveBelowRowPlacement(layouts, assignment, preferredEdges
         const rowLayouts = layouts.filter((_, index) => assignment[index] === arrowEdge);
         return packHorizontalAboveBelowRow(rowLayouts, arrowEdge, bounds);
     });
+    separateOverlappingHorizontalTooltipRows(placements, bounds);
     const preferredEdgeByLayout = new Map(layouts.map((layout, index) => [layout, preferredEdges[index]]));
     const score = placements.reduce((sum, placement) => {
         const preferredEdge = preferredEdgeByLayout.get(placement.layout) ??
@@ -493,6 +558,59 @@ function packHorizontalTooltipRow(placements, bounds) {
     }
     return placements;
 }
+function separateOverlappingHorizontalTooltipRows(placements, bounds) {
+    if (placements.length < 2) {
+        return;
+    }
+    const orderedPlacements = [...placements].sort((a, b) => a.top - b.top ||
+        a.left - b.left ||
+        a.layout.targetX - b.layout.targetX ||
+        a.layout.order - b.layout.order);
+    for (let index = 0; index < orderedPlacements.length; index++) {
+        const placement = orderedPlacements[index];
+        for (let previousIndex = 0; previousIndex < index; previousIndex++) {
+            const previousPlacement = orderedPlacements[previousIndex];
+            if (!doHorizontalTooltipPlacementsOverlap(placement, previousPlacement)) {
+                continue;
+            }
+            placement.top = Math.max(placement.top, previousPlacement.top +
+                previousPlacement.layout.height +
+                SPLIT_TOOLTIP_GAP_PX);
+        }
+    }
+    const overflow = Math.max(...orderedPlacements.map((placement) => placement.top + placement.layout.height)) - bounds.maxBottom;
+    if (overflow > 0) {
+        orderedPlacements.forEach((placement) => {
+            placement.top -= overflow;
+        });
+    }
+    for (let index = orderedPlacements.length - 2; index >= 0; index--) {
+        const placement = orderedPlacements[index];
+        for (let nextIndex = orderedPlacements.length - 1; nextIndex > index; nextIndex--) {
+            const nextPlacement = orderedPlacements[nextIndex];
+            if (!doHorizontalTooltipPlacementsOverlap(placement, nextPlacement)) {
+                continue;
+            }
+            placement.top = Math.min(placement.top, nextPlacement.top -
+                placement.layout.height -
+                SPLIT_TOOLTIP_GAP_PX);
+        }
+    }
+    const underflow = bounds.minTop -
+        Math.min(...orderedPlacements.map((placement) => placement.top));
+    if (underflow <= 0) {
+        return;
+    }
+    orderedPlacements.forEach((placement) => {
+        placement.top += underflow;
+    });
+}
+function doHorizontalTooltipPlacementsOverlap(first, second) {
+    return (first.left < second.left + second.layout.width + SPLIT_TOOLTIP_GAP_PX &&
+        first.left + first.layout.width + SPLIT_TOOLTIP_GAP_PX > second.left &&
+        first.top < second.top + second.layout.height + SPLIT_TOOLTIP_GAP_PX &&
+        first.top + first.layout.height + SPLIT_TOOLTIP_GAP_PX > second.top);
+}
 function getHorizontalAboveBelowIdealLeft(layout) {
     const centeredLeft = layout.targetX - layout.width / 2;
     if (layout.targetMode === 'auto') {
@@ -513,8 +631,13 @@ function getHorizontalAboveBelowPlacementCost(candidate, layout, preferredEdge,
         ? 0
         : layout.height * 4;
     const xDistance = Math.abs(layout.targetX - (candidate.left + layout.width / 2));
+    const yDistance = Math.abs(candidate.top - getHorizontalAboveBelowTop(layout, candidate.arrowEdge));
     const overflowPenalty = getSplitTooltipBoxPlacementOverflow(candidate, layout, bounds) * 20;
-    return connectorPenalty + edgePenalty + xDistance + overflowPenalty;
+    return (connectorPenalty +
+        edgePenalty +
+        xDistance +
+        yDistance * 0.5 +
+        overflowPenalty);
 }
 function getPreferredAndOppositeEdges(preferredEdge) {
     if (preferredEdge === 'bottom') {
@@ -544,28 +667,14 @@ function getSplitTooltipBoxPlacementOverflow(candidate, layout, bounds) {
         Math.max(0, candidate.top + layout.height - bounds.maxBottom));
 }
 function positionSideSplitTooltipStack(layouts, arrowEdge, bounds) {
-    const placementOrder = getSidePlacementOrder(layouts);
     const placedLayouts = [];
-    placementOrder.forEach((layout) => {
+    layouts.forEach((layout) => {
         layout.arrowEdge = arrowEdge;
         layout.left = getSideTooltipLeft(layout, arrowEdge, bounds);
         positionSideSplitTooltip(layout, placedLayouts, layouts, bounds);
         placedLayouts.push(layout);
     });
 }
-function getSidePlacementOrder(layouts) {
-    if (!layouts.every((layout) => layout.targetMode === 'auto')) {
-        return layouts;
-    }
-    return [...layouts].sort((a, b) => {
-        return (getTooltipAnchorVerticalSpan(a) - getTooltipAnchorVerticalSpan(b) ||
-            a.targetY - b.targetY ||
-            a.order - b.order);
-    });
-}
-function getTooltipAnchorVerticalSpan(layout) {
-    return layout.anchor.bottom - layout.anchor.top;
-}
 function getSideTooltipLeft(layout, arrowEdge, bounds) {
     const preferredLeft = arrowEdge === 'left'
         ? layout.anchor.right + TOOLTIP_OFFSET_PX
@@ -602,6 +711,15 @@ function getSidePlacementCandidates(layout, placedLayouts, allLayouts, bounds) {
     ];
     if (layout.targetMode === 'auto') {
         const connectorlessRange = getSideConnectorlessTopRange(layout);
+        const exactConnectorlessRange = getExactSideConnectorlessTopRange(layout);
+        candidates.push({
+            top: exactConnectorlessRange.min,
+            arrowEdge: layout.arrowEdge,
+        });
+        candidates.push({
+            top: exactConnectorlessRange.max,
+            arrowEdge: layout.arrowEdge,
+        });
         candidates.push({
             top: connectorlessRange.min,
             arrowEdge: layout.arrowEdge,
@@ -630,55 +748,77 @@ function getSidePlacementCandidates(layout, placedLayouts, allLayouts, bounds) {
         getSidePlacementCost(b, layout, allLayouts));
 }
 function getSidePlacementCost(candidate, layout, allLayouts) {
-    const connectorPenalty = isSidePlacementConnectorless(candidate, layout)
-        ? 0
-        : layout.height * 4;
+    const connectorless = isSidePlacementConnectorless(candidate, layout);
     const centerDistance = Math.abs(layout.targetY - (candidate.top + layout.height / 2));
-    if (layout.targetMode === 'auto' && connectorPenalty === 0) {
-        const spreadDirection = getAutoSideSpreadDirection(layout, allLayouts);
+    const arrowDistance = Math.abs(layout.targetY - getSidePlacementArrowTipY(candidate.top, layout));
+    if (layout.targetMode === 'auto' && connectorless) {
+        const preferredTop = layout.targetY - getTooltipConnectorMaxOffset(layout.height);
+        const preferredTopDistance = Math.abs(candidate.top - preferredTop);
+        return preferredTopDistance + arrowDistance * 0.1;
+    }
+    if (connectorless) {
+        const spreadDirection = getFixedPointSideSpreadDirection(layout, allLayouts);
         if (spreadDirection !== 0) {
-            const connectorlessRange = getSideConnectorlessTopRange(layout);
-            const preferredTop = spreadDirection > 0
-                ? connectorlessRange.max
-                : connectorlessRange.min;
+            const preferredTop = getFixedPointSideSpreadPreferredTop(layout, spreadDirection);
             return (Math.abs(candidate.top - preferredTop) + centerDistance * 0.05);
         }
+        return centerDistance;
     }
-    return connectorPenalty + centerDistance;
+    return layout.height * 4 + arrowDistance + centerDistance * 0.2;
 }
-function getAutoSideSpreadDirection(layout, allLayouts) {
-    const closestAbove = getClosestAutoSideNeighbor(layout, allLayouts, 'above');
-    const closestBelow = getClosestAutoSideNeighbor(layout, allLayouts, 'below');
-    if (!closestAbove && closestBelow) {
-        return -1;
-    }
-    if (closestAbove && !closestBelow) {
-        return 1;
-    }
-    if (!closestAbove || !closestBelow) {
+function getFixedPointSideSpreadDirection(layout, allLayouts) {
+    if (!isFixedPointSideTooltipLayout(layout)) {
         return 0;
     }
-    const aboveDistance = layout.anchor.centerY - closestAbove.anchor.centerY;
-    const belowDistance = closestBelow.anchor.centerY - layout.anchor.centerY;
-    if (aboveDistance < belowDistance) {
-        return 1;
+    const nearbyLayouts = allLayouts
+        .filter((otherLayout) => isFixedPointSideTooltipLayout(otherLayout) &&
+        areFixedPointSideTargetsNear(layout, otherLayout))
+        .sort((a, b) => a.targetY - b.targetY ||
+        a.targetX - b.targetX ||
+        a.order - b.order);
+    if (nearbyLayouts.length < 2) {
+        return 0;
     }
-    if (belowDistance < aboveDistance) {
+    const layoutIndex = nearbyLayouts.indexOf(layout);
+    const clusterCenterIndex = (nearbyLayouts.length - 1) / 2;
+    if (layoutIndex < clusterCenterIndex) {
         return -1;
     }
+    if (layoutIndex > clusterCenterIndex) {
+        return 1;
+    }
     return 0;
 }
-function getClosestAutoSideNeighbor(layout, allLayouts, side) {
-    const centerY = layout.anchor.centerY;
-    return allLayouts
-        .filter((candidate) => candidate !== layout && candidate.targetMode === 'auto')
-        .filter((candidate) => side === 'above'
-        ? candidate.anchor.centerY < centerY
-        : candidate.anchor.centerY > centerY)
-        .sort((a, b) => Math.abs(a.anchor.centerY - centerY) -
-        Math.abs(b.anchor.centerY - centerY))[0];
+function isFixedPointSideTooltipLayout(layout) {
+    return (layout.targetMode === 'fixed' &&
+        Math.abs(layout.anchor.left - layout.anchor.right) <=
+            TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX &&
+        Math.abs(layout.anchor.top - layout.anchor.bottom) <=
+            TOOLTIP_CONNECTOR_ALIGNMENT_TOLERANCE_PX);
+}
+function areFixedPointSideTargetsNear(layout, otherLayout) {
+    const centeredTooltipsOverlapDistance = (layout.height + otherLayout.height) / 2 + SPLIT_TOOLTIP_GAP_PX;
+    return (Math.abs(layout.targetY - otherLayout.targetY) <
+        centeredTooltipsOverlapDistance);
+}
+function getFixedPointSideSpreadPreferredTop(layout, direction) {
+    if (direction < 0) {
+        return layout.targetY - getTooltipConnectorMaxOffset(layout.height);
+    }
+    return layout.targetY - TOOLTIP_CONNECTOR_INSET_PX;
 }
 function getSideConnectorlessTopRange(layout) {
+    const nearPathPadding = layout.targetMode === 'auto'
+        ? AUTO_BAR_TOOLTIP_CONNECTOR_MIN_PATH_LENGTH_PX
+        : 0;
+    return {
+        min: layout.anchor.top -
+            getTooltipConnectorMaxOffset(layout.height) -
+            nearPathPadding,
+        max: layout.anchor.bottom - TOOLTIP_CONNECTOR_INSET_PX + nearPathPadding,
+    };
+}
+function getExactSideConnectorlessTopRange(layout) {
     return {
         min: layout.anchor.top - getTooltipConnectorMaxOffset(layout.height),
         max: layout.anchor.bottom - TOOLTIP_CONNECTOR_INSET_PX,
@@ -686,7 +826,9 @@ function getSideConnectorlessTopRange(layout) {
 }
 function isSidePlacementConnectorless(candidate, layout) {
     if (layout.targetMode === 'auto') {
-        return doRangesOverlap(layout.anchor.top, layout.anchor.bottom, candidate.top + TOOLTIP_CONNECTOR_INSET_PX, candidate.top + getTooltipConnectorMaxOffset(layout.height));
+        const connectorlessRange = getSideConnectorlessTopRange(layout);
+        return (candidate.top >= connectorlessRange.min &&
+            candidate.top <= connectorlessRange.max);
     }
     const arrowTipY = getSidePlacementArrowTipY(candidate.top, layout);
     return (arrowTipY >=

package/dist/tooltip/types.d.ts

@@ -6,7 +6,8 @@ import type { Scatter } from '../scatter.js';
 import type { TooltipTransitionConfig } from '../types.js';
 export declare const TOOLTIP_OFFSET_PX = 12;
 export declare const TOOLTIP_VIEWPORT_PADDING_PX = 10;
-export declare const TOOLTIP_CONNECTOR_INSET_PX = 14;
+export declare const TOOLTIP_CONNECTOR_INSET_PX = 10;
+export declare const TOOLTIP_CONNECTOR_MIN_PATH_LENGTH_PX = 16;
 export declare const TOOLTIP_CONNECTOR_PADDING_PX = 4;
 export declare const TOOLTIP_CONNECTOR_ELBOW_RATIO = 0.45;
 export declare const TOOLTIP_BORDER_WIDTH_PX = 1;
@@ -19,7 +20,7 @@ export declare const TOOLTIP_ARROW_FILL_Z_INDEX = 5;
 export declare const TOOLTIP_BODY_Z_INDEX = 6;
 export declare const TOOLTIP_TOTAL_BORDER_WIDTH_PX: number;
 export declare const TOOLTIP_ROOT_Z_INDEX = 30;
-export declare const SPLIT_TOOLTIP_GAP_PX = 8;
+export declare const SPLIT_TOOLTIP_GAP_PX = 4;
 export declare const DEFAULT_TOOLTIP_MAX_WIDTH_PX = 280;
 export declare const DEFAULT_TOOLTIP_TRANSITION: Required<TooltipTransitionConfig>;
 export declare const TOOLTIP_HIDDEN_TRANSFORM = "translateY(2px)";

package/dist/tooltip/types.js

@@ -1,6 +1,7 @@
 export const TOOLTIP_OFFSET_PX = 12;
 export const TOOLTIP_VIEWPORT_PADDING_PX = 10;
-export const TOOLTIP_CONNECTOR_INSET_PX = 14;
+export const TOOLTIP_CONNECTOR_INSET_PX = 10;
+export const TOOLTIP_CONNECTOR_MIN_PATH_LENGTH_PX = 16;
 export const TOOLTIP_CONNECTOR_PADDING_PX = 4;
 export const TOOLTIP_CONNECTOR_ELBOW_RATIO = 0.45;
 export const TOOLTIP_BORDER_WIDTH_PX = 1;
@@ -13,7 +14,7 @@ export const TOOLTIP_ARROW_FILL_Z_INDEX = 5;
 export const TOOLTIP_BODY_Z_INDEX = 6;
 export const TOOLTIP_TOTAL_BORDER_WIDTH_PX = TOOLTIP_BORDER_WIDTH_PX * 2;
 export const TOOLTIP_ROOT_Z_INDEX = 30;
-export const SPLIT_TOOLTIP_GAP_PX = 8;
+export const SPLIT_TOOLTIP_GAP_PX = 4;
 export const DEFAULT_TOOLTIP_MAX_WIDTH_PX = 280;
 export const DEFAULT_TOOLTIP_TRANSITION = {
     show: false,

package/dist/tooltip/xy-interaction.d.ts

@@ -21,6 +21,8 @@ export type XYTooltipAreaConfig = {
     position: TooltipPosition;
     barAnchorPosition: TooltipBarAnchorPosition;
     colorMode: TooltipColorMode;
+    seriesBorderColor?: string;
+    seriesConnectorColor?: string;
     formatter?: (dataKey: string, value: DataValue, data: DataItem) => string;
     labelFormatter?: (label: string, data: DataItem) => string;
     customFormatter?: (data: DataItem, series: {

package/dist/tooltip/xy-interaction.js

@@ -3,7 +3,7 @@ import { getSeriesColor } from '../types.js';
 import { getContrastTextColor, sanitizeForCSS } from '../utils.js';
 import { clipTooltipAnchorToBounds, getAnchoredTooltipPosition, getSplitTooltipViewportBounds, resolveSharedTooltipTarget, resolveSplitTooltipPositions, resolveSplitTooltipTarget, resolveTooltipArrowEdge, } from './geometry.js';
 export function attachXYTooltipArea(config) {
-    const { svg, data, series, xKey, x, y, theme, plotArea, parseValue, isHorizontal, categoryScaleType, mode, position, barAnchorPosition, colorMode, formatter, labelFormatter, customFormatter, dom, } = config;
+    const { svg, data, series, xKey, x, y, theme, plotArea, parseValue, isHorizontal, categoryScaleType, mode, position, barAnchorPosition, colorMode, seriesBorderColor, seriesConnectorColor, formatter, labelFormatter, customFormatter, dom, } = config;
     const tooltip = dom.getRootTooltip();
     if (!tooltip || data.length === 0) {
         return null;
@@ -63,7 +63,12 @@ export function attachXYTooltipArea(config) {
             : getSeriesColor(currentSeries);
         return {
             background: seriesColor,
-            border: seriesColor,
+            border: seriesBorderColor ??
+                theme.tooltip.seriesBorderColor ??
+                seriesColor,
+            connectorColor: seriesConnectorColor ??
+                theme.tooltip.seriesConnectorColor ??
+                seriesColor,
             color: getContrastTextColor(seriesColor),
         };
     };
@@ -257,6 +262,11 @@ export function attachXYTooltipArea(config) {
                 return;
             }
             const target = resolveSplitTooltipTarget(currentSeries, visibleAnchor, resolvedBarAnchorPosition);
+            if (currentSeries.type === 'bar' &&
+                !isHorizontal &&
+                resolvedBarAnchorPosition === 'auto') {
+                target.y = visibleAnchor.top;
+            }
             const targetMode = currentSeries.type === 'bar' &&
                 resolvedBarAnchorPosition === 'auto'
                 ? 'auto'

package/dist/tooltip.d.ts

@@ -11,6 +11,8 @@ export declare class Tooltip implements ChartComponent<TooltipConfigBase> {
     readonly position: TooltipPosition;
     readonly barAnchorPosition: TooltipBarAnchorPosition;
     readonly colorMode: TooltipColorMode;
+    readonly seriesBorderColor?: string;
+    readonly seriesConnectorColor?: string;
     readonly maxWidth: number;
     readonly transition: Required<TooltipTransitionConfig>;
     readonly formatter?: (dataKey: string, value: DataValue, data: DataItem) => string;

package/dist/tooltip.js

@@ -40,6 +40,18 @@ export class Tooltip {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "seriesBorderColor", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "seriesConnectorColor", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "maxWidth", {
             enumerable: true,
             configurable: true,
@@ -88,13 +100,15 @@ export class Tooltip {
             writable: true,
             value: null
         });
-        const { mode = 'split', position = 'auto', barAnchorPosition = 'auto', colorMode = 'theme', maxWidth, transition, formatter, labelFormatter, customFormatter, exportHooks, } = config;
+        const { mode = 'split', position = 'auto', barAnchorPosition = 'auto', colorMode = 'theme', seriesBorderColor, seriesConnectorColor, maxWidth, transition, formatter, labelFormatter, customFormatter, exportHooks, } = config;
         const tooltipId = Tooltip.nextTooltipId++;
         this.id = `iisChartTooltip-${tooltipId}`;
         this.mode = mode;
         this.position = position;
         this.barAnchorPosition = barAnchorPosition;
         this.colorMode = colorMode;
+        this.seriesBorderColor = seriesBorderColor;
+        this.seriesConnectorColor = seriesConnectorColor;
         this.maxWidth =
             maxWidth !== undefined && Number.isFinite(maxWidth) && maxWidth > 0
                 ? maxWidth
@@ -120,6 +134,8 @@ export class Tooltip {
             position: this.position,
             barAnchorPosition: this.barAnchorPosition,
             colorMode: this.colorMode,
+            seriesBorderColor: this.seriesBorderColor,
+            seriesConnectorColor: this.seriesConnectorColor,
             maxWidth: this.maxWidth,
             transition: this.transition,
             formatter: this.formatter,
@@ -162,6 +178,8 @@ export class Tooltip {
             position: this.position,
             barAnchorPosition: this.barAnchorPosition,
             colorMode: this.colorMode,
+            seriesBorderColor: this.seriesBorderColor,
+            seriesConnectorColor: this.seriesConnectorColor,
             formatter: this.formatter,
             labelFormatter: this.labelFormatter,
             customFormatter: this.customFormatter,

package/dist/types.d.ts

@@ -74,6 +74,8 @@ export type ChartTheme = {
     tooltip: {
         background: string;
         border: string;
+        seriesBorderColor: string;
+        seriesConnectorColor?: string;
         color: string;
         fontFamily: string;
         fontSize: number;
@@ -313,6 +315,8 @@ export type TooltipConfigBase = {
     position?: TooltipPosition;
     barAnchorPosition?: TooltipBarAnchorPosition;
     colorMode?: TooltipColorMode;
+    seriesBorderColor?: string;
+    seriesConnectorColor?: string;
     maxWidth?: number;
     transition?: TooltipTransitionConfig;
     formatter?: SeriesValueFormatter;

package/docs/components.md

@@ -129,6 +129,8 @@ new Tooltip({
     position?: 'auto' | 'side' | 'vertical',
     barAnchorPosition?: 'auto' | 'top' | 'middle',
     colorMode?: 'theme' | 'series',
+    seriesBorderColor?: string,
+    seriesConnectorColor?: string,
     maxWidth?: number, // default: 280
     transition?: {
         show?: boolean,
@@ -159,6 +161,11 @@ Use `position: 'auto' | 'side' | 'vertical'` for XY tooltip placement.
 `auto` is the default. It uses above/below placement for horizontal XY charts
 and side placement elsewhere. For bar tooltips, `barAnchorPosition` defaults to
 `auto`, which aims arrows inside the visible bar segment when possible.
+Vertical bar split tooltips aim at each bar's top edge and use series/legend
+order to keep equal or near-equal placements stable. Very short connector
+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.
 
 For horizontal bar charts, prefer `position: 'auto'` or `position: 'vertical'`.
 `position: 'side'` and `barAnchorPosition: 'top' | 'middle'` are kept for
@@ -167,7 +174,13 @@ legacy configs, but horizontal bars resolve bar anchoring automatically.
 Tooltips default to a `280px` max width. Set `transition.show: true` to fade and
 slide tooltips between hovered positions. Tooltip colors use `theme.tooltip` by
 default. Set `colorMode: 'series'` to color-code XY tooltips from the series
-color, with matching background and border colors plus automatic contrast text.
+color, using series-colored backgrounds plus automatic contrast text.
+Set `theme.tooltip.seriesBorderColor` to keep series-colored backgrounds while
+using one custom box and arrow border color. It defaults to `'#ffffff'`.
+Connector lines use the series color by default; set
+`theme.tooltip.seriesConnectorColor` when they need a custom color. Tooltip
+`seriesBorderColor` and `seriesConnectorColor` options override the theme for a
+single tooltip component.
 
 `defaultResponsiveConfig` switches tooltip components to `mode: 'shared'` at
 the `sm` breakpoint so compact XY charts use one grouped tooltip by default.

package/docs/theming.md

@@ -30,6 +30,8 @@ const chart = new XYChart({
         tooltip: {
             background: '#102030',
             border: '#405060',
+            seriesBorderColor: '#ffffff',
+            seriesConnectorColor: '#405060',
             color: '#f7fafc',
             fontFamily: 'Inter, sans-serif',
             fontSize: 13,
@@ -66,6 +68,8 @@ through the `themes` map as `themes.default`, `themes.ruby`,
 | `legend.itemSpacingY` | `number`   | `8`                                            | Vertical spacing between wrapped legend rows |
 | `tooltip.background`  | `string`   | `'#ffffff'`                                    | Tooltip box and arrow fill color             |
 | `tooltip.border`      | `string`   | `'#dddddd'`                                    | Tooltip box, connector, and arrow border     |
+| `tooltip.seriesBorderColor` | `string`   | `'#ffffff'`                                    | Box and arrow border color for series-colored tooltips |
+| `tooltip.seriesConnectorColor` | `string`   | Series color                                   | Connector line color for series-colored tooltips |
 | `tooltip.color`       | `string`   | `'#1f2a36'`                                    | Tooltip text color                           |
 | `tooltip.fontFamily`  | `string`   | -                                              | Tooltip text font                            |
 | `tooltip.fontSize`    | `number`   | `12`                                           | Tooltip text size in pixels                  |

package/package.json

@@ -1,5 +1,5 @@
 {
-    "version": "0.18.0",
+    "version": "0.18.2",
     "name": "@internetstiftelsen/charts",
     "type": "module",
     "sideEffects": false,
@@ -33,12 +33,14 @@
         "format": "prettier --write ./src",
         "preview": "vite preview",
         "preview:docs": "vite preview --config vite.docs.config.ts",
-        "test": "vitest",
-        "test:run": "vitest run",
+        "test": "vitest --project unit",
+        "test:run": "vitest run --project unit",
         "verify": "pnpm lint && pnpm test:run && pnpm build",
         "build:lib": "npm run build",
         "prepublishOnly": "pnpm verify",
-        "pub": "npm publish --access public"
+        "pub": "npm publish --access public",
+        "storybook": "storybook dev -p 6006",
+        "build-storybook": "storybook build"
     },
     "dependencies": {
         "d3": "^7.9.0",
@@ -48,6 +50,7 @@
         "write-excel-file": "^4.1.1"
     },
     "devDependencies": {
+        "@chromatic-com/storybook": "^5.2.1",
         "@eslint/js": "^10.0.1",
         "@handsontable/react-wrapper": "^17.1.0",
         "@internetstiftelsen/styleguide": "^5.1.27",
@@ -56,6 +59,11 @@
         "@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",
         "@testing-library/dom": "^10.4.1",
         "@testing-library/jest-dom": "^6.9.1",
@@ -65,21 +73,26 @@
         "@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",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "eslint": "^10.5.0",
         "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",
         "tailwind-merge": "^3.6.0",
         "tailwindcss": "^4.3.1",
         "tsc-alias": "^1.8.17",