@gravity-ui/charts 1.50.0 → 1.51.1

package/dist/esm/components/AxisY/utils.js

@@ -31,8 +31,13 @@ export function getTickValues({ scale, axis, labelLineHeight, series, }) {
         let result = originalTickValues;
         let availableSpaceForLabel = getMinSpaceBetween(result, (d) => d.y) - axis.labels.padding * 2;
         let ticksCount = result.length - 1;
+        let lastMultiTickResult = result;
+        const triedCounts = new Set();
         while (availableSpaceForLabel < labelLineHeight && result.length > 1) {
             ticksCount = ticksCount ? ticksCount - 1 : result.length - 1;
+            if (triedCounts.has(ticksCount))
+                break;
+            triedCounts.add(ticksCount);
             const newScaleTicks = scale.ticks(ticksCount);
             result = newScaleTicks.map((t) => ({
                 y: scale(t),
@@ -40,16 +45,23 @@ export function getTickValues({ scale, axis, labelLineHeight, series, }) {
             }));
             availableSpaceForLabel =
                 getMinSpaceBetween(result, (d) => d.y) - axis.labels.padding * 2;
+            if (result.length > 1) {
+                lastMultiTickResult = result;
+            }
         }
         // when this is not possible (for example, such values cannot be selected for the logarithmic axis with a small range)
-        // just thin out the originally proposed result
-        if (!result.length) {
-            result = originalTickValues;
+        // just thin out the last result that had multiple ticks
+        // For log scales, 1 tick is also a failure: d3 only places ticks at powers of the base,
+        // so a sub-decade range legitimately yields 1 tick despite having room for more.
+        // For linear scales, 1 tick is a valid result meaning the chart is simply too small.
+        const isLogScale = axis.type === 'logarithmic';
+        if ((isLogScale ? result.length <= 1 : !result.length) && lastMultiTickResult.length > 1) {
+            result = lastMultiTickResult;
             availableSpaceForLabel =
                 getMinSpaceBetween(result, (d) => d.y) - axis.labels.padding * 2;
             let delta = 2;
             while (availableSpaceForLabel < labelLineHeight && result.length > 1) {
-                result = thinOut(result, delta);
+                result = thinOut(lastMultiTickResult, delta);
                 if (result.length > 1) {
                     delta += 1;
                     availableSpaceForLabel =

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

@@ -362,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/esm/core/shapes/area/types.d.ts

@@ -1,5 +1,6 @@
-import type { AreaSeriesData, HtmlItem, LabelData } from '../../../types';
+import type { AreaSeriesData, LabelData } from '../../../types';
 import type { AnnotationAnchor, PreparedAnnotation, PreparedAreaSeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 export type PointData = {
     annotation?: PreparedAnnotation;
     color?: string;
@@ -31,5 +32,4 @@ export type PreparedAreaData = {
     hovered: boolean;
     active: boolean;
     svgLabels: LabelData[];
-    htmlLabels: HtmlItem[];
-};
+} & SeriesShapeData;

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

@@ -1,5 +1,6 @@
-import type { HtmlItem, LabelData, TooltipDataChunkBarX } from '../../../types';
+import type { LabelData, TooltipDataChunkBarX } from '../../../types';
 import type { PreparedAnnotation, PreparedBarXSeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 export type PreparedBarXData = Omit<TooltipDataChunkBarX, 'series'> & {
     annotation?: PreparedAnnotation;
     x: number;
@@ -9,11 +10,10 @@ export type PreparedBarXData = Omit<TooltipDataChunkBarX, 'series'> & {
     opacity: number | null;
     series: PreparedBarXSeries;
     svgLabels: LabelData[];
-    htmlLabels: HtmlItem[];
     isLastStackItem: boolean;
     /**
      * the utility field for storing the original height (for recalculations, etc.)
      * should not be used for displaying
      */
     _height: number;
-};
+} & SeriesShapeData;

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

@@ -13,7 +13,7 @@ export async function prepareBarYData(args) {
         return {
             shapes: [],
             labels: [],
-            htmlElements: [],
+            htmlLabels: [],
         };
     }
     const sortingOptions = get(seriesOptions, 'bar-y.dataSorting');
@@ -134,7 +134,7 @@ export async function prepareBarYData(args) {
         });
     });
     let labels = [];
-    let htmlElements = [];
+    let htmlLabels = [];
     const map = new Map();
     for (let i = 0; i < result.length; i++) {
         const prepared = result[i];
@@ -160,7 +160,7 @@ export async function prepareBarYData(args) {
                     x,
                     y: y - height / 2,
                 });
-                htmlElements.push({
+                htmlLabels.push({
                     content,
                     size: { width, height },
                     style: dataLabels.style,
@@ -202,12 +202,12 @@ export async function prepareBarYData(args) {
     if (labels.length && !allowOverlap) {
         labels = filterOverlappingLabels(labels);
     }
-    else if (htmlElements.length && !allowOverlap) {
-        htmlElements = filterOverlappingLabels(htmlElements);
+    else if (htmlLabels.length && !allowOverlap) {
+        htmlLabels = filterOverlappingLabels(htmlLabels);
     }
     return {
         shapes: result,
         labels,
-        htmlElements,
+        htmlLabels,
     };
 }

package/dist/esm/core/shapes/bar-y/types.d.ts

@@ -1,5 +1,6 @@
-import type { HtmlItem, LabelData, TooltipDataChunkBarY } from '../../../types';
+import type { LabelData, TooltipDataChunkBarY } from '../../../types';
 import type { PreparedBarYSeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 export type PreparedBarYData = Omit<TooltipDataChunkBarY, 'series'> & {
     x: number;
     y: number;
@@ -15,5 +16,4 @@ export type PreparedBarYData = Omit<TooltipDataChunkBarY, 'series'> & {
 export type BarYShapesArgs = {
     shapes: PreparedBarYData[];
     labels: LabelData[];
-    htmlElements: HtmlItem[];
-};
+} & SeriesShapeData;

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

@@ -19,7 +19,7 @@ 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 = [];
@@ -95,15 +95,28 @@ export async function prepareFunnelData(args) {
         }
     }
     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,
@@ -114,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],

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

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

package/dist/esm/core/shapes/heatmap/prepare-data.js

@@ -94,7 +94,7 @@ export async function prepareHeatmapData({ series, xAxis, xScale, yAxis, yScale,
     }
     const preparedData = {
         series: series,
-        htmlElements: htmlDataLabels,
+        htmlLabels: htmlDataLabels,
         items: heatmapItems,
         labels: svgDataLabels,
     };

package/dist/esm/core/shapes/heatmap/types.d.ts

@@ -1,5 +1,6 @@
-import type { BaseTextStyle, HeatmapSeriesData, HtmlItem } from '../../../types';
+import type { BaseTextStyle, HeatmapSeriesData } from '../../../types';
 import type { PreparedHeatmapSeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 export type HeatmapItem = {
     x: number;
     y: number;
@@ -20,6 +21,5 @@ export type HeatmapLabel = {
 export type PreparedHeatmapData = {
     series: PreparedHeatmapSeries;
     items: HeatmapItem[];
-    htmlElements: HtmlItem[];
     labels: HeatmapLabel[];
-};
+} & SeriesShapeData;

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

@@ -1,6 +1,7 @@
-import type { HtmlItem, LabelData, LineSeriesData, LineSeriesLineBaseStyle } from '../../../types';
+import type { LabelData, LineSeriesData, LineSeriesLineBaseStyle } from '../../../types';
 import type { DashStyle, LineCap, LineJoin } from '../../constants';
 import type { AnnotationAnchor, PreparedAnnotation, PreparedLineSeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 export type PointData = {
     annotation?: PreparedAnnotation;
     color?: string;
@@ -29,9 +30,8 @@ export type PreparedLineData = {
     hovered: boolean;
     active: boolean;
     svgLabels: LabelData[];
-    htmlLabels: HtmlItem[];
     color: string;
     dashStyle: DashStyle;
     linecap: LineCap;
     linejoin: LineJoin;
-} & Required<LineSeriesLineBaseStyle>;
+} & Required<LineSeriesLineBaseStyle> & SeriesShapeData;

package/dist/esm/core/shapes/pie/types.d.ts

@@ -1,6 +1,7 @@
 import type { PieArcDatum } from 'd3-shape';
-import type { ConnectorCurve, HtmlItem, LabelData } from '../../../types';
+import type { ConnectorCurve, LabelData } from '../../../types';
 import type { PreparedPieSeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 export type SegmentData = {
     value: number;
     color: string;
@@ -37,5 +38,4 @@ export type PreparedPieData = {
         opacity: number;
         size: number;
     };
-    htmlLabels: HtmlItem[];
-};
+} & SeriesShapeData;

package/dist/esm/core/shapes/radar/types.d.ts

@@ -1,5 +1,6 @@
-import type { HtmlItem, LabelData, RadarSeriesData } from '../../../types';
+import type { LabelData, RadarSeriesData } from '../../../types';
 import type { PreparedRadarSeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 export type RadarLabelData = LabelData & {
     maxWidth: number;
 };
@@ -54,6 +55,5 @@ export type PreparedRadarData = {
     grid: RadarGridData[];
     center: [number, number];
     radius: number;
-    htmlLabels: HtmlItem[];
     cursor: string | null;
-};
+} & SeriesShapeData;

package/dist/esm/core/shapes/sankey/prepare-data.js

@@ -2,7 +2,7 @@ import { getFormattedValue } from '../../utils/format';
 import { sankey, sankeyLinkHorizontal } from './sankey-layout';
 export function prepareSankeyData(args) {
     const { series, width, height } = args;
-    const htmlElements = [];
+    const htmlLabels = [];
     const sankeyGenerator = sankey()
         .nodeId((d) => d.name)
         .nodeSort((a, b) => { var _a, _b; return ((_a = a.index) !== null && _a !== void 0 ? _a : 0) - ((_b = b.index) !== null && _b !== void 0 ? _b : 0); })
@@ -70,5 +70,5 @@ export function prepareSankeyData(args) {
         });
         dataLabels.push(...labels);
     }
-    return { series, nodes: sankeyNodes, links: sankeyLinks, htmlElements, labels: dataLabels };
+    return { series, nodes: sankeyNodes, links: sankeyLinks, htmlLabels, labels: dataLabels };
 }

package/dist/esm/core/shapes/sankey/types.d.ts

@@ -1,5 +1,6 @@
-import type { BaseTextStyle, HtmlItem, SankeySeriesData } from '../../../types';
+import type { BaseTextStyle, SankeySeriesData } from '../../../types';
 import type { PreparedSankeySeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 export type SankeyDataLabel = {
     text: string;
     x: number;
@@ -26,8 +27,7 @@ export type SankeyLink = {
 };
 export type PreparedSankeyData = {
     series: PreparedSankeySeries;
-    htmlElements: HtmlItem[];
     nodes: SankeyNode[];
     links: SankeyLink[];
     labels: SankeyDataLabel[];
-};
+} & SeriesShapeData;

package/dist/esm/core/shapes/scatter/types.d.ts

@@ -1,5 +1,6 @@
 import type { HtmlItem, LabelData, ScatterSeriesData } from '../../../types';
 import type { PreparedScatterSeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 type PointData = {
     x: number;
     y: number;
@@ -19,6 +20,5 @@ export type PreparedScatterData = MarkerData;
 export type PreparedScatterShapeData = {
     markers: PreparedScatterData[];
     svgLabels: LabelData[];
-    htmlLabels: HtmlItem[];
-};
+} & SeriesShapeData;
 export {};

package/dist/esm/core/shapes/treemap/prepare-data.js

@@ -148,17 +148,17 @@ export async function prepareTreemapData(args) {
     })(hierarchy);
     const leaves = root.leaves();
     let labelData = [];
-    const htmlElements = [];
+    const htmlLabels = [];
     if ((_a = series.dataLabels) === null || _a === void 0 ? void 0 : _a.enabled) {
         const { html, style: dataLabelsStyle } = series.dataLabels;
         const labels = await getLabels({ data: leaves, options: series.dataLabels });
         if (html) {
             const htmlItems = labels.map((l) => (Object.assign({ style: Object.assign(Object.assign({}, dataLabelsStyle), { maxWidth: l.size.width, maxHeight: l.size.height, overflow: 'hidden' }) }, l)));
-            htmlElements.push(...htmlItems);
+            htmlLabels.push(...htmlItems);
         }
         else {
             labelData = labels;
         }
     }
-    return { labelData, leaves, series, htmlElements };
+    return { labelData, leaves, series, htmlLabels };
 }

package/dist/esm/core/shapes/treemap/types.d.ts

@@ -1,6 +1,7 @@
 import type { HierarchyRectangularNode } from 'd3-hierarchy';
-import type { HtmlItem, TreemapSeriesData } from '../../../types';
+import type { TreemapSeriesData } from '../../../types';
 import type { PreparedTreemapSeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 export type TreemapLabelData = {
     text: string;
     x: number;
@@ -11,5 +12,4 @@ export type PreparedTreemapData = {
     labelData: TreemapLabelData[];
     leaves: HierarchyRectangularNode<TreemapSeriesData<any>>[];
     series: PreparedTreemapSeries;
-    htmlElements: HtmlItem[];
-};
+} & SeriesShapeData;

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

@@ -0,0 +1,4 @@
+import type { HtmlItem } from '../../types';
+export interface SeriesShapeData {
+    htmlLabels: HtmlItem[];
+}

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

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

package/dist/esm/core/shapes/waterfall/prepare-data.js

@@ -144,7 +144,7 @@ export const prepareWaterfallData = async (args) => {
             data: item.data,
             series: item.series,
             subTotal: totalValue,
-            htmlElements: [],
+            htmlLabels: [],
         };
         preparedData.label = await getLabelData(preparedData, plotHeight);
         result.push(preparedData);

package/dist/esm/core/shapes/waterfall/types.d.ts

@@ -1,5 +1,6 @@
-import type { HtmlItem, LabelData, WaterfallSeriesData } from '../../../types';
+import type { LabelData, WaterfallSeriesData } from '../../../types';
 import type { PreparedWaterfallSeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 export type PreparedWaterfallData = {
     x: number;
     y: number;
@@ -10,5 +11,4 @@ export type PreparedWaterfallData = {
     data: WaterfallSeriesData;
     label?: LabelData;
     subTotal: number;
-    htmlElements: HtmlItem[];
-};
+} & SeriesShapeData;

package/dist/esm/core/shapes/x-range/types.d.ts

@@ -1,5 +1,6 @@
-import type { HtmlItem, LabelData, TooltipDataChunkXRange } from '../../../types';
+import type { LabelData, TooltipDataChunkXRange } from '../../../types';
 import type { PreparedXRangeSeries } from '../../series/types';
+import type { SeriesShapeData } from '../types';
 export type PreparedXRangeData = Omit<TooltipDataChunkXRange, 'series'> & {
     x: number;
     y: number;
@@ -8,5 +9,4 @@ export type PreparedXRangeData = Omit<TooltipDataChunkXRange, 'series'> & {
     color: string;
     series: PreparedXRangeSeries;
     svgLabels: LabelData[];
-    htmlLabels: HtmlItem[];
-};
+} & SeriesShapeData;

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

package/dist/esm/core/utils/axis/x-axis.js

@@ -55,8 +55,13 @@ export function getXAxisTickValues({ axis, labelLineHeight, scale, series, }) {
         let result = originalTickValues;
         let availableSpaceForLabel = getMinSpaceBetween(result, (d) => d.x) - axis.labels.padding * 2;
         let ticksCount = result.length - 1;
+        let lastMultiTickResult = result;
+        const triedCounts = new Set();
         while (availableSpaceForLabel < labelLineHeight && result.length > 1) {
             ticksCount = ticksCount ? ticksCount - 1 : result.length - 1;
+            if (triedCounts.has(ticksCount))
+                break;
+            triedCounts.add(ticksCount);
             const newScaleTicks = getScaleTicks({ scale, ticksCount, dateTimeLabelFormats });
             result = newScaleTicks.map((t) => ({
                 x: scale(t),
@@ -64,16 +69,23 @@ export function getXAxisTickValues({ axis, labelLineHeight, scale, series, }) {
             }));
             availableSpaceForLabel =
                 getMinSpaceBetween(result, (d) => d.x) - axis.labels.padding * 2;
+            if (result.length > 1) {
+                lastMultiTickResult = result;
+            }
         }
         // when this is not possible (for example, such values cannot be selected for the logarithmic axis with a small range)
-        // just thin out the originally proposed result
-        if (!result.length) {
-            result = originalTickValues;
+        // just thin out the last result that had multiple ticks
+        // For log scales, 1 tick is also a failure: d3 only places ticks at powers of the base,
+        // so a sub-decade range legitimately yields 1 tick despite having room for more.
+        // For linear scales, 1 tick is a valid result meaning the chart is simply too small.
+        const isLogScale = axis.type === 'logarithmic';
+        if ((isLogScale ? result.length <= 1 : !result.length) && lastMultiTickResult.length > 1) {
+            result = lastMultiTickResult;
             availableSpaceForLabel =
                 getMinSpaceBetween(result, (d) => d.x) - axis.labels.padding * 2;
             let delta = 2;
             while (availableSpaceForLabel < labelLineHeight && result.length > 1) {
-                result = thinOut(result, delta);
+                result = thinOut(lastMultiTickResult, delta);
                 if (result.length > 1) {
                     delta += 1;
                     availableSpaceForLabel =

package/dist/esm/hooks/useShapes/bar-y/index.js

@@ -5,7 +5,7 @@ import { HtmlLayer } from '../HtmlLayer';
 export { prepareBarYData } from '../../../core/shapes/bar-y/prepare-data';
 const b = block('bar-y');
 export function BarYSeriesShapes(args) {
-    const { dispatcher, preparedData: { htmlElements }, seriesOptions, htmlLayout, clipPathId, } = args;
+    const { dispatcher, preparedData: { htmlLabels: htmlElements }, seriesOptions, htmlLayout, clipPathId, } = args;
     const ref = React.useRef(null);
     React.useEffect(() => {
         if (!ref.current) {

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

@@ -16,5 +16,5 @@ export const HeatmapSeriesShapes = (args) => {
     }, [dispatcher, preparedData, seriesOptions]);
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: ref, className: b() }),
-        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
+        React.createElement(HtmlLayer, { preparedData: { htmlElements: preparedData.htmlLabels }, htmlLayout: htmlLayout })));
 };

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

@@ -14,5 +14,5 @@ export const SankeySeriesShape = (props) => {
     }, [dispatcher, preparedData, seriesOptions]);
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: ref, className: b() }),
-        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
+        React.createElement(HtmlLayer, { preparedData: { htmlElements: preparedData.htmlLabels }, htmlLayout: htmlLayout })));
 };

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

@@ -14,5 +14,5 @@ export const TreemapSeriesShape = (props) => {
     }, [dispatcher, preparedData, seriesOptions]);
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: ref, className: b() }),
-        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
+        React.createElement(HtmlLayer, { preparedData: { htmlElements: preparedData.htmlLabels }, htmlLayout: htmlLayout })));
 };

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

@@ -19,7 +19,7 @@ export const WaterfallSeriesShapes = (args) => {
         return renderWaterfall({ plot: ref.current }, preparedData, seriesOptions, allowOverlapDataLabels, dispatcher);
     }, [allowOverlapDataLabels, dispatcher, preparedData, seriesOptions]);
     const htmlLayerData = React.useMemo(() => {
-        const items = preparedData.map((d) => d === null || d === void 0 ? void 0 : d.htmlElements).flat();
+        const items = preparedData.map((d) => d === null || d === void 0 ? void 0 : d.htmlLabels).flat();
         if (allowOverlapDataLabels) {
             return { htmlElements: items };
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "1.50.0",
+  "version": "1.51.1",
   "description": "A flexible JavaScript library for data visualization and chart rendering using React",
   "license": "MIT",
   "main": "dist/cjs/index.js",