@internetstiftelsen/charts 0.13.2 → 0.14.0

package/dist/radial-chart-base.js

@@ -1,7 +1,9 @@
 import { BaseChart } from './base-chart.js';
 import { DEFAULT_CHART_HEIGHT } from './theme.js';
+import { measureTextWidth, truncateText, wrapText } from './utils.js';
 const TOOLTIP_OFFSET_PX = 12;
 const EDGE_MARGIN_PX = 10;
+const DEFAULT_LABEL_FONT_SIZE = 14;
 export class RadialChartBase extends BaseChart {
     initializeTooltip() {
         this.tooltip?.initialize(this.renderTheme);
@@ -27,6 +29,119 @@ export class RadialChartBase extends BaseChart {
             fill: item.color,
         }));
     }
+    renderRadialLabelText(textElement, text, options, verticalAnchor = 'middle') {
+        const layout = this.resolveRadialLabelLayout(text, options);
+        textElement.text(null).style('visibility', null);
+        if (layout.hidden) {
+            textElement.text(text).style('visibility', 'hidden');
+            return;
+        }
+        if (layout.lines.length === 1) {
+            textElement.text(layout.lines[0]);
+            this.addRadialLabelTitle(textElement, layout.titleText);
+            return;
+        }
+        const lineHeight = this.resolveRadialLabelLineHeight(options.fontSize);
+        const startDy = verticalAnchor === 'middle'
+            ? -((layout.lines.length - 1) * lineHeight) / 2
+            : 0;
+        const x = textElement.attr('x') ?? '0';
+        layout.lines.forEach((line, index) => {
+            textElement
+                .append('tspan')
+                .attr('x', x)
+                .attr('dy', index === 0 ? `${startDy}px` : `${lineHeight}px`)
+                .text(line);
+        });
+        this.addRadialLabelTitle(textElement, layout.titleText);
+    }
+    renderRadialStructuredLabelText(textElement, labelText, valueText, separator, options, verticalAnchor = 'middle') {
+        const layout = this.resolveRadialLabelLayout(labelText, options);
+        const fullText = `${labelText}${separator}${valueText}`;
+        textElement.text(null).style('visibility', null);
+        if (layout.hidden) {
+            textElement.text(fullText).style('visibility', 'hidden');
+            return;
+        }
+        if (layout.lines.length === 1) {
+            textElement.text(`${layout.lines[0]}${separator}${valueText}`);
+            this.addRadialLabelTitle(textElement, layout.titleText ? fullText : null);
+            return;
+        }
+        const lineHeight = this.resolveRadialLabelLineHeight(options.fontSize);
+        const startDy = verticalAnchor === 'middle'
+            ? -((layout.lines.length - 1) * lineHeight) / 2
+            : 0;
+        const x = textElement.attr('x') ?? '0';
+        const lastLineIndex = layout.lines.length - 1;
+        layout.lines.forEach((line, index) => {
+            const renderedLine = index === lastLineIndex
+                ? `${line}${separator}${valueText}`
+                : line;
+            textElement
+                .append('tspan')
+                .attr('x', x)
+                .attr('dy', index === 0 ? `${startDy}px` : `${lineHeight}px`)
+                .text(renderedLine);
+        });
+        this.addRadialLabelTitle(textElement, layout.titleText ? fullText : null);
+    }
+    measureRadialLabelDimensions(text, options) {
+        const layout = this.resolveRadialLabelLayout(text, options);
+        if (layout.hidden) {
+            return {
+                width: 0,
+                height: 0,
+            };
+        }
+        const svgNode = this.svg?.node();
+        const fontWeight = String(options.fontWeight);
+        const width = svgNode
+            ? layout.lines.reduce((maxWidth, line) => {
+                return Math.max(maxWidth, measureTextWidth(line, options.fontSize, options.fontFamily, fontWeight, svgNode));
+            }, 0)
+            : (options.maxLabelWidth ?? 0);
+        return {
+            width,
+            height: Math.max(layout.lines.length, 1) *
+                this.resolveRadialLabelLineHeight(options.fontSize),
+        };
+    }
+    measureRadialStructuredLabelDimensions(labelText, valueText, separator, options) {
+        const layout = this.resolveRadialLabelLayout(labelText, options);
+        if (layout.hidden) {
+            return {
+                width: 0,
+                height: 0,
+            };
+        }
+        const svgNode = this.svg?.node();
+        const fontWeight = String(options.fontWeight);
+        const lastLineIndex = layout.lines.length - 1;
+        const width = svgNode
+            ? layout.lines.reduce((maxWidth, line, index) => {
+                const renderedLine = index === lastLineIndex
+                    ? `${line}${separator}${valueText}`
+                    : line;
+                return Math.max(maxWidth, measureTextWidth(renderedLine, options.fontSize, options.fontFamily, fontWeight, svgNode));
+            }, 0)
+            : (options.maxLabelWidth ?? 0);
+        return {
+            width,
+            height: Math.max(layout.lines.length, 1) *
+                this.resolveRadialLabelLineHeight(options.fontSize),
+        };
+    }
+    resolveRadialLabelLineHeight(fontSize) {
+        if (typeof fontSize === 'number' && Number.isFinite(fontSize)) {
+            return fontSize * 1.2;
+        }
+        const parsedFontSize = Number.parseFloat(String(fontSize));
+        if (Number.isFinite(parsedFontSize)) {
+            return parsedFontSize * 1.2;
+        }
+        return DEFAULT_LABEL_FONT_SIZE * 1.2;
+    }
     showTooltipFromPointer(event, content) {
         if (!this.tooltip) {
             return;
@@ -84,6 +199,72 @@ export class RadialChartBase extends BaseChart {
         const y = Math.max(EDGE_MARGIN_PX, Math.min(rawY, window.innerHeight + window.scrollY - height - EDGE_MARGIN_PX));
         this.tooltip?.showAt(x, y);
     }
+    resolveRadialLabelLayout(text, options) {
+        const overflowContext = this.resolveRadialLabelOverflowContext(options.maxLabelWidth);
+        if (!overflowContext) {
+            return this.createVisibleRadialLabelLayout(text);
+        }
+        const { maxLabelWidth, svgNode } = overflowContext;
+        const fontWeight = String(options.fontWeight);
+        const textWidth = measureTextWidth(text, options.fontSize, options.fontFamily, fontWeight, svgNode);
+        if (textWidth <= maxLabelWidth) {
+            return this.createVisibleRadialLabelLayout(text);
+        }
+        return this.resolveOverflowingRadialLabelLayout(text, options, maxLabelWidth, fontWeight, svgNode);
+    }
+    resolveRadialLabelOverflowContext(maxLabelWidth) {
+        const svgNode = this.svg?.node();
+        if (maxLabelWidth === undefined ||
+            !Number.isFinite(maxLabelWidth) ||
+            maxLabelWidth <= 0 ||
+            !svgNode) {
+            return null;
+        }
+        return { maxLabelWidth, svgNode };
+    }
+    createVisibleRadialLabelLayout(text) {
+        return {
+            lines: [text],
+            hidden: false,
+            titleText: null,
+        };
+    }
+    resolveOverflowingRadialLabelLayout(text, options, maxLabelWidth, fontWeight, svgNode) {
+        if (options.oversizedBehavior === 'hide') {
+            if (options.forceVisible) {
+                return {
+                    lines: [text],
+                    hidden: false,
+                    titleText: null,
+                };
+            }
+            return {
+                lines: [text],
+                hidden: true,
+                titleText: null,
+            };
+        }
+        if (options.oversizedBehavior === 'wrap') {
+            const lines = wrapText(text, maxLabelWidth, options.fontSize, options.fontFamily, fontWeight, svgNode);
+            return {
+                lines,
+                hidden: false,
+                titleText: lines.length > 1 ? text : null,
+            };
+        }
+        const result = truncateText(text, maxLabelWidth, options.fontSize, options.fontFamily, fontWeight, svgNode);
+        return {
+            lines: [result.text],
+            hidden: false,
+            titleText: result.truncated ? text : null,
+        };
+    }
+    addRadialLabelTitle(textElement, text) {
+        if (!text) {
+            return;
+        }
+        textElement.append('title').text(text);
+    }
     resolveRadialFontScale(outerRadius, theme) {
         const referenceHeight = this.configuredHeight ?? DEFAULT_CHART_HEIGHT;
         const plotHeight = Math.max(1, referenceHeight - theme.margins.top - theme.margins.bottom);

package/dist/scatter.js

@@ -183,6 +183,7 @@ export class Scatter {
         const border = config.border ?? theme.valueLabel.border;
         const borderRadius = config.borderRadius ?? theme.valueLabel.borderRadius;
         const padding = config.padding ?? theme.valueLabel.padding;
+        const forceVisible = config.forceVisible === true;
         const labelGroup = plotGroup
             .append('g')
             .attr('class', `scatter-value-labels-${sanitizeForCSS(this.dataKey)}`);
@@ -211,7 +212,7 @@ export class Scatter {
             if (labelY - boxHeight / 2 < plotTop + 4) {
                 labelY = yPos + boxHeight / 2 + pointSize + 4;
                 if (labelY + boxHeight / 2 > plotBottom - 4) {
-                    shouldRender = false;
+                    shouldRender = forceVisible;
                 }
             }
             tempText.remove();

package/dist/theme.d.ts

@@ -1,11 +1,26 @@
 import { type ChartTheme, type ResponsiveConfig } from './types.js';
+export declare const RUBY_COLOR_PALETTE: string[];
+export declare const PEACOCK_COLOR_PALETTE: string[];
+export declare const JADE_COLOR_PALETTE: string[];
+export declare const LEMON_COLOR_PALETTE: string[];
+export declare const OCEAN_COLOR_PALETTE: string[];
 export declare const DEFAULT_COLOR_PALETTE: string[];
 export declare const DEFAULT_CHART_WIDTH = 928;
 export declare const DEFAULT_CHART_HEIGHT = 600;
 export declare const defaultTheme: ChartTheme;
+export declare const rubyTheme: ChartTheme;
+export declare const peacockTheme: ChartTheme;
+export declare const jadeTheme: ChartTheme;
+export declare const lemonTheme: ChartTheme;
+export declare const oceanTheme: ChartTheme;
 export declare const newspaperTheme: ChartTheme;
 export declare const defaultResponsiveConfig: ResponsiveConfig;
 export declare const themes: {
     default: ChartTheme;
+    ruby: ChartTheme;
+    peacock: ChartTheme;
+    jade: ChartTheme;
+    lemon: ChartTheme;
+    ocean: ChartTheme;
     newspaper: ChartTheme;
 };

package/dist/theme.js

@@ -1,3 +1,39 @@
+const SYSTEM_FONT = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"';
+export const RUBY_COLOR_PALETTE = [
+    '#ff4069',
+    '#c51f46',
+    '#ff7f99',
+    '#ffb3c2',
+    '#7f102d',
+];
+export const PEACOCK_COLOR_PALETTE = [
+    '#c27fec',
+    '#934bc5',
+    '#d5a4f3',
+    '#ead2fa',
+    '#5f287f',
+];
+export const JADE_COLOR_PALETTE = [
+    '#55c7b4',
+    '#2f8f80',
+    '#88dacd',
+    '#c4eee8',
+    '#1b5f55',
+];
+export const LEMON_COLOR_PALETTE = [
+    '#ffce2e',
+    '#c89200',
+    '#ffe07a',
+    '#fff0b8',
+    '#7a5900',
+];
+export const OCEAN_COLOR_PALETTE = [
+    '#50b2fc',
+    '#147eca',
+    '#8bcbfd',
+    '#c6e6fe',
+    '#0f4f7f',
+];
 export const DEFAULT_COLOR_PALETTE = [
     '#50b2fc', // ocean
     '#ff4069', // ruby
@@ -11,7 +47,7 @@ export const DEFAULT_COLOR_PALETTE = [
 export const DEFAULT_CHART_WIDTH = 928;
 export const DEFAULT_CHART_HEIGHT = 600;
 export const defaultTheme = {
-    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+    fontFamily: SYSTEM_FONT,
     margins: {
         top: 20,
         right: 20,
@@ -24,7 +60,7 @@ export const defaultTheme = {
     },
     colorPalette: [...DEFAULT_COLOR_PALETTE],
     axis: {
-        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+        fontFamily: SYSTEM_FONT,
         fontSize: 14,
         fontWeight: 'normal',
         groupLabel: {
@@ -72,7 +108,7 @@ export const defaultTheme = {
         background: '#ffffff',
         border: '#dddddd',
         color: '#1f2a36',
-        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+        fontFamily: SYSTEM_FONT,
         fontSize: 12,
         fontWeight: 'normal',
     },
@@ -86,7 +122,7 @@ export const defaultTheme = {
     },
     valueLabel: {
         fontSize: 12,
-        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+        fontFamily: SYSTEM_FONT,
         fontWeight: '600',
         color: '#1f2a36',
         background: '#ffffff',
@@ -117,6 +153,51 @@ export const defaultTheme = {
         },
     },
 };
+function cloneTheme(theme) {
+    return {
+        ...theme,
+        margins: { ...theme.margins },
+        grid: { ...theme.grid },
+        colorPalette: [...theme.colorPalette],
+        axis: {
+            ...theme.axis,
+            groupLabel: theme.axis.groupLabel
+                ? { ...theme.axis.groupLabel }
+                : undefined,
+        },
+        legend: { ...theme.legend },
+        text: {
+            variants: Object.fromEntries(Object.entries(theme.text.variants).map(([name, style]) => [
+                name,
+                { ...style },
+            ])),
+        },
+        tooltip: { ...theme.tooltip },
+        line: {
+            ...theme.line,
+            point: { ...theme.line.point },
+        },
+        valueLabel: { ...theme.valueLabel },
+        donut: {
+            ...theme.donut,
+            centerContent: {
+                mainValue: { ...theme.donut.centerContent.mainValue },
+                title: { ...theme.donut.centerContent.title },
+                subtitle: { ...theme.donut.centerContent.subtitle },
+            },
+        },
+    };
+}
+function createAccentTheme(colorPalette) {
+    const theme = cloneTheme(defaultTheme);
+    theme.colorPalette = [...colorPalette];
+    return theme;
+}
+export const rubyTheme = createAccentTheme(RUBY_COLOR_PALETTE);
+export const peacockTheme = createAccentTheme(PEACOCK_COLOR_PALETTE);
+export const jadeTheme = createAccentTheme(JADE_COLOR_PALETTE);
+export const lemonTheme = createAccentTheme(LEMON_COLOR_PALETTE);
+export const oceanTheme = createAccentTheme(OCEAN_COLOR_PALETTE);
 export const newspaperTheme = {
     fontFamily: 'Georgia, "Times New Roman", Times, serif',
     margins: {
@@ -261,5 +342,10 @@ export const defaultResponsiveConfig = {
 };
 export const themes = {
     default: defaultTheme,
+    ruby: rubyTheme,
+    peacock: peacockTheme,
+    jade: jadeTheme,
+    lemon: lemonTheme,
+    ocean: oceanTheme,
     newspaper: newspaperTheme,
 };

package/dist/tooltip.d.ts

@@ -81,6 +81,10 @@ export declare class Tooltip implements ChartComponent<TooltipConfigBase> {
     private countPlacedLayoutsOnEdge;
     private doSplitTooltipLayoutsOverlap;
     private resolveSplitTooltipPositions;
+    private resolveHorizontalChartSplitTooltipPositions;
+    private resolveVerticalChartSplitTooltipPositions;
+    private getSplitTooltipViewportBounds;
+    private groupSplitTooltipLayoutsByEdge;
     private resolveSideSplitTooltipPositions;
     private resolveHorizontalSideSplitTooltipPositions;
     private resolveHorizontalSideSplitTooltipCollisions;
@@ -91,6 +95,11 @@ export declare class Tooltip implements ChartComponent<TooltipConfigBase> {
     private assignLayoutToHorizontalTooltipLane;
     private doHorizontalTooltipLanesOverlap;
     private doSplitTooltipLayoutsOverlapHorizontally;
-    private resolveVerticalSplitTooltipPositions;
+    private resolveHorizontalChartAboveBelowSplitTooltipPositions;
+    private resolvePackedAboveBelowTooltipRow;
+    private resolveVerticalChartAboveBelowSplitTooltipPositions;
+    private resolveCollisionAwareAboveBelowTooltipPositions;
+    private resolveNonOverlappingAboveBelowTooltipLeft;
+    private doesSplitTooltipOverlapPlacedLayouts;
 }
 export {};

package/dist/tooltip.js

@@ -466,10 +466,6 @@ export class Tooltip {
             if (layouts.length === 0) {
                 return;
             }
-            if (!isHorizontal) {
-                this.resolveSplitTooltipCollisions(layouts, 'vertical', this.getOppositeVerticalArrowEdge);
-                this.resolveSplitTooltipCollisions(layouts, 'side', this.getOppositeSideArrowEdge);
-            }
             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, layout.anchor);
@@ -1303,19 +1299,42 @@ export class Tooltip {
             a.top + a.height + SPLIT_TOOLTIP_GAP_PX > b.top);
     }
     resolveSplitTooltipPositions(layouts, isHorizontal) {
-        if (isHorizontal && this.position === 'side') {
-            this.resolveHorizontalSideSplitTooltipPositions(layouts);
+        if (isHorizontal) {
+            this.resolveHorizontalChartSplitTooltipPositions(layouts);
             return;
         }
+        this.resolveVerticalChartSplitTooltipPositions(layouts);
+    }
+    resolveHorizontalChartSplitTooltipPositions(layouts) {
         if (this.position === 'vertical') {
-            this.resolveVerticalSplitTooltipPositions(layouts);
+            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);
     }
-    resolveSideSplitTooltipPositions(layouts) {
-        const minTop = window.scrollY + TOOLTIP_VIEWPORT_PADDING_PX;
-        const maxBottom = window.scrollY + window.innerHeight - TOOLTIP_VIEWPORT_PADDING_PX;
+    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: [],
@@ -1325,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;
@@ -1463,65 +1487,98 @@ export class Tooltip {
         return (a.left < b.left + b.width + SPLIT_TOOLTIP_GAP_PX &&
             a.left + a.width + SPLIT_TOOLTIP_GAP_PX > b.left);
     }
-    resolveVerticalSplitTooltipPositions(layouts) {
-        const minLeft = window.scrollX + TOOLTIP_VIEWPORT_PADDING_PX;
-        const maxRight = window.scrollX + window.innerWidth - TOOLTIP_VIEWPORT_PADDING_PX;
-        const minTop = window.scrollY + TOOLTIP_VIEWPORT_PADDING_PX;
-        const maxBottom = window.scrollY + window.innerHeight - TOOLTIP_VIEWPORT_PADDING_PX;
-        const tooltipsByEdge = {
-            left: [],
-            right: [],
-            top: [],
-            bottom: [],
-        };
-        layouts.forEach((layout) => {
-            tooltipsByEdge[layout.arrowEdge].push(layout);
+    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));
         });
-        [tooltipsByEdge.top, tooltipsByEdge.bottom].forEach((edgeLayouts) => {
-            if (edgeLayouts.length === 0) {
-                return;
-            }
-            edgeLayouts.sort((a, b) => a.left - b.left);
-            edgeLayouts[0].left = Math.max(minLeft, edgeLayouts[0].left);
-            for (let i = 1; i < edgeLayouts.length; i++) {
-                const previousLayout = edgeLayouts[i - 1];
-                const currentLayout = edgeLayouts[i];
-                const minAllowedLeft = previousLayout.left +
-                    previousLayout.width +
+        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.max(currentLayout.left, minAllowedLeft);
+                currentLayout.left = Math.min(currentLayout.left, maxAllowedLeft);
             }
-            const lastLayout = edgeLayouts[edgeLayouts.length - 1];
-            const overflow = lastLayout.left + lastLayout.width - maxRight;
-            if (overflow > 0) {
-                lastLayout.left -= overflow;
-                for (let i = edgeLayouts.length - 2; i >= 0; i--) {
-                    const currentLayout = edgeLayouts[i];
-                    const nextLayout = edgeLayouts[i + 1];
-                    const maxAllowedLeft = nextLayout.left -
-                        currentLayout.width -
-                        SPLIT_TOOLTIP_GAP_PX;
-                    currentLayout.left = Math.min(currentLayout.left, maxAllowedLeft);
-                }
-                const underflow = minLeft - edgeLayouts[0].left;
-                if (underflow > 0) {
-                    edgeLayouts.forEach((layout) => {
-                        layout.left += underflow;
-                    });
-                }
+            const underflow = bounds.minLeft - orderedLayouts[0].left;
+            if (underflow > 0) {
+                orderedLayouts.forEach((layout) => {
+                    layout.left += underflow;
+                });
             }
-            edgeLayouts.forEach((layout) => {
-                const maxLeft = maxRight - layout.width;
-                const maxTop = maxBottom - layout.height;
-                layout.left = Math.max(minLeft, Math.min(layout.left, maxLeft));
-                layout.top = Math.max(minTop, Math.min(layout.top, maxTop));
-            });
+        }
+        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

@@ -180,6 +180,7 @@ export type ValueLabelConfig = {
     borderRadius?: number;
     padding?: number;
     formatter?: SeriesValueFormatter;
+    forceVisible?: boolean;
 };
 export type LineValueLabelConfig = ValueLabelConfig & {
     show?: boolean;

package/dist/xy-motion/config.js

@@ -1,8 +1,10 @@
 import { ChartValidationError, ChartValidator } from '../validation.js';
 import { easeBounceOut, easeCubicIn, easeCubicInOut, easeCubicOut, easeElasticOut, easeLinear, } from 'd3';
+import { createCubicBezierEasing } from '../easing.js';
 const DEFAULT_ANIMATE = false;
 const DEFAULT_ANIMATION_DURATION_MS = 700;
 const DEFAULT_ANIMATION_EASING_PRESET = 'ease-in-out';
+const easeSpringOut = createCubicBezierEasing(0.85, 0, 0.15, 1);
 const XY_ANIMATION_EASING_PRESETS = {
     linear: easeLinear,
     'ease-in': easeCubicIn,
@@ -10,6 +12,7 @@ const XY_ANIMATION_EASING_PRESETS = {
     'ease-in-out': easeCubicInOut,
     'bounce-out': easeBounceOut,
     'elastic-out': easeElasticOut,
+    'spring-out': easeSpringOut,
 };
 export function normalizeXYAnimationConfig(config) {
     if (config === undefined) {

package/dist/xy-motion/types.d.ts

@@ -1,5 +1,5 @@
 import type { Selection } from 'd3';
-export type XYAnimationEasingPreset = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'bounce-out' | 'elastic-out';
+export type XYAnimationEasingPreset = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'bounce-out' | 'elastic-out' | 'spring-out';
 export type XYAnimationConfig = {
     show?: boolean;
     duration?: number;