@gravity-ui/charts 1.44.0 → 1.45.0

package/dist/esm/core/series/prepare-annotation.d.ts

@@ -0,0 +1,12 @@
+import type { ChartAnnotationLabel, ChartAnnotationPopup } from '../../types';
+import type { PreparedAnnotation } from './types';
+type AnnotationOptionsLabel = Omit<ChartAnnotationLabel, 'text'> | undefined;
+export declare function prepareAnnotation(args: {
+    annotation: {
+        label: ChartAnnotationLabel;
+        popup?: ChartAnnotationPopup;
+    };
+    optionsLabel?: AnnotationOptionsLabel;
+    optionsPopup?: ChartAnnotationPopup;
+}): Promise<PreparedAnnotation>;
+export {};

package/dist/esm/core/series/prepare-annotation.js

@@ -0,0 +1,31 @@
+import { annotationLabelDefaults, annotationPopupDefaults } from '../constants';
+import { getTextSizeFn } from '../utils';
+function resolvePadding(padding) {
+    if (padding === undefined) {
+        return annotationPopupDefaults.padding;
+    }
+    if (typeof padding === 'number') {
+        return [padding, padding];
+    }
+    return padding;
+}
+export async function prepareAnnotation(args) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    const { annotation, optionsLabel, optionsPopup } = args;
+    const style = Object.assign(Object.assign(Object.assign({}, annotationLabelDefaults.style), optionsLabel === null || optionsLabel === void 0 ? void 0 : optionsLabel.style), annotation.label.style);
+    const getTextSize = getTextSizeFn({ style });
+    const textSize = await getTextSize(annotation.label.text);
+    return {
+        label: {
+            style,
+            text: annotation.label.text,
+            size: { height: textSize.height, width: textSize.width },
+        },
+        popup: {
+            backgroundColor: (_c = (_b = (_a = annotation.popup) === null || _a === void 0 ? void 0 : _a.backgroundColor) !== null && _b !== void 0 ? _b : optionsPopup === null || optionsPopup === void 0 ? void 0 : optionsPopup.backgroundColor) !== null && _c !== void 0 ? _c : annotationPopupDefaults.backgroundColor,
+            borderRadius: (_f = (_e = (_d = annotation.popup) === null || _d === void 0 ? void 0 : _d.borderRadius) !== null && _e !== void 0 ? _e : optionsPopup === null || optionsPopup === void 0 ? void 0 : optionsPopup.borderRadius) !== null && _f !== void 0 ? _f : annotationPopupDefaults.borderRadius,
+            offset: (_j = (_h = (_g = annotation.popup) === null || _g === void 0 ? void 0 : _g.offset) !== null && _h !== void 0 ? _h : optionsPopup === null || optionsPopup === void 0 ? void 0 : optionsPopup.offset) !== null && _j !== void 0 ? _j : annotationPopupDefaults.offset,
+            padding: resolvePadding((_l = (_k = annotation.popup) === null || _k === void 0 ? void 0 : _k.padding) !== null && _l !== void 0 ? _l : optionsPopup === null || optionsPopup === void 0 ? void 0 : optionsPopup.padding),
+        },
+    };
+}

package/dist/esm/core/series/types.d.ts

@@ -1,5 +1,21 @@
 import type { AreaSeries, AreaSeriesData, BarXSeries, BarXSeriesData, BarYSeries, BarYSeriesData, BaseTextStyle, ChartLegend, ChartSeries, ChartSeriesRangeSliderOptions, ConnectorCurve, ConnectorShape, FunnelSeries, FunnelSeriesData, HeatmapSeries, HeatmapSeriesData, LineSeries, LineSeriesData, LineSeriesLineBaseStyle, PathLegendSymbolOptions, PieSeries, PieSeriesData, RadarSeries, RadarSeriesCategory, RadarSeriesData, RectLegendSymbolOptions, SankeySeries, SankeySeriesData, ScatterSeries, ScatterSeriesData, SymbolLegendSymbolOptions, TreemapSeries, TreemapSeriesData, ValueFormat, WaterfallSeries, WaterfallSeriesData, XRangeSeries, XRangeSeriesData } from '../../types';
 import type { DashStyle, LayoutAlgorithm, LineCap, LineJoin, SeriesOptionsDefaults, SymbolType } from '../constants';
