@internetstiftelsen/charts 0.16.0 → 0.18.0

package/dist/tooltip/xy-interaction.js

@@ -1,13 +1,15 @@
 import { pointer, select } from 'd3';
 import { getSeriesColor } from '../types.js';
-import { sanitizeForCSS } from '../utils.js';
-import { getAnchoredTooltipPosition, resolveSharedTooltipTarget, resolveSplitTooltipPositions, resolveSplitTooltipTarget, resolveTooltipArrowEdge, } from './geometry.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, formatter, labelFormatter, customFormatter, dom, } = config;
+    const { svg, data, series, xKey, x, y, theme, plotArea, parseValue, isHorizontal, categoryScaleType, mode, position, barAnchorPosition, colorMode, formatter, labelFormatter, customFormatter, dom, } = config;
     const tooltip = dom.getRootTooltip();
     if (!tooltip || data.length === 0) {
         return null;
     }
+    const resolvedPosition = position === 'auto' ? (isHorizontal ? 'vertical' : 'side') : position;
+    const resolvedBarAnchorPosition = isHorizontal ? 'auto' : barAnchorPosition;
     const resolveSeriesValue = config.resolveSeriesValue ??
         ((targetSeries, dataPoint) => {
             const rawValue = dataPoint[targetSeries.dataKey];
@@ -24,6 +26,15 @@ export function attachXYTooltipArea(config) {
         const scaled = y(getCategoryScaleValue(dataPoint[xKey], categoryScaleType));
         return (scaled || 0) + (y.bandwidth ? y.bandwidth() / 2 : 0);
     };
+    const getTooltipValueSign = (value) => {
+        if (value < 0) {
+            return -1;
+        }
+        if (value > 0) {
+            return 1;
+        }
+        return 0;
+    };
     const buildTooltipLabel = (dataPoint) => {
         const labelValue = dataPoint[xKey];
         return labelFormatter
@@ -43,8 +54,26 @@ export function attachXYTooltipArea(config) {
             return value !== null && value !== undefined;
         });
     };
-    const buildSharedTooltipContent = (dataPoint) => {
-        const visibleSeries = getVisibleTooltipSeries(dataPoint);
+    const getSeriesTooltipStyle = (currentSeries, dataPoint, index) => {
+        if (colorMode !== 'series') {
+            return undefined;
+        }
+        const seriesColor = currentSeries.type === 'bar' && currentSeries.colorAdapter
+            ? currentSeries.colorAdapter(dataPoint, index)
+            : getSeriesColor(currentSeries);
+        return {
+            background: seriesColor,
+            border: seriesColor,
+            color: getContrastTextColor(seriesColor),
+        };
+    };
+    const getSharedTooltipStyle = (visibleSeries, dataPoint, index) => {
+        if (visibleSeries.length !== 1) {
+            return undefined;
+        }
+        return getSeriesTooltipStyle(visibleSeries[0], dataPoint, index);
+    };
+    const buildSharedTooltipContent = (dataPoint, visibleSeries) => {
         if (visibleSeries.length === 0) {
             return null;
         }
@@ -63,7 +92,7 @@ export function attachXYTooltipArea(config) {
         return `<strong>${label}</strong><br/>${buildTooltipRow(dataPoint, currentSeries)}`;
     };
     const buildAccessibleLabel = (dataPoint) => {
-        const content = buildSharedTooltipContent(dataPoint);
+        const content = buildSharedTooltipContent(dataPoint, getVisibleTooltipSeries(dataPoint));
         return content ? stripHtml(content) : buildTooltipLabel(dataPoint);
     };
     const dataPointPositions = data.map((dataPoint) => isHorizontal ? getYPosition(dataPoint) : getXPosition(dataPoint));
@@ -143,9 +172,11 @@ export function attachXYTooltipArea(config) {
     const showSharedTooltipAtIndex = (closestIndex) => {
         const dataPoint = data[closestIndex];
         const dataPointPosition = dataPointPositions[closestIndex];
+        const visibleSeries = getVisibleTooltipSeries(dataPoint);
         updateVisualStateAtIndex(closestIndex);
         dom.hideSplitTooltips();
-        const content = buildSharedTooltipContent(dataPoint);
+        dom.applyRootTooltipStyles(theme, getSharedTooltipStyle(visibleSeries, dataPoint, closestIndex));
+        const content = buildSharedTooltipContent(dataPoint, visibleSeries);
         if (!content) {
             dom.hideTooltipSelection(tooltip);
             return;
@@ -171,17 +202,18 @@ export function attachXYTooltipArea(config) {
             resolveSeriesValue,
             closestIndex,
         });
-        const target = resolveSharedTooltipTarget(sharedAnchor);
-        const arrowEdge = resolveTooltipArrowEdge(position, sharedAnchor, target, measuredTooltip.width, measuredTooltip.height);
-        const tooltipPosition = getAnchoredTooltipPosition(sharedAnchor, target, measuredTooltip.width, measuredTooltip.height, arrowEdge);
+        const placementBounds = getTooltipPlacementBounds(svgNode);
+        const visibleAnchor = clipTooltipAnchorToBounds(sharedAnchor, placementBounds);
+        const target = resolveSharedTooltipTarget(visibleAnchor);
+        const arrowEdge = resolveTooltipArrowEdge(resolvedPosition, visibleAnchor, target, measuredTooltip.width, measuredTooltip.height, placementBounds);
+        const tooltipPosition = getAnchoredTooltipPosition(visibleAnchor, target, measuredTooltip.width, measuredTooltip.height, arrowEdge, placementBounds);
         if (!tooltipPosition) {
             dom.hideTooltipSelection(tooltip);
             return;
         }
         dom.renderTooltipWithoutConnector(tooltip, tooltipPosition.left, tooltipPosition.top);
     };
-    const getSeriesTooltipAnchor = (currentSeries, dataPoint, index) => {
-        const value = resolveSeriesValue(currentSeries, dataPoint, index);
+    const getSeriesTooltipAnchor = (currentSeries, index, value) => {
         if (!Number.isFinite(value)) {
             return null;
         }
@@ -198,6 +230,12 @@ export function attachXYTooltipArea(config) {
     };
     const showSplitTooltipAtIndex = (closestIndex) => {
         const dataPoint = data[closestIndex];
+        const svgNode = svg.node();
+        if (!svgNode) {
+            dom.hideSplitTooltips();
+            return;
+        }
+        const placementBounds = getTooltipPlacementBounds(svgNode);
         updateVisualStateAtIndex(closestIndex);
         dom.hideTooltipSelection(tooltip);
         const layouts = [];
@@ -206,20 +244,26 @@ export function attachXYTooltipArea(config) {
             if (rawValue === null || rawValue === undefined) {
                 return;
             }
-            const anchor = getSeriesTooltipAnchor(currentSeries, dataPoint, closestIndex);
+            const value = resolveSeriesValue(currentSeries, dataPoint, closestIndex);
+            const anchor = getSeriesTooltipAnchor(currentSeries, closestIndex, value);
             if (!anchor) {
                 return;
             }
-            const splitTooltip = dom.getSplitTooltip(seriesIndex, theme);
+            const visibleAnchor = clipTooltipAnchorToBounds(anchor, placementBounds);
+            const splitTooltip = dom.getSplitTooltip(seriesIndex, theme, getSeriesTooltipStyle(currentSeries, dataPoint, closestIndex));
             const content = buildSplitTooltipContent(dataPoint, currentSeries);
             const measuredTooltip = dom.measureTooltip(splitTooltip, content);
             if (!measuredTooltip) {
                 return;
             }
-            const target = resolveSplitTooltipTarget(currentSeries, anchor, barAnchorPosition);
+            const target = resolveSplitTooltipTarget(currentSeries, visibleAnchor, resolvedBarAnchorPosition);
+            const targetMode = currentSeries.type === 'bar' &&
+                resolvedBarAnchorPosition === 'auto'
+                ? 'auto'
+                : 'fixed';
             layouts.push({
                 div: splitTooltip,
-                anchor,
+                anchor: visibleAnchor,
                 width: measuredTooltip.width,
                 height: measuredTooltip.height,
                 left: 0,
@@ -228,39 +272,104 @@ export function attachXYTooltipArea(config) {
                 targetX: target.x,
                 targetY: target.y,
                 order: seriesIndex,
+                targetMode,
+                valueSign: getTooltipValueSign(value),
             });
         });
         if (layouts.length === 0) {
             dom.hideSplitTooltips();
             return;
         }
-        resolveSplitTooltipPositions(layouts, position);
+        resolveSplitTooltipPositions(layouts, resolvedPosition, placementBounds, isHorizontal);
         dom.hideUnusedSplitTooltips(layouts.map((layout) => layout.div));
         layouts.forEach((layout) => {
             dom.renderTooltipWithConnector(layout.div, layout.arrowEdge, layout.left, layout.top, layout.width, layout.height, layout.targetX, layout.targetY, layout.anchor);
         });
     };
-    let activeTooltipIndex = null;
+    const showSingleTooltip = (request) => {
+        const dataPoint = data[request.index];
+        const svgNode = svg.node();
+        if (!svgNode) {
+            dom.hideTooltipSelection(tooltip);
+            return null;
+        }
+        const placementBounds = getTooltipPlacementBounds(svgNode);
+        const candidates = [];
+        series.forEach((currentSeries, seriesIndex) => {
+            const rawValue = dataPoint[currentSeries.dataKey];
+            if (rawValue === null || rawValue === undefined) {
+                return;
+            }
+            const value = resolveSeriesValue(currentSeries, dataPoint, request.index);
+            const anchor = getSeriesTooltipAnchor(currentSeries, request.index, value);
+            if (!anchor) {
+                return;
+            }
+            const visibleAnchor = clipTooltipAnchorToBounds(anchor, placementBounds);
+            const target = resolveSplitTooltipTarget(currentSeries, visibleAnchor, resolvedBarAnchorPosition);
+            candidates.push({
+                series: currentSeries,
+                seriesIndex,
+                anchor: visibleAnchor,
+                target,
+            });
+        });
+        const selectedCandidate = candidates.find((candidate) => candidate.seriesIndex === request.seriesIndex) ?? getClosestSingleTooltipCandidate(candidates, request);
+        updateVisualStateAtIndex(request.index);
+        dom.hideSplitTooltips();
+        if (!selectedCandidate) {
+            dom.hideTooltipSelection(tooltip);
+            return null;
+        }
+        dom.applyRootTooltipStyles(theme, getSeriesTooltipStyle(selectedCandidate.series, dataPoint, request.index));
+        const content = buildSplitTooltipContent(dataPoint, selectedCandidate.series);
+        const measuredTooltip = dom.measureTooltip(tooltip, content);
+        if (!measuredTooltip) {
+            dom.hideTooltipSelection(tooltip);
+            return null;
+        }
+        const arrowEdge = resolveTooltipArrowEdge(resolvedPosition, selectedCandidate.anchor, selectedCandidate.target, measuredTooltip.width, measuredTooltip.height, placementBounds);
+        const tooltipPosition = getAnchoredTooltipPosition(selectedCandidate.anchor, selectedCandidate.target, measuredTooltip.width, measuredTooltip.height, arrowEdge, placementBounds);
+        if (!tooltipPosition) {
+            dom.hideTooltipSelection(tooltip);
+            return null;
+        }
+        dom.renderTooltipWithConnector(tooltip, arrowEdge, tooltipPosition.left, tooltipPosition.top, measuredTooltip.width, measuredTooltip.height, selectedCandidate.target.x, selectedCandidate.target.y, selectedCandidate.anchor);
+        return {
+            index: request.index,
+            seriesIndex: selectedCandidate.seriesIndex,
+        };
+    };
+    let activeTooltipRequest = null;
     const hideTooltip = () => {
-        activeTooltipIndex = null;
+        activeTooltipRequest = null;
         dom.hideTooltipSelection(tooltip);
         dom.hideSplitTooltips();
         clearVisualState();
     };
     const tooltipSvgNode = svg.node();
-    const queuedRender = createQueuedTooltipRender(tooltipSvgNode, (index) => {
-        activeTooltipIndex = index;
+    const queuedRender = createQueuedTooltipRender(tooltipSvgNode, (request) => {
+        if (mode === 'single') {
+            activeTooltipRequest = showSingleTooltip(request);
+            return;
+        }
+        activeTooltipRequest = { index: request.index };
         if (mode === 'split') {
-            showSplitTooltipAtIndex(index);
+            showSplitTooltipAtIndex(request.index);
             return;
         }
-        showSharedTooltipAtIndex(index);
+        showSharedTooltipAtIndex(request.index);
     });
     overlay
         .on('mousemove', (event) => {
         const [mouseX, mouseY] = pointer(event, svg.node());
         const closestIndex = getClosestIndexFromPointer(mouseX, mouseY, dataPointPositions, isHorizontal);
-        queuedRender.request(closestIndex);
+        const pointerPosition = getDocumentPointerPosition(event);
+        queuedRender.request({
+            index: closestIndex,
+            pointerX: pointerPosition.x,
+            pointerY: pointerPosition.y,
+        });
     })
         .on('mouseout', () => {
         if (isTooltipFocusTarget(document.activeElement)) {
@@ -296,7 +405,13 @@ export function attachXYTooltipArea(config) {
         }
         queuedRender.cancel();
         select(this).attr('stroke', '#111827').attr('stroke-width', 2);
-        activeTooltipIndex = currentIndex;
+        if (mode === 'single') {
+            activeTooltipRequest = showSingleTooltip({
+                index: currentIndex,
+            });
+            return;
+        }
+        activeTooltipRequest = { index: currentIndex };
         if (mode === 'split') {
             showSplitTooltipAtIndex(currentIndex);
             return;
@@ -324,10 +439,10 @@ export function attachXYTooltipArea(config) {
         focusTargetNodes[nextIndex].focus();
     });
     return attachTooltipScrollListeners(tooltipSvgNode, () => {
-        if (activeTooltipIndex === null) {
+        if (activeTooltipRequest === null) {
             return;
         }
-        queuedRender.request(activeTooltipIndex);
+        queuedRender.request(activeTooltipRequest);
     });
 }
 function normalizeFormatterValue(value) {
@@ -376,6 +491,33 @@ function getClosestIndexFromPointer(mouseX, mouseY, dataPointPositions, isHorizo
     }
     return closestIndex;
 }
+function getDocumentPointerPosition(event) {
+    return {
+        x: event.clientX + window.scrollX,
+        y: event.clientY + window.scrollY,
+    };
+}
+function getClosestSingleTooltipCandidate(candidates, request) {
+    if (candidates.length === 0) {
+        return null;
+    }
+    if (request.pointerX === undefined ||
+        request.pointerY === undefined ||
+        !Number.isFinite(request.pointerX) ||
+        !Number.isFinite(request.pointerY)) {
+        return candidates[0];
+    }
+    return candidates.reduce((closest, candidate) => {
+        const closestDistance = getSingleTooltipDistance(closest, request);
+        const candidateDistance = getSingleTooltipDistance(candidate, request);
+        return candidateDistance < closestDistance ? candidate : closest;
+    });
+}
+function getSingleTooltipDistance(candidate, request) {
+    const deltaX = (request.pointerX ?? 0) - candidate.target.x;
+    const deltaY = (request.pointerY ?? 0) - candidate.target.y;
+    return Math.hypot(deltaX, deltaY);
+}
 function resolveSharedTooltipAnchor({ svgNode, dataPoint, dataPointPosition, series, x, y, isHorizontal, resolveSeriesValue, closestIndex, }) {
     const svgRect = svgNode.getBoundingClientRect();
     const values = series.map((currentSeries) => resolveSeriesValue(currentSeries, dataPoint, closestIndex));
@@ -467,25 +609,25 @@ function resolvePointTooltipAnchor(svgNode, isHorizontal, categoryPosition, valu
         centerY: anchorY,
     };
 }
-function createQueuedTooltipRender(tooltipSvgNode, renderTooltipAtIndex) {
+function createQueuedTooltipRender(tooltipSvgNode, renderTooltip) {
     let pendingTooltipFrame = null;
-    let pendingTooltipIndex = null;
-    const request = (index) => {
-        pendingTooltipIndex = index;
+    let pendingTooltipRequest = null;
+    const request = (nextRequest) => {
+        pendingTooltipRequest = nextRequest;
         if (pendingTooltipFrame !== null) {
             return;
         }
         pendingTooltipFrame = requestFrame(() => {
-            const nextIndex = pendingTooltipIndex;
+            const currentRequest = pendingTooltipRequest;
             pendingTooltipFrame = null;
-            pendingTooltipIndex = null;
-            if (nextIndex === null) {
+            pendingTooltipRequest = null;
+            if (currentRequest === null) {
                 return;
             }
             if (!tooltipSvgNode?.isConnected) {
                 return;
             }
-            renderTooltipAtIndex(nextIndex);
+            renderTooltip(currentRequest);
         });
     };
     const cancel = () => {
@@ -494,7 +636,7 @@ function createQueuedTooltipRender(tooltipSvgNode, renderTooltipAtIndex) {
         }
         cancelFrame(pendingTooltipFrame);
         pendingTooltipFrame = null;
-        pendingTooltipIndex = null;
+        pendingTooltipRequest = null;
     };
     return { request, cancel };
 }
@@ -577,6 +719,47 @@ function getNextFocusTargetIndex(currentIndex, key, focusTargetCount) {
             return -1;
     }
 }
+function getTooltipPlacementBounds(svgNode) {
+    let bounds = getSplitTooltipViewportBounds();
+    let currentElement = svgNode.parentElement;
+    while (currentElement) {
+        if (isScrollableElement(currentElement)) {
+            bounds = intersectTooltipBounds(bounds, getElementTooltipBounds(currentElement));
+        }
+        currentElement = currentElement.parentElement;
+    }
+    return bounds;
+}
+function getElementTooltipBounds(element) {
+    const rect = element.getBoundingClientRect();
+    const left = rect.left + window.scrollX;
+    const top = rect.top + window.scrollY;
+    return {
+        minLeft: left,
+        maxRight: left + rect.width,
+        minTop: top,
+        maxBottom: top + rect.height,
+    };
+}
+function intersectTooltipBounds(bounds, nextBounds) {
+    if (nextBounds.maxRight <= nextBounds.minLeft ||
+        nextBounds.maxBottom <= nextBounds.minTop) {
+        return bounds;
+    }
+    const minLeft = Math.max(bounds.minLeft, nextBounds.minLeft);
+    const maxRight = Math.min(bounds.maxRight, nextBounds.maxRight);
+    const minTop = Math.max(bounds.minTop, nextBounds.minTop);
+    const maxBottom = Math.min(bounds.maxBottom, nextBounds.maxBottom);
+    if (maxRight <= minLeft || maxBottom <= minTop) {
+        return bounds;
+    }
+    return {
+        minLeft,
+        maxRight,
+        minTop,
+        maxBottom,
+    };
+}
 function attachTooltipScrollListeners(svgNode, onScroll) {
     if (!svgNode) {
         return null;

package/dist/tooltip.d.ts

@@ -1,5 +1,5 @@
 import type { Selection } from 'd3';
-import type { TooltipConfig, DataItem, DataValue, D3Scale, ChartTheme, ExportHooks, TooltipConfigBase, ScaleType, TooltipMode, TooltipPosition, TooltipBarAnchorPosition, TooltipTransitionConfig } from './types.js';
+import type { TooltipConfig, DataItem, DataValue, D3Scale, ChartTheme, ExportHooks, TooltipConfigBase, ScaleType, TooltipMode, TooltipPosition, TooltipBarAnchorPosition, TooltipTransitionConfig, TooltipColorMode } from './types.js';
 import type { ChartComponent } from './chart-interface.js';
 import type { PlotAreaBounds } from './layout-manager.js';
 import { type XYTooltipSeries } from './tooltip/types.js';
@@ -10,6 +10,7 @@ export declare class Tooltip implements ChartComponent<TooltipConfigBase> {
     readonly mode: TooltipMode;
     readonly position: TooltipPosition;
     readonly barAnchorPosition: TooltipBarAnchorPosition;
+    readonly colorMode: TooltipColorMode;
     readonly maxWidth: number;
     readonly transition: Required<TooltipTransitionConfig>;
     readonly formatter?: (dataKey: string, value: DataValue, data: DataItem) => string;

package/dist/tooltip.js

@@ -34,6 +34,12 @@ export class Tooltip {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "colorMode", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "maxWidth", {
             enumerable: true,
             configurable: true,
@@ -82,12 +88,13 @@ export class Tooltip {
             writable: true,
             value: null
         });
-        const { mode = 'split', position = 'side', barAnchorPosition = 'middle', maxWidth, transition, formatter, labelFormatter, customFormatter, exportHooks, } = config;
+        const { mode = 'split', position = 'auto', barAnchorPosition = 'auto', colorMode = 'theme', 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.maxWidth =
             maxWidth !== undefined && Number.isFinite(maxWidth) && maxWidth > 0
                 ? maxWidth
@@ -112,6 +119,7 @@ export class Tooltip {
             mode: this.mode,
             position: this.position,
             barAnchorPosition: this.barAnchorPosition,
+            colorMode: this.colorMode,
             maxWidth: this.maxWidth,
             transition: this.transition,
             formatter: this.formatter,
@@ -153,6 +161,7 @@ export class Tooltip {
             mode: this.mode,
             position: this.position,
             barAnchorPosition: this.barAnchorPosition,
+            colorMode: this.colorMode,
             formatter: this.formatter,
             labelFormatter: this.labelFormatter,
             customFormatter: this.customFormatter,

package/dist/types.d.ts

@@ -299,9 +299,10 @@ export type GridConfigBase = {
 export type GridConfig = GridConfigBase & {
     exportHooks?: ExportHooks<GridConfigBase>;
 };
-export type TooltipMode = 'shared' | 'split';
-export type TooltipPosition = 'side' | 'vertical';
-export type TooltipBarAnchorPosition = 'top' | 'middle';
+export type TooltipMode = 'shared' | 'split' | 'single';
+export type TooltipPosition = 'auto' | 'side' | 'vertical';
+export type TooltipBarAnchorPosition = 'auto' | 'top' | 'middle';
+export type TooltipColorMode = 'theme' | 'series';
 export type TooltipTransitionConfig = {
     show?: boolean;
     duration?: number;
@@ -311,6 +312,7 @@ export type TooltipConfigBase = {
     mode?: TooltipMode;
     position?: TooltipPosition;
     barAnchorPosition?: TooltipBarAnchorPosition;
+    colorMode?: TooltipColorMode;
     maxWidth?: number;
     transition?: TooltipTransitionConfig;
     formatter?: SeriesValueFormatter;

package/docs/components.md

@@ -125,9 +125,10 @@ Renders interactive tooltips on hover and keyboard focus.
 
 ```typescript
 new Tooltip({
-    mode?: 'shared' | 'split',
-    position?: 'side' | 'vertical',
-    barAnchorPosition?: 'top' | 'middle',
+    mode?: 'shared' | 'split' | 'single',
+    position?: 'auto' | 'side' | 'vertical',
+    barAnchorPosition?: 'auto' | 'top' | 'middle',
+    colorMode?: 'theme' | 'series',
     maxWidth?: number, // default: 280
     transition?: {
         show?: boolean,
@@ -146,18 +147,27 @@ The formatter receives:
 
 Tooltip modes:
 
-- `shared` - One tooltip per hovered category/value group
 - `split` - Default. One tooltip per visible series at the hovered category/value group
+- `single` - One tooltip for the closest visible series at the hovered category/value group
+- `shared` - One grouped tooltip per hovered category/value group
 
-Shared tooltips omit series whose value is `null` or `undefined` for the hovered
-data point. Shared `customFormatter` callbacks receive that filtered series list.
+Single and shared tooltips omit series whose value is `null` or `undefined` for
+the hovered data point. `customFormatter` receives the current series in
+`split` and `single` modes, and the visible series list in `shared` mode.
 
-Use `position: 'side' | 'vertical'` for split tooltip placement. For bars,
-`barAnchorPosition` controls whether connectors point to the `top` or `middle`
-of each bar.
+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.
+
+For horizontal bar charts, prefer `position: 'auto'` or `position: 'vertical'`.
+`position: 'side'` and `barAnchorPosition: 'top' | 'middle'` are kept for
+legacy configs, but horizontal bars resolve bar anchoring automatically.
 
 Tooltips default to a `280px` max width. Set `transition.show: true` to fade and
-slide tooltips between hovered positions. Tooltip colors use `theme.tooltip`.
+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.
 
 `defaultResponsiveConfig` switches tooltip components to `mode: 'shared'` at
 the `sm` breakpoint so compact XY charts use one grouped tooltip by default.

package/docs/getting-started.md

@@ -11,15 +11,16 @@ npm install @internetstiftelsen/charts
 ## Vanilla JavaScript
 
 ```javascript
-import { XYChart } from '@internetstiftelsen/charts/xy-chart';
-import { Line } from '@internetstiftelsen/charts/line';
-import { Bar } from '@internetstiftelsen/charts/bar';
-import { XAxis } from '@internetstiftelsen/charts/x-axis';
-import { YAxis } from '@internetstiftelsen/charts/y-axis';
-import { Grid } from '@internetstiftelsen/charts/grid';
-import { Tooltip } from '@internetstiftelsen/charts/tooltip';
-import { Legend } from '@internetstiftelsen/charts/legend';
-import { Title } from '@internetstiftelsen/charts/title';
+import {
+    Grid,
+    Legend,
+    Line,
+    Title,
+    Tooltip,
+    XAxis,
+    XYChart,
+    YAxis,
+} from '@internetstiftelsen/charts';
 
 // Your data
 const data = [
@@ -57,6 +58,9 @@ chart.update(newData);
 chart.destroy();
 ```
 
+Subpath imports like `@internetstiftelsen/charts/xy-chart` remain available when
+you want to import individual modules directly.
+
 ## Lifecycle Events
 
 Charts support lifecycle listeners with `on()` and `off()`.

package/package.json

@@ -1,14 +1,21 @@
 {
-    "version": "0.16.0",
+    "version": "0.18.0",
     "name": "@internetstiftelsen/charts",
     "type": "module",
     "sideEffects": false,
+    "types": "./dist/index.d.ts",
+    "module": "./dist/index.js",
+    "main": "./dist/index.js",
     "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js"
+        },
+        "./package.json": "./package.json",
         "./*": {
             "types": "./dist/*.d.ts",
             "import": "./dist/*.js"
-        },
-        "./package.json": "./package.json"
+        }
     },
     "files": [
         "dist",