@gravity-ui/charts 1.49.1 → 1.50.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/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/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'];

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();
@@ -23,6 +23,7 @@ export async function prepareFunnelData(args) {
     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,36 +43,55 @@ 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;
@@ -117,6 +137,7 @@ export async function prepareFunnelData(args) {
         type: 'funnel',
         items,
         svgLabels,
+        htmlLabels,
         connectors,
     };
     return data;

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 = {
@@ -29,4 +29,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

@@ -39,7 +39,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;

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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'];

package/dist/esm/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/esm/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();
@@ -23,6 +23,7 @@ export async function prepareFunnelData(args) {
     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,36 +43,55 @@ 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;
@@ -117,6 +137,7 @@ export async function prepareFunnelData(args) {
         type: 'funnel',
         items,
         svgLabels,
+        htmlLabels,
         connectors,
     };
     return data;

package/dist/esm/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 = {
@@ -29,4 +29,5 @@ export type PreparedFunnelData = {
     items: FunnelItemData[];
     connectors: FunnelConnectorData[];
     svgLabels: LabelData[];
+    htmlLabels: HtmlItem[];
 };

package/dist/esm/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/esm/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/esm/core/types/chart/funnel.d.ts

@@ -39,7 +39,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/esm/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/esm/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/esm/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/esm/core/types/css.d.ts

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

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

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

package/dist/esm/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/esm/core/types/renderer.js

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

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "1.49.1",
+  "version": "1.50.0",
   "description": "A flexible JavaScript library for data visualization and chart rendering using React",
   "license": "MIT",
   "main": "dist/cjs/index.js",
@@ -71,6 +71,7 @@
     "@gravity-ui/date-utils": "^2.5.4",
     "@gravity-ui/i18n": "^1.6.0",
     "@gravity-ui/icons": "^2.15.0",
+    "csstype": "^3.2.3",
     "d3-array": "^3.2.4",
     "d3-axis": "^3.0.0",
     "d3-brush": "^3.0.0",