+export type PreparedAnnotation = {
+    label: {
+        size: {
+            height: number;
+            width: number;
+        };
+        style: BaseTextStyle;
+        text: string;
+    };
+    popup: {
+        backgroundColor: string;
+        borderRadius: number;
+        offset: number;
+        padding: [number, number];
+    };
+};
 export type RectLegendSymbol = {
     shape: 'rect';
 } & Required<RectLegendSymbolOptions>;

package/dist/esm/core/types/chart/annotation.d.ts

@@ -0,0 +1,45 @@
+import type { BaseTextStyle } from './base';
+export interface ChartAnnotationLabel {
+    /** Annotation text */
+    text: string;
+    /** Text style. fontColor defaults to 'var(--g-color-text-light-primary)' */
+    style?: Partial<BaseTextStyle>;
+}
+export interface ChartAnnotationPopup {
+    /**
+     * Background color of the popup.
+     * @default 'var(--g-color-base-float-heavy)'
+     */
+    backgroundColor?: string;
+    /**
+     * Border radius of the popup.
+     * @default 4
+     */
+    borderRadius?: number;
+    /**
+     * Distance in pixels between the anchor point and the popup edge along the main axis.
+     * The main axis depends on the automatically chosen placement:
+     * for top/bottom — vertical distance, for left/right — horizontal distance.
+     * @default 5
+     */
+    offset?: number;
+    /**
+     * Popup padding. Number or [vertical, horizontal].
+     * @default [4, 8]
+     */
+    padding?: number | [number, number];
+}
+/** Default annotation settings applied to all data points in a series */
+export interface ChartAnnotationSeriesOptions {
+    /** Default label style for annotations */
+    label?: Omit<ChartAnnotationLabel, 'text'>;
+    /** Default popup settings for annotations */
+    popup?: ChartAnnotationPopup;
+}
+/** Annotation for a specific data point. Renders as a popup with text label near the data point. */
+export interface ChartPointAnnotation {
+    /** Text content and style of the annotation */
+    label: ChartAnnotationLabel;
+    /** Visual settings for the annotation popup container (background, padding, etc.) */
+    popup?: ChartAnnotationPopup;
+}

package/dist/esm/core/types/chart/annotation.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/core/types/chart/area.d.ts

@@ -1,5 +1,6 @@
 import type { SERIES_TYPE } from '../../constants';
 import type { MeaningfulAny } from '../misc';
+import type { ChartPointAnnotation } from './annotation';
 import type { BaseSeries, BaseSeriesData, BaseSeriesLegend } from './base';
 import type { RectLegendSymbolOptions } from './legend';
 import type { PointMarkerOptions } from './marker';
@@ -23,6 +24,8 @@ export interface AreaSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
     label?: string | number;
     /** Individual marker options for the point. */
     marker?: {
+        /** Fill color of the marker for this point */
+        color?: string;
         /** States for a single point marker. */
         states?: {
             /** The normal state of a single point marker. */
@@ -35,6 +38,11 @@ export interface AreaSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
             };
         };
     };
