@internetstiftelsen/charts 0.13.0 → 0.13.2

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/line.d.ts

@@ -1,5 +1,5 @@
 import { type Selection } from 'd3';
-import type { LineConfig, DataItem, D3Scale, ScaleType, ChartTheme, LineValueLabelConfig, ExportHooks, LineConfigBase } from './types.js';
+import type { LineConfig, DataItem, D3Scale, ScaleType, ChartTheme, LineValueLabelConfig, ExportHooks, LineConfigBase, LineCurveType, LinePointsConfig } from './types.js';
 import type { ChartComponent } from './chart-interface.js';
 import type { XYPointAnimationContext, XYPointSnapshot, XYSeriesRenderResult } from './xy-motion/types.js';
 export declare class Line implements ChartComponent<LineConfigBase> {
@@ -7,6 +7,8 @@ export declare class Line implements ChartComponent<LineConfigBase> {
     readonly dataKey: string;
     readonly stroke: string;
     readonly strokeWidth?: number;
+    readonly curve: LineCurveType;
+    readonly points: Required<LinePointsConfig>;
     readonly valueLabel?: LineValueLabelConfig;
     readonly exportHooks?: ExportHooks<LineConfigBase>;
     constructor(config: LineConfig);

package/dist/line.js

@@ -1,7 +1,18 @@
-import { line } from 'd3';
+import { curveBasis, curveCardinal, curveLinear, curveMonotoneX, curveNatural, curveStep, line, } from 'd3';
 import { sanitizeForCSS, mergeDeep } from './utils.js';
 import { getScalePosition } from './scale-utils.js';
 import { buildXYDatumSnapshotKeys, createTransitionCompletionPromise, createLeftToRightRevealTransition, getEnterStaggerTiming, } from './xy-motion/helpers.js';
+const DEFAULT_LINE_POINTS = {
+    show: 'always',
+};
+const LINE_CURVE_FACTORIES = {
+    linear: curveLinear,
+    monotone: curveMonotoneX,
+    step: curveStep,
+    natural: curveNatural,
+    basis: curveBasis,
+    cardinal: curveCardinal,
+};
 export class Line {
     constructor(config) {
         Object.defineProperty(this, "type", {
@@ -28,6 +39,18 @@ export class Line {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "curve", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "points", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "valueLabel", {
             enumerable: true,
             configurable: true,
@@ -43,6 +66,10 @@ export class Line {
         this.dataKey = config.dataKey;
         this.stroke = config.stroke || '#8884d8';
         this.strokeWidth = config.strokeWidth;
+        this.curve = config.curve || 'linear';
+        this.points = {
+            show: config.points?.show ?? DEFAULT_LINE_POINTS.show,
+        };
         this.valueLabel = config.valueLabel;
         this.exportHooks = config.exportHooks;
     }
@@ -51,6 +78,8 @@ export class Line {
             dataKey: this.dataKey,
             stroke: this.stroke,
             strokeWidth: this.strokeWidth,
+            curve: this.curve,
+            points: this.points,
             valueLabel: this.valueLabel,
         };
     }
@@ -80,7 +109,9 @@ export class Line {
         });
         const transitions = [
             ...this.renderLinePath(plotGroup, lineData, animatedLineData, theme, sanitizeForCSS(this.dataKey), animation),
-            ...this.renderLinePoints(plotGroup, validLineData, validAnimatedLineData, theme, animation),
+            ...(this.points.show === 'always'
+                ? this.renderLinePoints(plotGroup, validLineData, validAnimatedLineData, theme, animation)
+                : []),
         ];
         const snapshot = this.createSnapshot(validLineData);
         // Render value labels if enabled (only for valid values)
@@ -129,8 +160,10 @@ export class Line {
     }
     renderLinePath(plotGroup, lineData, animatedLineData, theme, sanitizedKey, animation) {
         const lineStrokeWidth = this.strokeWidth ?? theme.line.strokeWidth;
+        const curveFactory = LINE_CURVE_FACTORIES[this.curve] || curveLinear;
         const lineGenerator = line()
             .defined((entry) => entry.valid)
+            .curve(curveFactory)
             .x((entry) => entry.x)
             .y((entry) => entry.y);
         const finalPath = lineGenerator(lineData);

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,19 @@ export declare class Tooltip implements ChartComponent<TooltipConfigBase> {
     private getOppositeVerticalArrowEdge;
     private flipTooltipIfItReducesCollisions;
     private countSplitTooltipCollisions;
+    private countPlacedLayoutsOnEdge;
     private doSplitTooltipLayoutsOverlap;
     private resolveSplitTooltipPositions;
+    private resolveSideSplitTooltipPositions;
+    private resolveHorizontalSideSplitTooltipPositions;
+    private resolveHorizontalSideSplitTooltipCollisions;
+    private flipHorizontalSideTooltipIfItReducesCollisions;
+    private findReusableHorizontalTooltipLane;
+    private resolveNewHorizontalTooltipLaneTop;
+    private getHorizontalTooltipLaneTopCandidates;
+    private assignLayoutToHorizontalTooltipLane;
+    private doHorizontalTooltipLanesOverlap;
+    private doSplitTooltipLayoutsOverlapHorizontally;
+    private resolveVerticalSplitTooltipPositions;
 }
 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,
@@ -269,7 +281,11 @@ export class Tooltip {
             .attr('aria-hidden', 'true')
             .style('fill', 'none')
             .style('pointer-events', 'all');
-        const pointSeries = series.filter((currentSeries) => {
+        const focusCircleSeries = series.filter((currentSeries) => {
+            if (currentSeries.type === 'line' &&
+                currentSeries.points.show === 'never') {
+                return false;
+            }
             return (currentSeries.type === 'line' ||
                 currentSeries.type === 'area' ||
                 currentSeries.type === 'scatter');
@@ -278,7 +294,7 @@ export class Tooltip {
             return currentSeries.type === 'bar';
         });
         const hasBarSeries = barSeries.length > 0;
-        const focusCircles = pointSeries.map((currentSeries) => {
+        const focusCircles = focusCircleSeries.map((currentSeries) => {
             const seriesColor = getSeriesColor(currentSeries);
             return svg
                 .append('circle')
@@ -303,7 +319,7 @@ export class Tooltip {
         const updateVisualStateAtIndex = (closestIndex) => {
             const dataPoint = data[closestIndex];
             const dataPointPosition = dataPointPositions[closestIndex];
-            pointSeries.forEach((currentSeries, seriesIndex) => {
+            focusCircleSeries.forEach((currentSeries, seriesIndex) => {
                 const value = resolveSeriesValue(currentSeries, dataPoint, closestIndex);
                 if (!Number.isFinite(value)) {
                     focusCircles[seriesIndex].style('opacity', 0);
@@ -450,11 +466,13 @@ export class Tooltip {
             if (layouts.length === 0) {
                 return;
             }
-            this.resolveSplitTooltipCollisions(layouts, 'vertical', this.getOppositeVerticalArrowEdge);
-            this.resolveSplitTooltipCollisions(layouts, 'side', this.getOppositeSideArrowEdge);
-            this.resolveSplitTooltipPositions(layouts);
+            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);
+                this.renderTooltipWithConnector(layout.div, layout.arrowEdge, layout.left, layout.top, layout.width, layout.height, layout.targetX, layout.targetY, layout.anchor);
             });
         };
         const hideTooltip = () => {
@@ -702,6 +720,7 @@ export class Tooltip {
             theme.tooltip.fontFamily,
             theme.tooltip.fontSize,
             theme.tooltip.fontWeight,
+            this.maxWidth,
             this.transition.show,
             this.transition.duration,
             this.transition.easing,
@@ -720,10 +739,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}`)
@@ -754,7 +776,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) ||
@@ -762,7 +784,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;
@@ -1096,7 +1118,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)) {
@@ -1116,7 +1138,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;
         }
@@ -1159,21 +1183,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 {
@@ -1194,7 +1228,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);
@@ -1238,7 +1277,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;
@@ -1248,13 +1292,28 @@ 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) {
+    resolveSplitTooltipPositions(layouts, isHorizontal) {
+        if (isHorizontal && this.position === 'side') {
+            this.resolveHorizontalSideSplitTooltipPositions(layouts);
+            return;
+        }
+        if (this.position === 'vertical') {
+            this.resolveVerticalSplitTooltipPositions(layouts);
+            return;
+        }
+        this.resolveSideSplitTooltipPositions(layouts);
+    }
+    resolveSideSplitTooltipPositions(layouts) {
         const minTop = window.scrollY + TOOLTIP_VIEWPORT_PADDING_PX;
         const maxBottom = window.scrollY + window.innerHeight - TOOLTIP_VIEWPORT_PADDING_PX;
         const tooltipsByEdge = {
@@ -1305,6 +1364,164 @@ 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);
+    }
+    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);
+        });
+        [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 +
+                    SPLIT_TOOLTIP_GAP_PX;
+                currentLayout.left = Math.max(currentLayout.left, minAllowedLeft);
+            }
+            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;
+                    });
+                }
+            }
+            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));
+            });
+        });
+        this.resolveSideSplitTooltipPositions([
+            ...tooltipsByEdge.left,
+            ...tooltipsByEdge.right,
+        ]);
+    }
 }
 Object.defineProperty(Tooltip, "nextTooltipId", {
     enumerable: true,

package/dist/types.d.ts

@@ -184,16 +184,25 @@ export type ValueLabelConfig = {
 export type LineValueLabelConfig = ValueLabelConfig & {
     show?: boolean;
 };
+export type LinePointVisibility = 'always' | 'hover' | 'never';
+export type LinePointsConfig = {
+    show?: LinePointVisibility;
+};
 export type BarValueLabelConfig = ValueLabelConfig & {
     show?: boolean;
     position?: 'inside' | 'outside';
     insidePosition?: 'top' | 'middle' | 'bottom';
 };
 export type BarSide = 'left' | 'right';
+export type CurveType = 'linear' | 'monotone' | 'step' | 'natural' | 'basis' | 'cardinal';
+export type LineCurveType = CurveType;
+export type AreaCurveType = CurveType;
 export type LineConfigBase = {
     dataKey: string;
     stroke?: string;
     strokeWidth?: number;
+    curve?: LineCurveType;
+    points?: LinePointsConfig;
     valueLabel?: LineValueLabelConfig;
 };
 export type LineConfig = LineConfigBase & {
@@ -219,7 +228,6 @@ export type BarConfigBase = {
 export type BarConfig = BarConfigBase & {
     exportHooks?: ExportHooks<BarConfigBase>;
 };
-export type AreaCurveType = 'linear' | 'monotone' | 'step' | 'natural' | 'basis' | 'cardinal';
 export type AreaConfigBase = {
     dataKey: string;
     fill?: string;
@@ -245,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;
@@ -300,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
@@ -338,6 +338,10 @@ new Line({
     dataKey: string,                 // Key in data objects for Y values (required)
     stroke?: string,                 // Line color (auto-assigned if omitted)
     strokeWidth?: number,            // Line width in pixels (default: 2)
+    curve?: 'linear' | 'monotone' | 'step' | 'natural' | 'basis' | 'cardinal',
+    points?: {
+        show?: 'always' | 'hover' | 'never'
+    },                               // Data point visibility (default: 'always')
     valueLabel?: {
         show?: boolean,
         formatter?: (dataKey, value, data) => string
@@ -355,8 +359,20 @@ chart.addChild(new Line({ dataKey: 'expenses' }));
 // Manual colors
 chart.addChild(new Line({ dataKey: 'revenue', stroke: '#00ff00' }));
 chart.addChild(new Line({ dataKey: 'expenses', stroke: '#ff0000' }));
+
+// Smooth line interpolation
+chart.addChild(new Line({ dataKey: 'revenue', curve: 'monotone' }));
+
+// Show point circles only while hovering or focusing a tooltip target
+chart
+    .addChild(new Line({ dataKey: 'revenue', points: { show: 'hover' } }))
+    .addChild(new Tooltip());
 ```
 
+`points.show: 'hover'` uses `Tooltip` focus markers, so add a `Tooltip`
+component when hover-only points should be visible. Use `'never'` to suppress
+both static line points and tooltip focus markers for that line.
+
 ---
 
 ## Scatter
@@ -499,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.
 
@@ -560,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.0",
+    "version": "0.13.2",
     "name": "@internetstiftelsen/charts",
     "type": "module",
     "sideEffects": false,