@gravity-ui/charts 1.49.1 → 1.51.0

package/dist/cjs/components/AxisY/types.d.ts

@@ -1,5 +1,6 @@
 import type { DashStyle } from 'src/core/constants';
 import type { AxisPlotShape } from '../../core/types/chart/axis';
+import type { CSSProperties } from '../../core/types/css';
 import type { BaseTextStyle, HtmlItem, PlotLayerPlacement, PointPosition } from '../../types';
 import type { TextRowData } from '../types';
 export type AxisSvgLabelData = {
@@ -42,7 +43,7 @@ export type SvgAxisTitleData = {
 export type HtmlAxisTitleData = {
     html: true;
     content: string;
-    style: BaseTextStyle & React.CSSProperties;
+    style: BaseTextStyle & CSSProperties;
     size: {
         width: number;
         height: number;

package/dist/cjs/components/ChartInner/utils/zoom.js

@@ -13,7 +13,7 @@ function mapSeriesTypeToZoomType(seriesType) {
             return [ZOOM_TYPE.X];
         }
         case SERIES_TYPE.BarY: {
-            return [ZOOM_TYPE.Y];
+            return [ZOOM_TYPE.Y, ZOOM_TYPE.XY];
         }
         case SERIES_TYPE.Line: {
             return [ZOOM_TYPE.X, ZOOM_TYPE.XY, ZOOM_TYPE.Y];

package/dist/cjs/core/scales/y-scale.js

@@ -127,6 +127,9 @@ function getDomainMinAlignedToStartTick(args) {
             else {
                 step = tickStep(dMin, dMax, 1);
             }
+            if (step === 0) {
+                return dMin;
+            }
             dNewMin = tickValues[0].value - step;
         }
     }
@@ -161,6 +164,9 @@ function getDomainMaxAlignedToEndTick(args) {
             else {
                 step = tickStep(dMin, dMax, 1);
             }
+            if (step === 0) {
+                return dMax;
+            }
             dNewMax = Math.floor(dMax / step + 1) * step;
         }
     }

package/dist/cjs/core/series/prepare-area.js

@@ -63,6 +63,7 @@ export function prepareArea(args) {
             data: prepareSeriesData(series),
             stacking: series.stacking,
             stackId: getSeriesStackId(series),
+            valueAxis: 'y',
             dataLabels: {
                 enabled: ((_e = series.dataLabels) === null || _e === void 0 ? void 0 : _e.enabled) || false,
                 style: Object.assign({}, DEFAULT_DATALABELS_STYLE, (_f = series.dataLabels) === null || _f === void 0 ? void 0 : _f.style),

package/dist/cjs/core/series/prepare-bar-x.js

@@ -37,6 +37,7 @@ export function prepareBarXSeries(args) {
             data: prepareSeriesData(series),
             stacking: series.stacking,
             stackId: getSeriesStackId(series),
+            valueAxis: 'y',
             dataLabels: {
                 enabled: ((_e = series.dataLabels) === null || _e === void 0 ? void 0 : _e.enabled) || false,
                 inside: dataLabelsInside,

package/dist/cjs/core/series/prepare-bar-y.d.ts

@@ -12,6 +12,7 @@ export declare function prepareBarYSeries(args: PrepareBarYSeriesArgs): Promise<
     data: BarYSeriesData[];
     stackId: string;
     stacking: BarYSeries["stacking"];
+    valueAxis: "x";
     dataLabels: {
         padding: number;
         enabled: boolean;

package/dist/cjs/core/series/prepare-bar-y.js

@@ -64,6 +64,7 @@ export function prepareBarYSeries(args) {
             data: prepareSeriesData(series),
             stacking: series.stacking,
             stackId: getSeriesStackId(series),
+            valueAxis: 'x',
             dataLabels: await prepareDataLabels(series),
             cursor: get(series, 'cursor', null),
             borderRadius: (_g = (_e = series.borderRadius) !== null && _e !== void 0 ? _e : (_f = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions['bar-y']) === null || _f === void 0 ? void 0 : _f.borderRadius) !== null && _g !== void 0 ? _g : 0,

package/dist/cjs/core/series/prepare-funnel.js

@@ -4,17 +4,20 @@ import { DEFAULT_DATALABELS_STYLE } from '../constants';
 import { getUniqId } from '../utils';
 import { prepareLegendSymbol } from './utils';
 export function prepareFunnelSeries(args) {
-    var _a, _b;
+    var _a, _b, _c;
     const { series, legend, colors } = args;
     const dataNames = series.data.map((d) => d.name);
     const colorScale = scaleOrdinal(dataNames, colors);
-    const isConnectorsEnabled = (_b = (_a = series.connectors) === null || _a === void 0 ? void 0 : _a.enabled) !== null && _b !== void 0 ? _b : true;
+    const shape = (_a = series.shape) !== null && _a !== void 0 ? _a : 'rectangle';
+    const isTrapezoid = shape === 'trapezoid';
+    const isConnectorsEnabled = (_c = (_b = series.connectors) === null || _b === void 0 ? void 0 : _b.enabled) !== null && _c !== void 0 ? _c : !isTrapezoid;
     const preparedSeries = series.data.map((dataItem) => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
         const id = getUniqId();
         const color = dataItem.color || colorScale(dataItem.name);
         const result = {
             type: 'funnel',
+            shape,
             data: dataItem,
             dataLabels: {
                 enabled: get(series, 'dataLabels.enabled', true),

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

@@ -134,6 +134,7 @@ export type PreparedBarXSeries = {
     data: BarXSeriesData[];
     stackId: string;
     stacking: BarXSeries['stacking'];
+    valueAxis: 'y';
     dataLabels: {
         enabled: boolean;
         inside: boolean;
@@ -151,6 +152,7 @@ export type PreparedBarYSeries = {
     data: BarYSeriesData[];
     stackId: string;
     stacking: BarYSeries['stacking'];
+    valueAxis: 'x';
     dataLabels: {
         padding: number;
         enabled: boolean;
@@ -252,6 +254,7 @@ export type PreparedAreaSeries = {
     data: AreaSeriesData[];
     stacking: AreaSeries['stacking'];
     stackId: string;
+    valueAxis: 'y';
     lineWidth: number;
     opacity: number;
     nullMode: AreaSeries['nullMode'];
@@ -359,6 +362,7 @@ export type PreparedRadarSeries = {
 export type PreparedFunnelSeries = {
     type: FunnelSeries['type'];
     data: FunnelSeriesData;
+    shape: Required<FunnelSeries>['shape'];
     dataLabels: {
         enabled: boolean;
         style: BaseTextStyle;

package/dist/cjs/core/shapes/bar-y/prepare-data.js

@@ -9,7 +9,6 @@ export async function prepareBarYData(args) {
     const stackGap = seriesOptions['bar-y'].stackGap;
     const xLinearScale = xScale;
     const yLinearScale = yScale;
-    const [baseRangeValue] = xLinearScale.range();
     if (!yLinearScale) {
         return {
             shapes: [],
@@ -92,19 +91,22 @@ export async function prepareBarYData(args) {
                 const borderWidth = barSize > s.borderWidth * 2 ? s.borderWidth : 0;
                 const isFirstInStack = xValueIndex === 0;
                 const isLastStackItem = xValueIndex === sortedData.length - 1;
+                const extendsRight = xLinearScale(xValue) > baseValue;
                 // Calculate position with border compensation
                 // Border extends halfBorder outward from the shape, so we need to adjust position
-                let itemX = xValue > baseRangeValue ? positiveStack : negativeStack - width;
+                let itemX = extendsRight ? positiveStack : negativeStack - width;
                 itemX += itemStackGap;
                 const halfBorder = borderWidth / 2;
-                if (isFirstInStack && xValue > 0) {
-                    // Positive bar: border extends left, so shift position left by halfBorder
-                    // to keep the visual left edge at the zero line
+                if (isFirstInStack && extendsRight) {
+                    // Bar extends right from base, border extends outward to the
+                    // left → shift left by halfBorder to keep the visual left
+                    // edge at the zero line.
                     itemX -= halfBorder;
                 }
-                else if (isFirstInStack && xValue < 0) {
-                    // Negative bar: border extends right, so shift position right by halfBorder
-                    // to keep the visual right edge at the zero line
+                else if (isFirstInStack && !extendsRight && xValue !== 0) {
+                    // Bar extends left from base, border extends outward to the
+                    // right → shift right by halfBorder to keep the visual
+                    // right edge at the zero line.
                     itemX += halfBorder;
                 }
                 const item = {
@@ -121,7 +123,7 @@ export async function prepareBarYData(args) {
                     isLastStackItem,
                 };
                 stackItems.push(item);
-                if (xValue > baseRangeValue) {
+                if (extendsRight) {
                     positiveStack += width;
                 }
                 else {

package/dist/cjs/core/shapes/funnel/prepare-data.js

@@ -1,5 +1,5 @@
 import { path } from 'd3-path';
-import { calculateNumericProperty, getFormattedValue, getTextSizeFn } from '../../utils';
+import { calculateNumericProperty, getFormattedValue, getLabelsSize, getTextSizeFn, } from '../../utils';
 function getLineConnectorPaths(args) {
     const { points } = args;
     const leftPath = path();
@@ -19,10 +19,11 @@ function getAreaConnectorPath(args) {
     return p;
 }
 export async function prepareFunnelData(args) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const { series, boundsWidth, boundsHeight } = args;
     const items = [];
     const svgLabels = [];
+    const htmlLabels = [];
     const connectors = [];
     const maxValue = Math.max(...series.map((s) => s.data.value));
     const itemBandSpace = boundsHeight / series.length;
@@ -42,48 +43,80 @@ export async function prepareFunnelData(args) {
         if (s.dataLabels.enabled) {
             const d = s.data;
             const labelContent = (_c = d.label) !== null && _c !== void 0 ? _c : getFormattedValue({ value: d.value, format: s.dataLabels.format });
-            const labelSize = await getTextSize(labelContent);
+            const { width, height, hangingOffset } = s.dataLabels.html
+                ? await getLabelsSize({
+                    labels: [labelContent],
+                    style: s.dataLabels.style,
+                    html: true,
+                }).then((size) => ({
+                    width: size.maxWidth,
+                    height: size.maxHeight,
+                    hangingOffset: 0,
+                }))
+                : await getTextSize(labelContent);
             let x;
             switch (s.dataLabels.align) {
                 case 'left': {
                     x = 0;
-                    segmentLeftOffset = Math.max(segmentLeftOffset, labelSize.width);
+                    segmentLeftOffset = Math.max(segmentLeftOffset, width);
                     break;
                 }
                 case 'right': {
-                    x = boundsWidth - labelSize.width;
-                    segmentRightOffset = Math.max(segmentRightOffset, labelSize.width);
+                    x = boundsWidth - width;
+                    segmentRightOffset = Math.max(segmentRightOffset, width);
                     break;
                 }
                 case 'center': {
-                    x = boundsWidth / 2 - labelSize.width / 2;
+                    x = boundsWidth / 2 - width / 2;
                     break;
                 }
             }
-            svgLabels.push({
-                x,
-                y: getSegmentY(index) +
-                    itemHeight / 2 -
-                    labelSize.height / 2 +
-                    labelSize.hangingOffset,
-                text: labelContent,
-                style: s.dataLabels.style,
-                size: labelSize,
-                textAnchor: 'start',
-                series: s,
-            });
+            const y = getSegmentY(index) + itemHeight / 2 - height / 2 + hangingOffset;
+            if (s.dataLabels.html) {
+                htmlLabels.push({
+                    x,
+                    y,
+                    content: labelContent,
+                    size: { width, height },
+                    style: s.dataLabels.style,
+                });
+            }
+            else {
+                svgLabels.push({
+                    x,
+                    y,
+                    text: labelContent,
+                    style: s.dataLabels.style,
+                    size: { width, height, hangingOffset },
+                    textAnchor: 'start',
+                    series: s,
+                });
+            }
         }
     }
     const segmentMaxWidth = boundsWidth - segmentLeftOffset - segmentRightOffset;
+    const isTrapezoid = ((_d = series[0]) === null || _d === void 0 ? void 0 : _d.shape) === 'trapezoid';
+    const getItemWidth = (index) => (segmentMaxWidth * series[index].data.value) / maxValue;
     for (let index = 0; index < series.length; index++) {
         const s = series[index];
         const d = s.data;
-        const itemWidth = (segmentMaxWidth * d.value) / maxValue;
+        const itemWidth = getItemWidth(index);
+        const centerX = segmentLeftOffset + segmentMaxWidth / 2;
+        const segmentY = getSegmentY(index);
+        const isLastSegment = index === series.length - 1;
+        const bottomWidth = isTrapezoid && !isLastSegment ? getItemWidth(index + 1) : itemWidth;
+        const points = [
+            [centerX - itemWidth / 2, segmentY],
+            [centerX + itemWidth / 2, segmentY],
+            [centerX + bottomWidth / 2, segmentY + itemHeight],
+            [centerX - bottomWidth / 2, segmentY + itemHeight],
+        ];
         const funnelSegment = {
-            x: segmentLeftOffset + segmentMaxWidth / 2 - itemWidth / 2,
-            y: getSegmentY(index),
+            x: centerX - itemWidth / 2,
+            y: segmentY,
             width: itemWidth,
             height: itemHeight,
+            points,
             color: s.color,
             series: s,
             data: d,
@@ -94,7 +127,7 @@ export async function prepareFunnelData(args) {
         items.push(funnelSegment);
         const prevSeries = series[index - 1];
         const prevItem = items[index - 1];
-        if (prevSeries && prevItem && ((_d = prevSeries.connectors) === null || _d === void 0 ? void 0 : _d.enabled)) {
+        if (prevSeries && prevItem && ((_e = prevSeries.connectors) === null || _e === void 0 ? void 0 : _e.enabled)) {
             const connectorPoints = [
                 [prevItem.x, prevItem.y + prevItem.height],
                 [prevItem.x + prevItem.width, prevItem.y + prevItem.height],
@@ -117,6 +150,7 @@ export async function prepareFunnelData(args) {
         type: 'funnel',
         items,
         svgLabels,
+        htmlLabels,
         connectors,
     };
     return data;

package/dist/cjs/core/shapes/funnel/renderer.js

@@ -11,13 +11,10 @@ export function renderFunnel(elements, preparedData, seriesOptions, dispatcher)
     svgElement.selectAll('*').remove();
     // funnel levels
     const cellsSelection = svgElement
-        .selectAll('rect')
+        .selectAll('polygon')
         .data(preparedData.items)
-        .join('rect')
-        .attr('x', (d) => d.x)
-        .attr('y', (d) => d.y)
-        .attr('height', (d) => d.height)
-        .attr('width', (d) => d.width)
+        .join('polygon')
+        .attr('points', (d) => d.points.map((p) => p.join(',')).join(' '))
         .attr('fill', (d) => d.color)
         .attr('stroke', (d) => d.borderColor)
         .attr('stroke-width', (d) => d.borderWidth);

package/dist/cjs/core/shapes/funnel/types.d.ts

@@ -1,5 +1,5 @@
 import type { Path } from 'd3-path';
-import type { FunnelSeriesData, LabelData } from '../../../types';
+import type { FunnelSeriesData, HtmlItem, LabelData } from '../../../types';
 import type { DashStyle } from '../../constants';
 import type { PreparedFunnelSeries } from '../../series/types';
 export type FunnelItemData = {
@@ -7,6 +7,7 @@ export type FunnelItemData = {
     y: number;
     width: number;
     height: number;
+    points: [number, number][];
     color: string;
     series: PreparedFunnelSeries;
     data: FunnelSeriesData;
@@ -29,4 +30,5 @@ export type PreparedFunnelData = {
     items: FunnelItemData[];
     connectors: FunnelConnectorData[];
     svgLabels: LabelData[];
+    htmlLabels: HtmlItem[];
 };

package/dist/cjs/core/shapes/utils.d.ts

@@ -2,6 +2,7 @@ import type { BaseType } from 'd3-selection';
 import type { PreparedXAxis, PreparedYAxis } from '../axes/types';
 import type { ChartScale } from '../scales/types';
 import type { BasicInactiveState } from '../types';
+import type { ZoomState } from '../zoom/types';
 export declare function getXValue(args: {
     point: {
         x?: number | string | null;
@@ -74,3 +75,8 @@ export declare function getClipPathIdByBounds(args: {
     clipPathId: string;
     bounds?: 'horizontal';
 }): string;
+export declare function getSeriesClipPathId(args: {
+    clipPathId: string;
+    yAxis: PreparedYAxis[];
+    zoomState?: Partial<ZoomState>;
+}): string;

package/dist/cjs/core/shapes/utils.js

@@ -184,3 +184,12 @@ export function getClipPathIdByBounds(args) {
     const { bounds, clipPathId } = args;
     return bounds ? `${clipPathId}-${bounds}` : clipPathId;
 }
+export function getSeriesClipPathId(args) {
+    const { clipPathId, yAxis, zoomState } = args;
+    const hasMinOrMax = yAxis.some((axis) => typeof (axis === null || axis === void 0 ? void 0 : axis.min) === 'number' || typeof (axis === null || axis === void 0 ? void 0 : axis.max) === 'number');
+    const hasZoom = zoomState && Object.keys(zoomState).length > 0;
+    if (!hasZoom && !hasMinOrMax) {
+        return `${clipPathId}-horizontal`;
+    }
+    return clipPathId;
+}

package/dist/cjs/core/types/chart/funnel.d.ts

@@ -21,6 +21,23 @@ export interface FunnelSeries<T = MeaningfulAny> extends Omit<BaseSeries, 'dataL
     name?: string;
     /** The color of the funnel series. */
     color?: string;
+    /**
+     * The visual shape of funnel segments.
+     *
+     * - `'rectangle'` (**recommended**): each segment is an independent rectangle whose
+     *   width is directly proportional to its value. The human eye reads width as a linear
+     *   scale, making comparisons between segments accurate and effortless.
+     *
+     * - `'trapezoid'`: adjacent segments are drawn as connected trapezoids, giving the chart
+     *   a classic "funnel" silhouette. However, this shape distorts perception: the slanted
+     *   sides cause viewers to judge area (which grows as the square of width) rather than
+     *   width alone, exaggerating differences between large and small values. Use only for
+     *   decorative purposes or when visual familiarity with the funnel metaphor is more
+     *   important than analytical precision.
+     *
+     * @default 'rectangle'
+     */
+    shape?: 'rectangle' | 'trapezoid';
     /** Lines or areas connecting the funnel segments. */
     connectors?: {
         enabled?: boolean;
@@ -39,7 +56,7 @@ export interface FunnelSeries<T = MeaningfulAny> extends Omit<BaseSeries, 'dataL
         /** Opacity for the connector area. */
         areaOpacity?: number;
     };
-    dataLabels?: Omit<BaseDataLabels, 'html' | 'allowOverlap'> & {
+    dataLabels?: Omit<BaseDataLabels, 'allowOverlap'> & {
         /** Horizontal alignment of the data labels. */
         align?: 'left' | 'center' | 'right';
     };

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

@@ -1,6 +1,6 @@
-import type React from 'react';
 import type { DashStyle, LineCap, LineJoin } from '../../constants';
 import type { MeaningfulAny } from '../misc';
+import type { SVGTextAttributes } from '../renderer';
 import type { ChartAnnotationSeriesOptions } from './annotation';
 import type { AreaSeries, AreaSeriesData } from './area';
 import type { BarXSeries, BarXSeriesData } from './bar-x';
@@ -55,7 +55,7 @@ export interface ChartSeriesOptions {
         /** Enable or disable the data labels */
         enabled?: boolean;
         /** Callback function to render the data label */
-        renderer?: (args: DataLabelRendererData) => React.SVGTextElementAttributes<SVGTextElement>;
+        renderer?: (args: DataLabelRendererData) => SVGTextAttributes;
     };
     'bar-x'?: {
         /**

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

@@ -1,6 +1,7 @@
 import type { TOOLTIP_TOTALS_BUILT_IN_AGGREGATION } from '../../constants';
 import type { DateTimeLabelFormats } from '../../utils/time';
 import type { MeaningfulAny } from '../misc';
+import type { RendererElement } from '../renderer';
 import type { AreaSeries, AreaSeriesData } from './area';
 import type { AxisPlotBand, AxisPlotLine, AxisPlotShape, ChartXAxis, ChartYAxis } from './axis';
 import type { BarXSeries, BarXSeriesData } from './bar-x';
@@ -132,7 +133,7 @@ export type ChartTooltipSortComparator<T = MeaningfulAny> = (a: TooltipDataChunk
 export interface ChartTooltip<T = MeaningfulAny> {
     enabled?: boolean;
     /** Specifies the renderer for the tooltip. If returned null default tooltip renderer will be used. */
-    renderer?: (args: ChartTooltipRendererArgs<T>) => React.ReactElement | null;
+    renderer?: (args: ChartTooltipRendererArgs<T>) => RendererElement | null;
     /**
      * Defines the way a single data/series is displayed (corresponding to a separate selected point/ruler/shape on the chart).
      * It is useful in cases where you need to display additional information, but keep the general format of the tooltip.
@@ -157,7 +158,7 @@ export interface ChartTooltip<T = MeaningfulAny> {
      *   `<tr class="${className}"><td>${name}</td><td>${value}</td></tr>`
      * ```
      */
-    rowRenderer?: ((args: ChartTooltipRowRendererArgs) => React.ReactElement | string) | null;
+    rowRenderer?: ((args: ChartTooltipRowRendererArgs) => RendererElement | string) | null;
     pin?: {
         enabled?: boolean;
         modifierKey?: 'altKey' | 'metaKey';

package/dist/cjs/core/types/chart/zoom.d.ts

@@ -19,8 +19,8 @@ export interface ChartZoom {
      * Supported zoom types by series type:
      * - `Area`, `Line`, `Scatter`: `x`, `y`, `xy`
      * - `BarX`: `x`, `xy`
+     * - `BarY`: `y`, `xy`
      * - `XRange`: `x`
-     * - `BarY`: `y`
      *
      * Default zoom type by series type:
      * - `BarY`: `y`

package/dist/cjs/core/types/css.d.ts

@@ -0,0 +1,2 @@
+import type { Properties } from 'csstype';
+export type CSSProperties = Properties;

package/dist/cjs/core/types/css.js

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

package/dist/cjs/core/types/renderer.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Framework-agnostic renderer return type.
+ * Structurally compatible with React.ReactElement — callers in React contexts
+ * may narrow to it without changes.
+ */
+export interface RendererElement {
+    type: unknown;
+    props: unknown;
+    key: unknown;
+}
+/**
+ * SVG text element attributes map.
+ * Replaces React.SVGTextElementAttributes<SVGTextElement> in core types.
+ */
+export type SVGTextAttributes = object;

package/dist/cjs/core/types/renderer.js

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

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

@@ -1,5 +1,6 @@
 import type { Selection } from 'd3-selection';
 import type { BaseTextStyle, MeaningfulAny } from '../../types';
+import type { CSSProperties } from '../types/css';
 /**
  * Approximate ratio of descenders relative to the full font em height.
  * Based on the Chromium hanging baseline algorithm where hanging offset ≈ ascent × 0.2.
@@ -12,7 +13,7 @@ export declare function setEllipsisForOverflowText<T>(selection: Selection<SVGTe
 export declare function setEllipsisForOverflowTexts<T>(selection: Selection<SVGTextElement, T, MeaningfulAny, unknown>, maxWidth: ((datum: T) => number) | number, currentWidth?: (datum: T) => number): void;
 export declare function getLabelsSize({ labels, style, rotation, html, }: {
     labels: string[];
-    style?: BaseTextStyle & React.CSSProperties;
+    style?: BaseTextStyle & CSSProperties;
     rotation?: number;
     html?: boolean;
 }): Promise<{

package/dist/cjs/core/zoom/zoom.js

@@ -60,6 +60,14 @@ export function getZoomedSeriesData(args) {
         if (!isPreparedZoomableSeries(seriesItem)) {
             return;
         }
+        // For stacked series the chart-space position of each point is the
+        // cumulative stack sum, not its individual value, so the value-axis
+        // filter would drop segments that still need to participate in the
+        // stack. Skip it and let the axis range / clip handle visibility.
+        const isStacked = 'stacking' in seriesItem && Boolean(seriesItem.stacking);
+        const stackedValueAxis = isStacked && 'valueAxis' in seriesItem ? seriesItem.valueAxis : undefined;
+        const skipXFilter = stackedValueAxis === 'x';
+        const skipYFilter = stackedValueAxis === 'y';
         seriesItem.data.forEach((point, i) => {
             var _a, _b;
             const prevPoint = seriesItem.data[i - 1];
@@ -67,7 +75,7 @@ export function getZoomedSeriesData(args) {
             let inXRange = true;
             let inYRange = true;
             prevPointInRange = currentPointInRange;
-            if (zoomState.x) {
+            if (zoomState.x && !skipXFilter) {
                 const [xMin, xMax] = zoomState.x;
                 if ('x0' in point && 'x1' in point) {
                     const isStartInRange = isValueInRange({
@@ -94,7 +102,7 @@ export function getZoomedSeriesData(args) {
                     });
                 }
             }
-            if (zoomState.y) {
+            if (zoomState.y && !skipYFilter) {
                 const yAxisIndex = 'yAxis' in seriesItem && typeof seriesItem.yAxis === 'number'
                     ? seriesItem.yAxis
                     : 0;

package/dist/cjs/hooks/useShapes/funnel/index.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import { renderFunnel } from '../../../core/shapes/funnel/renderer';
 import { block } from '../../../utils';
+import { HtmlLayer } from '../HtmlLayer';
 export { prepareFunnelData } from '../../../core/shapes/funnel/prepare-data';
 export * from '../../../core/shapes/funnel/types';
 const b = block('funnel');
 export const FunnelSeriesShapes = (args) => {
-    const { dispatcher, preparedData, seriesOptions } = args;
+    const { dispatcher, htmlLayout, preparedData, seriesOptions } = args;
     const ref = React.useRef(null);
     React.useEffect(() => {
         if (!ref.current) {
@@ -13,6 +14,8 @@ export const FunnelSeriesShapes = (args) => {
         }
         return renderFunnel({ plot: ref.current }, preparedData, seriesOptions, dispatcher);
     }, [dispatcher, preparedData, seriesOptions]);
+    const htmlLayerData = React.useMemo(() => ({ htmlElements: preparedData.htmlLabels }), [preparedData.htmlLabels]);
     return (React.createElement(React.Fragment, null,
-        React.createElement("g", { ref: ref, className: b() })));
+        React.createElement("g", { ref: ref, className: b() }),
+        React.createElement(HtmlLayer, { preparedData: htmlLayerData, htmlLayout: htmlLayout })));
 };

package/dist/cjs/hooks/useShapes/utils.d.ts

@@ -1,8 +1 @@
-import type { ZoomState } from '../../core/zoom/types';
-import type { PreparedYAxis } from '../useAxis/types';
 export * from '../../core/shapes/utils';
-export declare function getSeriesClipPathId(args: {
-    clipPathId: string;
-    yAxis: PreparedYAxis[];
-    zoomState?: Partial<ZoomState>;
-}): string;

package/dist/cjs/hooks/useShapes/utils.js

@@ -1,12 +1 @@
 export * from '../../core/shapes/utils';
-export function getSeriesClipPathId(args) {
-    const { clipPathId, yAxis, zoomState } = args;
-    const hasMinOrMax = yAxis.some((axis) => {
-        return typeof (axis === null || axis === void 0 ? void 0 : axis.min) === 'number' || typeof (axis === null || axis === void 0 ? void 0 : axis.max) === 'number';
-    });
-    const hasZoom = zoomState && Object.keys(zoomState).length > 0;
-    if (!hasZoom && !hasMinOrMax) {
-        return `${clipPathId}-horizontal`;
-    }
-    return clipPathId;
-}

package/dist/cjs/types/chart-ui.d.ts

@@ -1,4 +1,5 @@
 import type { BaseTextStyle } from '../core/types/chart/base';
+import type { CSSProperties } from '../core/types/css';
 export interface LabelData {
     text: string;
     x: number;
@@ -23,7 +24,7 @@ export interface HtmlItem {
         width: number;
         height: number;
     };
-    style?: BaseTextStyle & React.CSSProperties;
+    style?: BaseTextStyle & CSSProperties;
     /** Coordinate space for positioning: 'plot' uses the plot area origin, 'chart' uses the full chart origin. Defaults to 'plot'. */
     scope?: 'plot' | 'chart';
 }

package/dist/esm/components/AxisY/types.d.ts

@@ -1,5 +1,6 @@
 import type { DashStyle } from 'src/core/constants';
 import type { AxisPlotShape } from '../../core/types/chart/axis';
+import type { CSSProperties } from '../../core/types/css';
 import type { BaseTextStyle, HtmlItem, PlotLayerPlacement, PointPosition } from '../../types';
 import type { TextRowData } from '../types';
 export type AxisSvgLabelData = {
@@ -42,7 +43,7 @@ export type SvgAxisTitleData = {
 export type HtmlAxisTitleData = {
     html: true;
     content: string;
-    style: BaseTextStyle & React.CSSProperties;
+    style: BaseTextStyle & CSSProperties;
     size: {
         width: number;
         height: number;