+    /**
+     * Annotation displayed near this data point as a bubble with text label and optional marker.
+     * Useful for highlighting specific values, events, or adding contextual notes.
+     */
+    annotation?: ChartPointAnnotation;
 }
 export type AreaMarkerSymbol = 'circle' | 'square';
 export interface AreaMarkerOptions extends PointMarkerOptions {

package/dist/esm/core/types/chart/bar-x.d.ts

@@ -1,5 +1,6 @@
 import type { SERIES_TYPE } from '../../constants';
 import type { MeaningfulAny } from '../misc';
+import type { ChartPointAnnotation } from './annotation';
 import type { BaseSeries, BaseSeriesData, BaseSeriesLegend } from './base';
 import type { RectLegendSymbolOptions } from './legend';
 import type { ChartSeriesOptions, ChartSeriesRangeSliderOptions } from './series';
@@ -27,6 +28,11 @@ export interface BarXSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
     label?: string | number;
     /** Individual opacity for the bar-x column. */
     opacity?: number;
+    /**
+     * Annotation displayed near this data point as a bubble with text label.
+     * Useful for highlighting specific values, events, or adding contextual notes.
+     */
+    annotation?: ChartPointAnnotation;
 }
 export interface BarXSeries<T = MeaningfulAny> extends BaseSeries {
     type: typeof SERIES_TYPE.BarX;

package/dist/esm/core/types/chart/line.d.ts

@@ -1,5 +1,6 @@
 import type { DashStyle, LineCap, LineJoin, SERIES_TYPE } from '../../constants';
 import type { MeaningfulAny } from '../misc';
+import type { ChartPointAnnotation } from './annotation';
 import type { BaseSeries, BaseSeriesData, BaseSeriesLegend } from './base';
 import type { RectLegendSymbolOptions } from './legend';
 import type { PointMarkerOptions } from './marker';
@@ -22,12 +23,19 @@ export interface LineSeriesData<T = MeaningfulAny> extends BaseSeriesData<T> {
     /** Data label value of the point. If not specified, the y value is used. */
     label?: string | number;
     marker?: {
+        /** Fill color of the marker for this point */
+        color?: string;
         states?: {
             normal?: {
                 enabled: boolean;
             };
         };
     };
+    /**
+     * Annotation displayed near this data point as a bubble with text label and optional marker.
+     * Useful for highlighting specific values, events, or adding contextual notes.
+     */
+    annotation?: ChartPointAnnotation;
 }
 export interface LineSeriesLineBaseStyle {
     /**

package/dist/esm/core/types/chart/marker.d.ts

@@ -1,12 +1,14 @@
 import type { SymbolType } from '../../constants';
 export interface PointMarkerOptions {
-    /** Enable or disable the point marker */
-    enabled?: boolean;
-    /** The radius of the point marker */
-    radius?: number;
     /** The color of the point marker's border */
     borderColor?: string;
     /** The width of the point marker's border */
     borderWidth?: number;
+    /** Fill color of the marker */
+    color?: string;
+    /** Enable or disable the point marker */
+    enabled?: boolean;
+    /** The radius of the point marker */
+    radius?: number;
     symbol?: `${SymbolType}`;
 }

package/dist/esm/core/types/chart/series.d.ts

@@ -1,6 +1,7 @@
 import type React from 'react';
 import type { DashStyle, LineCap, LineJoin } from '../../constants';
 import type { MeaningfulAny } from '../misc';
+import type { ChartAnnotationSeriesOptions } from './annotation';
 import type { AreaSeries, AreaSeriesData } from './area';
 import type { BarXSeries, BarXSeriesData } from './bar-x';
 import type { BarYSeries, BarYSeriesData } from './bar-y';
@@ -101,6 +102,8 @@ export interface ChartSeriesOptions {
             hover?: BasicHoverState;
             inactive?: BasicInactiveState;
         };
+        /** Default annotation settings for all bar-x data points */
+        annotation?: ChartAnnotationSeriesOptions;
     };
     'bar-y'?: {
         /**
@@ -212,6 +215,8 @@ export interface ChartSeriesOptions {
          * @default 'round' when dashStyle is not 'solid', 'unset' when dashStyle is not 'solid'
          */
         linejoin?: `${LineJoin}`;
+        /** Default annotation settings for all line data points */
+        annotation?: ChartAnnotationSeriesOptions;
     };
     area?: {
         /**
@@ -231,6 +236,8 @@ export interface ChartSeriesOptions {
         };
         /** Options for the point markers of line series */
         marker?: PointMarkerOptions;
+        /** Default annotation settings for all area data points */
+        annotation?: ChartAnnotationSeriesOptions;
     };
     treemap?: {
         /** Options for the series states that provide additional styling information to the series. */

package/dist/esm/core/types/chart/tooltip.d.ts

@@ -47,6 +47,7 @@ export interface TooltipDataChunkLine<T = MeaningfulAny> {
         id: string;
         name: string;
     };
+    closest?: boolean;
 }
 export interface TooltipDataChunkArea<T = MeaningfulAny> {
     data: AreaSeriesData<T>;

package/dist/esm/core/types/index.d.ts

@@ -7,6 +7,7 @@ import type { ChartTitle } from './chart/title';
 import type { ChartTooltip } from './chart/tooltip';
 import type { MeaningfulAny } from './misc';
 export * from './misc';
+export * from './chart/annotation';
 export * from './chart/axis';
 export * from './chart/base';
 export * from './chart/chart';

package/dist/esm/core/types/index.js

@@ -1,4 +1,5 @@
 export * from './misc';
+export * from './chart/annotation';
 export * from './chart/axis';
 export * from './chart/base';
 export * from './chart/chart';

package/dist/esm/core/utils/text.d.ts

@@ -1,5 +1,13 @@
 import type { Selection } from 'd3-selection';
 import type { BaseTextStyle, MeaningfulAny } from '../../types';
+/**
+ * Approximate ratio of descenders relative to the full font em height.
+ * Based on the Chromium hanging baseline algorithm where hanging offset ≈ ascent × 0.2.
+ * This means ascent ≈ 80% of em height, descenders ≈ 20%.
+ *
+ * @see https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/html/canvas/text_metrics.cc;l=32
+ */
+export declare const DESCENDER_RATIO = 0.2;
 export declare function handleOverflowingText(tSpan: SVGTSpanElement | null, maxWidth: number, textWidth?: number): void;
 export declare function setEllipsisForOverflowText<T>(selection: Selection<SVGTextElement, T, null, unknown>, maxWidth: number, textWidth?: number): void;
 export declare function setEllipsisForOverflowTexts<T>(selection: Selection<SVGTextElement, T, MeaningfulAny, unknown>, maxWidth: ((datum: T) => number) | number, currentWidth?: (datum: T) => number): void;

package/dist/esm/core/utils/text.js

@@ -1,6 +1,14 @@
 import { select } from 'd3-selection';
 import { block } from '../../utils/cn';
 const b = block('chart');
+/**
+ * Approximate ratio of descenders relative to the full font em height.
+ * Based on the Chromium hanging baseline algorithm where hanging offset ≈ ascent × 0.2.
+ * This means ascent ≈ 80% of em height, descenders ≈ 20%.
+ *
+ * @see https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/html/canvas/text_metrics.cc;l=32
+ */
+export const DESCENDER_RATIO = 0.2;
 export function handleOverflowingText(tSpan, maxWidth, textWidth) {
     var _a, _b, _c;
     if (!tSpan) {
@@ -210,7 +218,7 @@ export function getTextSizeFn({ style }) {
         return {
             width: textMetric.width,
             height: textMetric.fontBoundingBoxDescent + textMetric.fontBoundingBoxAscent,
-            hangingOffset: textMetric.fontBoundingBoxAscent * 0.2,
+            hangingOffset: textMetric.fontBoundingBoxAscent * DESCENDER_RATIO,
         };
     };
 }

package/dist/esm/hooks/useShapes/annotation/index.d.ts

@@ -0,0 +1,14 @@
+import type { Selection } from 'd3-selection';
+import type { PreparedAnnotation } from '../../../core/series/types';
+type AnnotationAnchor = {
+    annotation: PreparedAnnotation;
+    x: number;
+    y: number;
+};
+export { type AnnotationAnchor };
+export declare function renderAnnotations(args: {
+    anchors: AnnotationAnchor[];
+    container: Selection<SVGGElement, unknown, null, undefined>;
+    plotHeight: number;
+    plotWidth: number;
+}): void;

package/dist/esm/hooks/useShapes/annotation/index.js

@@ -0,0 +1,200 @@
+import { select } from 'd3-selection';
+import { DESCENDER_RATIO } from '../../../core/utils/text';
+import { block } from '../../../utils';
+const b = block('annotation');
+const ARROW_WIDTH = 18;
+const ARROW_HEIGHT = 9;
+// Base arrow path pointing downward (for "top" placement).
+// Elliptical arc matching gravity-ui/uikit Popup arrow geometry.
+// uikit builds the arrow from two 28×30 circles ($arrow-circle-width/height) with
+// a 5px inset box-shadow ($arrow-border), clipped in 9×9 wrappers.
+// The visible curve follows the inner edge of the ring:
+// rx = circle_width/2 - (arrow_border - border_width) = 14 - 4 = 10
+// ry = circle_height/2 - (arrow_border - border_width) = 15 - 4 = 11
+const ARROW_RX = 10;
+const ARROW_RY = 11;
+const ARROW_PATH = (() => {
+    const hw = ARROW_WIDTH / 2;
+    const h = ARROW_HEIGHT;
+    return `M ${-hw},0 A ${ARROW_RX} ${ARROW_RY} 0 0 1 0,${h} A ${ARROW_RX} ${ARROW_RY} 0 0 1 ${hw},0 Z`;
+})();
+function getArrowRotation(placement) {
+    switch (placement) {
+        case 'top':
+            return 0;
+        case 'bottom':
+            return 180;
+        case 'right':
+            return 90;
+        case 'left':
+        default:
+            return -90;
+    }
+}
+function clampX(x, width, plotWidth) {
+    return Math.max(0, Math.min(x, plotWidth - width));
+}
+function clampY(y, height, plotHeight) {
+    return Math.max(0, Math.min(y, plotHeight - height));
+}
+function calculateLayout(args) {
+    const { anchorX, anchorY, popupWidth, popupHeight, offset, plotWidth, plotHeight } = args;
+    // Minimum distance from popup edge to arrow center (arrow half-width + border radius clearance)
+    const arrowEdgePadding = ARROW_WIDTH / 2;
+    // Check if anchor falls within popup's horizontal span (for top/bottom placement)
+    function isAnchorInPopupX(popupX) {
+        return (anchorX >= popupX + arrowEdgePadding &&
+            anchorX <= popupX + popupWidth - arrowEdgePadding);
+    }
+    // Check if anchor falls within popup's vertical span (for right/left placement)
+    function isAnchorInPopupY(popupY) {
+        return (anchorY >= popupY + arrowEdgePadding &&
+            anchorY <= popupY + popupHeight - arrowEdgePadding);
+    }
+    // Try top
+    const topY = anchorY - offset - ARROW_HEIGHT - popupHeight;
+    if (topY >= 0) {
+        const popupX = clampX(anchorX - popupWidth / 2, popupWidth, plotWidth);
+        if (isAnchorInPopupX(popupX)) {
+            return {
+                arrowX: anchorX,
+                arrowY: anchorY,
+                popupX,
+                popupY: topY,
+                placement: 'top',
+                showArrow: true,
+            };
+        }
+    }
+    // Try bottom
+    const bottomY = anchorY + offset + ARROW_HEIGHT;
+    if (bottomY + popupHeight <= plotHeight) {
+        const popupX = clampX(anchorX - popupWidth / 2, popupWidth, plotWidth);
+        if (isAnchorInPopupX(popupX)) {
+            return {
+                arrowX: anchorX,
+                arrowY: anchorY,
+                popupX,
+                popupY: bottomY,
+                placement: 'bottom',
+                showArrow: true,
+            };
+        }
+    }
+    // Try right
+    const rightX = anchorX + offset + ARROW_HEIGHT;
+    if (rightX + popupWidth <= plotWidth) {
+        const popupY = clampY(anchorY - popupHeight / 2, popupHeight, plotHeight);
+        if (isAnchorInPopupY(popupY)) {
+            return {
+                arrowX: anchorX,
+                arrowY: anchorY,
+                popupX: rightX,
+                popupY,
+                placement: 'right',
+                showArrow: true,
+            };
+        }
+    }
+    // Try left
+    const leftX = anchorX - offset - ARROW_HEIGHT - popupWidth;
+    if (leftX >= 0) {
+        const popupY = clampY(anchorY - popupHeight / 2, popupHeight, plotHeight);
+        if (isAnchorInPopupY(popupY)) {
+            return {
+                arrowX: anchorX,
+                arrowY: anchorY,
+                popupX: leftX,
+                popupY,
+                placement: 'left',
+                showArrow: true,
+            };
+        }
+    }
+    // Fallback: no arrow, popup near anchor (prefer above, then below)
+    const popupX = clampX(anchorX - popupWidth / 2, popupWidth, plotWidth);
+    const fallbackTopY = anchorY - offset - popupHeight;
+    const popupY = fallbackTopY >= 0 ? fallbackTopY : Math.min(plotHeight - popupHeight, anchorY + offset);
+    return {
+        arrowX: anchorX,
+        arrowY: anchorY,
+        popupX,
+        popupY,
+        placement: 'top',
+        showArrow: false,
+    };
+}
+function getArrowTranslate(layout, popupWidth, popupHeight) {
+    const { arrowX, arrowY, popupX, popupY, placement } = layout;
+    // Overlap by 0.5px to avoid subpixel gap between arrow and popup rect
+    const overlap = 0.5;
+    switch (placement) {
+        case 'top':
+            return `translate(${arrowX}, ${popupY + popupHeight - overlap})`;
+        case 'bottom':
+            return `translate(${arrowX}, ${popupY + overlap})`;
+        case 'right':
+            return `translate(${popupX + overlap}, ${arrowY})`;
+        case 'left':
+        default:
+            return `translate(${popupX + popupWidth - overlap}, ${arrowY})`;
+    }
+}
+export function renderAnnotations(args) {
+    const { container, anchors, plotWidth, plotHeight } = args;
+    container.selectAll(`.${b()}`).remove();
+    if (!anchors.length) {
+        return;
+    }
+    const groups = container
+        .selectAll(`.${b()}`)
+        .data(anchors)
+        .join('g')
+        .attr('class', b());
+    groups.each(function (d) {
+        const g = select(this);
+        const { annotation, x: anchorX, y: anchorY } = d;
+        const { label, popup } = annotation;
+        const [paddingV, paddingH] = popup.padding;
+        const popupWidth = label.size.width + paddingH * 2;
+        const popupHeight = label.size.height + paddingV * 2;
+        const layout = calculateLayout({
+            anchorX,
+            anchorY,
+            popupWidth,
+            popupHeight,
+            offset: popup.offset,
+            plotWidth,
+            plotHeight,
+        });
+        // Popup background
+        g.append('rect')
+            .attr('class', b('popup'))
+            .attr('x', layout.popupX)
+            .attr('y', layout.popupY)
+            .attr('width', popupWidth)
+            .attr('height', popupHeight)
+            .attr('rx', popup.borderRadius)
+            .attr('ry', popup.borderRadius)
+            .attr('fill', popup.backgroundColor);
+        // Arrow
+        if (layout.showArrow) {
+            const arrowTranslate = getArrowTranslate(layout, popupWidth, popupHeight);
+            const arrowRotation = getArrowRotation(layout.placement);
+            g.append('path')
+                .attr('class', b('arrow'))
+                .attr('d', ARROW_PATH)
+                .attr('fill', popup.backgroundColor)
+                .attr('transform', `${arrowTranslate} rotate(${arrowRotation})`);
+        }
+        // Text
+        g.append('text')
+            .attr('class', b('text'))
+            .text(label.text)
+            .attr('x', layout.popupX + paddingH)
+            .attr('y', layout.popupY + paddingV + label.size.height * (1 - DESCENDER_RATIO))
+            .style('font-size', label.style.fontSize)
+            .style('font-weight', label.style.fontWeight || '')
+            .style('fill', label.style.fontColor || '');
+    });
+}

package/dist/esm/hooks/useShapes/area/index.d.ts

@@ -3,6 +3,8 @@ import type { Dispatch } from 'd3-dispatch';
 import type { PreparedSeriesOptions } from '../../useSeries/types';
 import type { PreparedAreaData } from './types';
 type Args = {
+    boundsHeight: number;
+    boundsWidth: number;
     clipPathId: string;
     htmlLayout: HTMLElement | null;
     preparedData: PreparedAreaData[];

package/dist/esm/hooks/useShapes/area/index.js

@@ -6,15 +6,17 @@ import get from 'lodash/get';
 import { filterOverlappingLabels } from '../../../core/utils';
 import { block } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';
+import { renderAnnotations } from '../annotation';
 import { getMarkerHaloVisibility, getMarkerVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../marker';
 import { setActiveState } from '../utils';
 const b = block('area');
 export const AreaSeriesShapes = (args) => {
-    const { dispatcher, preparedData, seriesOptions, htmlLayout, clipPathId } = args;
+    const { boundsHeight, boundsWidth, dispatcher, preparedData, seriesOptions, htmlLayout, clipPathId, } = args;
     const hoveredDataRef = React.useRef(null);
     const plotRef = React.useRef(null);
     const markersRef = React.useRef(null);
     const hoverMarkersRef = React.useRef(null);
+    const annotationsRef = React.useRef(null);
     const allowOverlapDataLabels = React.useMemo(() => {
         return preparedData.some((d) => d === null || d === void 0 ? void 0 : d.series.dataLabels.allowOverlap);
     }, [preparedData]);
@@ -83,6 +85,15 @@ export const AreaSeriesShapes = (args) => {
             .data(markers)
             .join('g')
             .call(renderMarker);
+        if (annotationsRef.current) {
+            const anchors = preparedData.flatMap((d) => d.annotations);
+            renderAnnotations({
+                anchors,
+                container: select(annotationsRef.current),
+                plotHeight: boundsHeight,
+                plotWidth: boundsWidth,
+            });
+        }
         const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
         const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
         function handleShapeHover(data) {
@@ -189,7 +200,14 @@ export const AreaSeriesShapes = (args) => {
         return () => {
             dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.area', null);
         };
-    }, [allowOverlapDataLabels, dispatcher, preparedData, seriesOptions]);
+    }, [
+        allowOverlapDataLabels,
+        boundsHeight,
+        boundsWidth,
+        dispatcher,
+        preparedData,
+        seriesOptions,
+    ]);
     const htmlLayerData = React.useMemo(() => {
         const items = preparedData.map((d) => d === null || d === void 0 ? void 0 : d.htmlLabels).flat();
         if (allowOverlapDataLabels) {
@@ -201,5 +219,6 @@ export const AreaSeriesShapes = (args) => {
         React.createElement("g", { ref: plotRef, className: b(), clipPath: `url(#${clipPathId})` }),
         React.createElement("g", { ref: markersRef }),
         React.createElement("g", { ref: hoverMarkersRef }),
+        React.createElement("g", { ref: annotationsRef }),
         React.createElement(HtmlLayer, { preparedData: htmlLayerData, htmlLayout: htmlLayout })));
 };

package/dist/esm/hooks/useShapes/area/prepare-data.d.ts

@@ -1,10 +1,11 @@
 import type { PreparedSplit } from '../../../core/layout/split-types';
 import type { ChartScale } from '../../../core/scales/types';
 import type { PreparedXAxis, PreparedYAxis } from '../../useAxis/types';
-import type { PreparedAreaSeries } from '../../useSeries/types';
+import type { PreparedAreaSeries, PreparedSeriesOptions } from '../../useSeries/types';
 import type { PreparedAreaData } from './types';
 export declare const prepareAreaData: (args: {
     series: PreparedAreaSeries[];
+    seriesOptions?: PreparedSeriesOptions;
     xAxis: PreparedXAxis;
     xScale: ChartScale;
     yAxis: PreparedYAxis[];