@gravity-ui/charts 1.43.1 → 1.45.0

package/dist/esm/core/utils/get-closest-data.js

@@ -288,6 +288,25 @@ export function getClosestPoints(args) {
                 }
                 break;
             }
+            case 'x-range': {
+                const data = list;
+                const pointsInXRange = data.filter((d) => pointerX >= d.x &&
+                    pointerX <= d.x + d.width &&
+                    pointerY >= d.y &&
+                    pointerY <= d.y + d.height);
+                if (pointsInXRange.length === 0) {
+                    break;
+                }
+                const closestByX = pointsInXRange.length === 1
+                    ? pointsInXRange[0]
+                    : sort(pointsInXRange, (d) => Math.abs(d.x + d.width / 2 - pointerX))[0];
+                result.push(...pointsInXRange.map((d) => ({
+                    data: d.data,
+                    series: d.series,
+                    closest: d === closestByX,
+                })));
+                break;
+            }
         }
     });
     if (closestPointsByXValue.length) {

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/core/validation/index.js

@@ -265,6 +265,18 @@ function validateStacking({ series }) {
         });
     }
 }
+function validateStackingAreaNullMode({ series }) {
+    const availableStackingValues = ['normal', 'percent'];
+    const invalid = series.find((s) => s.type === 'area' &&
+        availableStackingValues.includes(s.stacking) &&
+        s.nullMode === 'connect');
+    if (invalid) {
+        throw new ChartError({
+            code: CHART_ERROR_CODE.INVALID_DATA,
+            message: i18n('error', 'label_stacking-area-connect-null-mode'),
+        });
+    }
+}
 function validateTreemapSeries({ series }) {
     const parentIds = {};
     series.data.forEach((d) => {
@@ -379,6 +391,7 @@ export function validateData(data) {
     }
     validateAxes({ xAxis: data.xAxis, yAxis: data.yAxis });
     validateTooltip({ tooltip: data.tooltip });
+    validateStackingAreaNullMode({ series: data.series.data });
     if (data.series.data.some((s) => isEmpty(s.data))) {
         throw new ChartError({
             code: CHART_ERROR_CODE.INVALID_DATA,

package/dist/esm/core/zoom/zoom.js

@@ -69,13 +69,30 @@ export function getZoomedSeriesData(args) {
             prevPointInRange = currentPointInRange;
             if (zoomState.x) {
                 const [xMin, xMax] = zoomState.x;
-                const x = 'x' in point ? ((_a = point.x) !== null && _a !== void 0 ? _a : undefined) : undefined;
-                inXRange = isValueInRange({
-                    axis: xAxis,
-                    value: x,
-                    min: xMin,
-                    max: xMax,
-                });
+                if ('x0' in point && 'x1' in point) {
+                    const isStartInRange = isValueInRange({
+                        axis: xAxis,
+                        value: point.x0,
+                        min: xMin,
+                        max: xMax,
+                    });
+                    const isEndInRange = isValueInRange({
+                        axis: xAxis,
+                        value: point.x1,
+                        min: xMin,
+                        max: xMax,
+                    });
+                    inXRange = isStartInRange || isEndInRange;
+                }
+                else {
+                    const x = 'x' in point ? ((_a = point.x) !== null && _a !== void 0 ? _a : undefined) : undefined;
+                    inXRange = isValueInRange({
+                        axis: xAxis,
+                        value: x,
+                        min: xMin,
+                        max: xMax,
+                    });
+                }
             }
             if (zoomState.y) {
                 const yAxisIndex = 'yAxis' in seriesItem && typeof seriesItem.yAxis === 'number'

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[];

package/dist/esm/hooks/useShapes/area/prepare-data.js

@@ -1,6 +1,7 @@
-import { group, min } from 'd3-array';
+import { group, min, sort } from 'd3-array';
 import isNil from 'lodash/isNil';
 import round from 'lodash/round';
+import { prepareAnnotation } from '../../../core/series/prepare-annotation';
 import { getDataCategoryValue, getLabelsSize, getTextSizeFn } from '../../../core/utils';
 import { getFormattedValue } from '../../../core/utils/format';
 import { getXValue, getYValue } from '../utils';
@@ -27,7 +28,7 @@ function getXValues(series, xAxis, xScale) {
             return acc;
         }, []);
     }
-    return Array.from(xValues);
+    return sort(Array.from(xValues), (d) => d[1]);
 }
 async function prepareDataLabels({ series, points, xMax, yAxisTop, isOutsideBounds, }) {
     var _a;
@@ -76,8 +77,8 @@ async function prepareDataLabels({ series, points, xMax, yAxisTop, isOutsideBoun
     return { svgLabels, htmlLabels };
 }
 export const prepareAreaData = async (args) => {
-    var _a, _b, _c, _d;
-    const { series, xAxis, xScale, yAxis, yScale, split, isOutsideBounds, isRangeSlider } = args;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    const { series, seriesOptions, xAxis, xScale, yAxis, yScale, split, isOutsideBounds, isRangeSlider, } = args;
     const [_xMin, xRangeMax] = xScale.range();
     const xMax = xRangeMax;
     const result = [];
@@ -165,15 +166,25 @@ export const prepareAreaData = async (args) => {
                         : d.x);
                     return m.set(key, d);
                 }, new Map());
-                const points = xValues.reduce((pointsAcc, [x, xValue], index) => {
-                    var _a, _b, _c, _d, _e, _f, _g, _h;
-                    const d = (_a = seriesData.get(x)) !== null && _a !== void 0 ? _a : {
+                const annotationOpts = (_d = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions.area) === null || _d === void 0 ? void 0 : _d.annotation;
+                const points = [];
+                for (let xIdx = 0; xIdx < xValues.length; xIdx++) {
+                    const [x, xValue] = xValues[xIdx];
+                    const rawData = seriesData.get(x);
+                    const d = rawData !== null && rawData !== void 0 ? rawData : {
                         x,
                         y: 0,
                     };
-                    let yDataValue = (_b = d.y) !== null && _b !== void 0 ? _b : null;
-                    if (s.nullMode === 'connect' && yDataValue === null) {
-                        return pointsAcc;
+                    let yDataValue = (_e = d.y) !== null && _e !== void 0 ? _e : null;
+                    const pointAnnotation = d.annotation && !isRangeSlider
+                        ? await prepareAnnotation({
+                            annotation: d.annotation,
+                            optionsLabel: annotationOpts === null || annotationOpts === void 0 ? void 0 : annotationOpts.label,
+                            optionsPopup: annotationOpts === null || annotationOpts === void 0 ? void 0 : annotationOpts.popup,
+                        })
+                        : undefined;
+                    if (s.nullMode === 'connect' && (yDataValue === null || !rawData)) {
+                        continue;
                     }
                     if (yDataValue && isPercentStacking) {
                         yDataValue = Number(yDataValue) * ratio[x];
@@ -187,21 +198,23 @@ export const prepareAreaData = async (args) => {
                     });
                     if (typeof yDataValue === 'number' && yValue !== null) {
                         yValue = round(yValue, 2);
-                        const prevPoint = seriesData.get((_c = xValues[index - 1]) === null || _c === void 0 ? void 0 : _c[0]);
-                        const nextPoint = seriesData.get((_d = xValues[index + 1]) === null || _d === void 0 ? void 0 : _d[0]);
+                        const prevPoint = seriesData.get((_f = xValues[xIdx - 1]) === null || _f === void 0 ? void 0 : _f[0]);
+                        const nextPoint = seriesData.get((_g = xValues[xIdx + 1]) === null || _g === void 0 ? void 0 : _g[0]);
                         const currentPointStackHeight = Math.abs(yMin - yValue);
                         if (yDataValue >= 0) {
                             const positiveStackHeights = positiveStackValues.get(x);
-                            let prevSectionStackHeight = (_e = positiveStackHeights === null || positiveStackHeights === void 0 ? void 0 : positiveStackHeights.prev) !== null && _e !== void 0 ? _e : 0;
-                            let nextSectionStackHeight = (_f = positiveStackHeights === null || positiveStackHeights === void 0 ? void 0 : positiveStackHeights.next) !== null && _f !== void 0 ? _f : 0;
+                            let prevSectionStackHeight = (_h = positiveStackHeights === null || positiveStackHeights === void 0 ? void 0 : positiveStackHeights.prev) !== null && _h !== void 0 ? _h : 0;
+                            let nextSectionStackHeight = (_j = positiveStackHeights === null || positiveStackHeights === void 0 ? void 0 : positiveStackHeights.next) !== null && _j !== void 0 ? _j : 0;
                             const point = {
                                 y0: yAxisTop + yMin - prevSectionStackHeight,
                                 x: xValue,
                                 y: yAxisTop + yValue - prevSectionStackHeight,
+                                color: (_l = (_k = d.marker) === null || _k === void 0 ? void 0 : _k.color) !== null && _l !== void 0 ? _l : d.color,
                                 data: d,
                                 series: s,
+                                annotation: pointAnnotation,
                             };
-                            pointsAcc.push(point);
+                            points.push(point);
                             if (prevSectionStackHeight !== nextSectionStackHeight) {
                                 const point2 = {
                                     y0: yAxisTop + yMin - nextSectionStackHeight,
@@ -210,7 +223,7 @@ export const prepareAreaData = async (args) => {
                                     data: d,
                                     series: s,
                                 };
-                                pointsAcc.push(point2);
+                                points.push(point2);
                                 if (isPercentStacking) {
                                     const newYValue = yAxisTop +
                                         yValue -
@@ -219,11 +232,11 @@ export const prepareAreaData = async (args) => {
                                     point2.y = newYValue;
                                 }
                             }
-                            if ((prevPoint === null || prevPoint === void 0 ? void 0 : prevPoint.y) !== null) {
+                            if ((prevPoint === null || prevPoint === void 0 ? void 0 : prevPoint.y) !== null || s.nullMode === 'zero') {
                                 prevSectionStackHeight =
                                     prevSectionStackHeight + currentPointStackHeight;
                             }
-                            if ((nextPoint === null || nextPoint === void 0 ? void 0 : nextPoint.y) !== null) {
+                            if ((nextPoint === null || nextPoint === void 0 ? void 0 : nextPoint.y) !== null || s.nullMode === 'zero') {
                                 nextSectionStackHeight =
                                     nextSectionStackHeight + currentPointStackHeight;
                             }
@@ -234,9 +247,9 @@ export const prepareAreaData = async (args) => {
                         }
                         else {
                             const negativeStackHeights = negativeStackValues.get(x);
-                            let prevSectionStackHeight = (_g = negativeStackHeights === null || negativeStackHeights === void 0 ? void 0 : negativeStackHeights.prev) !== null && _g !== void 0 ? _g : 0;
-                            let nextSectionStackHeight = (_h = negativeStackHeights === null || negativeStackHeights === void 0 ? void 0 : negativeStackHeights.next) !== null && _h !== void 0 ? _h : 0;
-                            pointsAcc.push({
+                            let prevSectionStackHeight = (_m = negativeStackHeights === null || negativeStackHeights === void 0 ? void 0 : negativeStackHeights.prev) !== null && _m !== void 0 ? _m : 0;
+                            let nextSectionStackHeight = (_o = negativeStackHeights === null || negativeStackHeights === void 0 ? void 0 : negativeStackHeights.next) !== null && _o !== void 0 ? _o : 0;
+                            points.push({
                                 y0: yAxisTop + yMin + prevSectionStackHeight,
                                 x: xValue,
                                 y: yAxisTop + yValue + prevSectionStackHeight,
@@ -244,7 +257,7 @@ export const prepareAreaData = async (args) => {
                                 series: s,
                             });
                             if (prevSectionStackHeight !== nextSectionStackHeight) {
-                                pointsAcc.push({
+                                points.push({
                                     y0: yAxisTop + yMin + nextSectionStackHeight,
                                     x: xValue,
                                     y: yAxisTop + yValue + nextSectionStackHeight,
@@ -267,7 +280,7 @@ export const prepareAreaData = async (args) => {
                         }
                     }
                     else {
-                        pointsAcc.push({
+                        points.push({
                             y0: yAxisTop + yMin,
                             x: xValue,
                             y: null,
@@ -275,8 +288,7 @@ export const prepareAreaData = async (args) => {
                             series: s,
                         });
                     }
-                    return pointsAcc;
-                }, []);
+                }
                 let markers = [];
                 const hasPerPointNormalMarkers = s.data.some((d) => { var _a, _b, _c; return (_c = (_b = (_a = d.marker) === null || _a === void 0 ? void 0 : _a.states) === null || _b === void 0 ? void 0 : _b.normal) === null || _c === void 0 ? void 0 : _c.enabled; });
                 if (s.marker.states.normal.enabled || hasPerPointNormalMarkers) {
@@ -297,7 +309,14 @@ export const prepareAreaData = async (args) => {
                         return markersAcc;
                     }, []);
                 }
+                const annotations = points.reduce((result, p) => {
+                    if (p.annotation && p.y !== null) {
+                        result.push({ annotation: p.annotation, x: p.x, y: p.y });
+                    }
+                    return result;
+                }, []);
                 seriesStackData.push({
+                    annotations,
                     points,
                     markers,
                     svgLabels: [],
@@ -314,7 +333,7 @@ export const prepareAreaData = async (args) => {
             for (let itemIndex = 0; itemIndex < seriesStackData.length; itemIndex++) {
                 const item = seriesStackData[itemIndex];
                 const currentYAxis = yAxis[item.series.yAxis];
-                const itemYAxisTop = ((_d = split.plots[currentYAxis.plotIndex]) === null || _d === void 0 ? void 0 : _d.top) || 0;
+                const itemYAxisTop = ((_p = split.plots[currentYAxis.plotIndex]) === null || _p === void 0 ? void 0 : _p.top) || 0;
                 if (item.series.dataLabels.enabled && !isRangeSlider) {
                     const labelsData = await prepareDataLabels({
                         series: item.series,

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

@@ -1,11 +1,14 @@
+import type { PreparedAnnotation } from '../../../core/series/types';
 import type { AreaSeriesData, HtmlItem, LabelData } from '../../../types';
 import type { PreparedAreaSeries } from '../../useSeries/types';
+import type { AnnotationAnchor } from '../annotation';
 export type PointData = {
     y0: number;
     x: number;
     y: number | null;
     data: AreaSeriesData;
     series: PreparedAreaSeries;
+    annotation?: PreparedAnnotation;
     color?: string;
 };
 export type MarkerPointData = PointData & {
@@ -18,6 +21,7 @@ export type MarkerData = {
     clipped: boolean;
 };
 export type PreparedAreaData = {
+    annotations: AnnotationAnchor[];
     id: string;
     points: PointData[];
     markers: MarkerData[];

package/dist/esm/hooks/useShapes/bar-x/index.d.ts

@@ -5,6 +5,8 @@ import type { PreparedBarXData } from './types';
 export { prepareBarXData } from './prepare-data';
 export * from './types';
 type Args = {
+    boundsHeight: number;
+    boundsWidth: number;
     clipPathId: string;
     htmlLayout: HTMLElement | null;
     preparedData: PreparedBarXData[];