@gravity-ui/charts 1.34.7 → 1.34.9

package/dist/esm/components/ChartInner/useChartInnerState.d.ts

@@ -1,9 +1,8 @@
 import React from 'react';
 import type { Dispatch } from 'd3';
-import type { PreparedChart, PreparedRangeSlider, PreparedTooltip, RangeSliderState, ZoomState } from '../../hooks';
+import type { PreparedRangeSlider, PreparedTooltip, RangeSliderState, ZoomState } from '../../hooks';
 type Props = {
     dispatcher: Dispatch<object>;
-    preparedChart: PreparedChart;
     preparedRangeSlider: PreparedRangeSlider;
     tooltip?: PreparedTooltip;
 };
@@ -14,7 +13,7 @@ export declare function useChartInnerState(props: Props): {
     tooltipPinned: boolean;
     togglePinTooltip: ((value: boolean, event: React.MouseEvent) => void) | undefined;
     unpinTooltip: (() => void) | undefined;
-    updateRangeSliderState: (nextRangeSliderState?: RangeSliderState, syncZoom?: boolean) => void;
+    updateRangeSliderState: (nextRangeSliderState?: RangeSliderState) => void;
     updateZoomState: (nextZoomState: Partial<ZoomState>) => void;
     zoomState: Partial<ZoomState>;
 };

package/dist/esm/components/ChartInner/useChartInnerState.js

@@ -1,11 +1,9 @@
 import React from 'react';
 import isEqual from 'lodash/isEqual';
-import { ZOOM_TYPE } from '../../constants';
 import { EventType, isMacintosh } from '../../utils';
-const RANGE_SLIDER_SYNC_ZOOM_TYPES = [ZOOM_TYPE.X, ZOOM_TYPE.XY];
 export function useChartInnerState(props) {
     var _a, _b;
-    const { dispatcher, preparedChart, preparedRangeSlider, tooltip } = props;
+    const { dispatcher, preparedRangeSlider, tooltip } = props;
     const [tooltipPinned, setTooltipPinned] = React.useState(false);
     const [zoomState, setZoomState] = React.useState({});
     const [rangeSliderState, setRangeSliderState] = React.useState();
@@ -13,7 +11,6 @@ export function useChartInnerState(props) {
     const tooltipEnabled = tooltip === null || tooltip === void 0 ? void 0 : tooltip.enabled;
     const tooltipPinEnabled = (_a = tooltip === null || tooltip === void 0 ? void 0 : tooltip.pin) === null || _a === void 0 ? void 0 : _a.enabled;
     const modifierKey = (_b = tooltip === null || tooltip === void 0 ? void 0 : tooltip.pin) === null || _b === void 0 ? void 0 : _b.modifierKey;
-    const rangeSliderEnabled = preparedRangeSlider.enabled;
     const togglePinTooltip = React.useCallback((value, event) => {
         let resultValue = value;
         if (value && modifierKey) {
@@ -36,16 +33,17 @@ export function useChartInnerState(props) {
     const updateZoomState = React.useCallback((nextZoomState) => {
         if (!isEqual(zoomState, nextZoomState)) {
             setZoomState(nextZoomState);
-            if (rangeSliderEnabled && (nextZoomState === null || nextZoomState === void 0 ? void 0 : nextZoomState.x)) {
-                const [xMin, xMax] = nextZoomState.x;
-                setRangeSliderState({
-                    max: xMax,
-                    min: xMin,
-                });
+            // One-way sync: zoom → range slider. On full reset clear the slider state;
+            // on x-zoom change sync slider to the zoomed x range.
+            if (Object.keys(nextZoomState).length === 0) {
+                setRangeSliderState(undefined);
+            }
+            else if (nextZoomState.x !== undefined) {
+                setRangeSliderState({ min: nextZoomState.x[0], max: nextZoomState.x[1] });
             }
         }
-    }, [rangeSliderEnabled, zoomState]);
-    const updateRangeSliderState = React.useCallback((nextRangeSliderState, syncZoom = true) => {
+    }, [zoomState]);
+    const updateRangeSliderState = React.useCallback((nextRangeSliderState) => {
         if (!isEqual(rangeSliderState, nextRangeSliderState)) {
             setRangeSliderState(nextRangeSliderState
                 ? {
@@ -53,17 +51,11 @@ export function useChartInnerState(props) {
                     min: nextRangeSliderState.min,
                 }
                 : undefined);
-            if (syncZoom &&
-                nextRangeSliderState &&
-                preparedChart.zoom &&
-                Object.keys(zoomState || {}).length > 0 &&
-                RANGE_SLIDER_SYNC_ZOOM_TYPES.includes(preparedChart.zoom.type)) {
-                setZoomState({
-                    x: [nextRangeSliderState.min, nextRangeSliderState.max],
-                });
-            }
+            // Moving the slider clears zoom so the slider is always the sole source of truth.
+            // Zoom stays active only until the user explicitly touches the slider.
+            setZoomState({});
         }
-    }, [preparedChart.zoom, rangeSliderState, zoomState]);
+    }, [rangeSliderState]);
     return {
         initialized,
         rangeSliderState,

package/dist/esm/components/RangeSlider/index.d.ts

@@ -2,7 +2,6 @@ import React from 'react';
 import type { RangeSliderProps } from '../../hooks';
 import './styles.css';
 export interface RangeSliderHandle {
-    getDomain: () => [number, number] | undefined;
     resetState: () => void;
 }
 export declare const RangeSlider: React.MemoExoticComponent<React.ForwardRefExoticComponent<RangeSliderProps & React.RefAttributes<RangeSliderHandle>>>;

package/dist/esm/components/RangeSlider/index.js

@@ -20,24 +20,17 @@ function RangeSliderComponent(props, forwardedRef) {
      * in that case, the extra computations simply don't happen.
      *
      * Methods:
-     * - getDomain: returns the current X-axis domain (for synchronization with zoom)
      * - resetState: resets the slider state to its initial value (these calculations
      *   are only possible within the component since it has access to the prepared series data)
      */
     React.useImperativeHandle(forwardedRef, () => ({
-        getDomain: () => {
-            if (!xScale || isBandScale(xScale)) {
-                return undefined;
-            }
-            return xScale.domain().map(Number);
-        },
         resetState: () => {
             if (xScale && !isBandScale(xScale)) {
                 const initialRangeSliderState = getInitialRangeSliderState({
                     xScale,
                     defaultRange,
                 });
-                onUpdate(initialRangeSliderState, false);
+                onUpdate(initialRangeSliderState);
             }
         },
     }), [defaultRange, onUpdate, xScale]);

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

@@ -0,0 +1,9 @@
+export type TextRowData = {
+    text: string;
+    x: number;
+    y: number;
+    size: {
+        width: number;
+        height: number;
+    };
+};

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

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

package/dist/esm/components/utils/axis-title.d.ts

@@ -0,0 +1,6 @@
+import type { PreparedAxis } from '../../hooks';
+import type { TextRowData } from '../types';
+export declare function getMultilineTitleContentRows({ axis, titleMaxWidth, }: {
+    axis: PreparedAxis;
+    titleMaxWidth: number;
+}): Promise<TextRowData[]>;

package/dist/esm/components/utils/axis-title.js

@@ -0,0 +1,39 @@
+import { getTextSizeFn, getTextWithElipsis, wrapText } from '../../utils';
+export async function getMultilineTitleContentRows({ axis, titleMaxWidth, }) {
+    const titleContent = [];
+    const getTitleTextSize = getTextSizeFn({ style: axis.title.style });
+    let titleTextRows = await wrapText({
+        text: axis.title.text,
+        style: axis.title.style,
+        width: titleMaxWidth,
+        getTextSize: getTitleTextSize,
+    });
+    titleTextRows = titleTextRows.reduce((acc, row, index) => {
+        if (index < axis.title.maxRowCount) {
+            acc.push(row);
+        }
+        else {
+            acc[axis.title.maxRowCount - 1].text += row.text;
+        }
+        return acc;
+    }, []);
+    for (let i = 0; i < titleTextRows.length; i++) {
+        const textRow = titleTextRows[i];
+        let textRowContent = textRow.text.trim();
+        if (i === titleTextRows.length - 1) {
+            textRowContent = await getTextWithElipsis({
+                text: textRowContent,
+                maxWidth: titleMaxWidth,
+                getTextWidth: async (s) => (await getTitleTextSize(s)).width,
+            });
+        }
+        const textRowSize = await getTitleTextSize(textRowContent);
+        titleContent.push({
+            text: textRowContent,
+            x: 0,
+            y: textRow.y,
+            size: textRowSize,
+        });
+    }
+    return titleContent;
+}

package/dist/esm/components/{utils.d.ts → utils/index.d.ts}

@@ -1,6 +1,6 @@
-import type { DashStyle } from '../constants';
-import type { ChartScaleLinear, ChartScaleTime } from '../hooks';
-import type { ChartAxisRangeSlider } from '../types';
+import type { DashStyle } from '../../constants';
+import type { ChartScaleLinear, ChartScaleTime } from '../../hooks';
+import type { ChartAxisRangeSlider } from '../../types';
 export declare function getInitialRangeSliderState(args: {
     xScale: ChartScaleLinear | ChartScaleTime;
     defaultRange?: ChartAxisRangeSlider['defaultRange'];

package/dist/esm/components/{utils.js → utils/index.js}

@@ -1,7 +1,7 @@
 import { duration } from '@gravity-ui/date-utils';
 import { line as lineGenerator } from 'd3';
 import { select } from 'd3-selection';
-import { getLineDashArray, isTimeScale } from '../utils';
+import { getLineDashArray, isTimeScale } from '../../utils';
 export function getInitialRangeSliderState(args) {
     const { defaultRange, xScale } = args;
     let minRange;

package/dist/esm/hooks/useAxisScales/index.js

@@ -9,7 +9,9 @@ export { createXScale } from './x-scale';
 export { createYScale } from './y-scale';
 const createScales = (args) => {
     const { boundsWidth, boundsHeight, isRangeSlider, rangeSliderState, series, split, xAxis, yAxis, zoomState, } = args;
-    let visibleSeries = getOnlyVisibleSeries(series);
+    // For range slider: always use all series regardless of visibility so the slider domain
+    // stays stable when the user hides/shows series via the legend.
+    let visibleSeries = isRangeSlider ? series : getOnlyVisibleSeries(series);
     // Reassign to all series in case of all series unselected,
     // otherwise we will get an empty space without grid
     visibleSeries = visibleSeries.length === 0 ? series : visibleSeries;

package/dist/esm/hooks/useAxisScales/x-scale.d.ts

@@ -1,11 +1,5 @@
 import type { PreparedAxis, PreparedSeries, RangeSliderState } from '../../hooks';
 import type { ChartAxis, ChartSeries } from '../../types';
-export declare function getXMaxDomainResult(args: {
-    xMaxDomain: number;
-    xMaxProps?: number;
-    xMaxRangeSlider?: number;
-    xMaxZoom?: number;
-}): number;
 export declare function createXScale(args: {
     axis: PreparedAxis | ChartAxis;
     boundsWidth: number;

package/dist/esm/hooks/useAxisScales/x-scale.js

@@ -1,7 +1,7 @@
 import { extent, scaleBand, scaleLinear, scaleLog, scaleUtc } from 'd3';
 import get from 'lodash/get';
 import { DEFAULT_AXIS_TYPE, SERIES_TYPE } from '../../constants';
-import { getAxisCategories, getDefaultMaxXAxisValue, getDefaultMinXAxisValue, getDomainDataXBySeries, } from '../../utils';
+import { getDefaultMaxXAxisValue, getDefaultMinXAxisValue, getDomainDataXBySeries, getEffectiveXRange, } from '../../utils';
 import { getBandSize } from '../utils/get-band-size';
 import { checkIsPointDomain, filterCategoriesByVisibleSeries, getMinMaxPropsOrState, hasOnlyMarkerSeries, validateArrayData, } from './utils';
 const X_AXIS_ZOOM_PADDING = 0.02;
@@ -27,23 +27,6 @@ function isSeriesWithXAxisOffset(series) {
     const types = [SERIES_TYPE.Heatmap, SERIES_TYPE.BarX];
     return series.some((s) => types.includes(s.type));
 }
-export function getXMaxDomainResult(args) {
-    const { xMaxDomain, xMaxProps, xMaxRangeSlider, xMaxZoom } = args;
-    let xMaxDomainResult = xMaxDomain;
-    // When xMaxRangeSlider is provided, we use it directly without considering xMaxDomain.
-    // This is intentional: the range slider needs to display the chart's maxPadding area,
-    // which would be clipped if we constrained it to xMaxDomain.
-    if (typeof xMaxRangeSlider === 'number') {
-        xMaxDomainResult = xMaxRangeSlider;
-    }
-    else if (typeof xMaxZoom === 'number' && xMaxZoom < xMaxDomain) {
-        xMaxDomainResult = xMaxZoom;
-    }
-    else if (typeof xMaxProps === 'number' && xMaxProps < xMaxDomain) {
-        xMaxDomainResult = xMaxProps;
-    }
-    return xMaxDomainResult;
-}
 function getXScaleRange({ boundsWidth, hasZoomX }) {
     const xAxisZoomPadding = boundsWidth * X_AXIS_ZOOM_PADDING;
     const xRange = [0, boundsWidth];
@@ -54,22 +37,17 @@ function getXScaleRange({ boundsWidth, hasZoomX }) {
 // eslint-disable-next-line complexity
 export function createXScale(args) {
     const { axis, boundsWidth, series, rangeSliderState, zoomStateX } = args;
+    const effectiveX = getEffectiveXRange(zoomStateX, rangeSliderState);
+    const effectiveXMin = effectiveX === null || effectiveX === void 0 ? void 0 : effectiveX[0];
+    const effectiveXMax = effectiveX === null || effectiveX === void 0 ? void 0 : effectiveX[1];
     const [xMinPropsOrState, xMaxPropsOrState] = getMinMaxPropsOrState({
         axis,
-        maxValues: [zoomStateX === null || zoomStateX === void 0 ? void 0 : zoomStateX[1], rangeSliderState === null || rangeSliderState === void 0 ? void 0 : rangeSliderState.max],
-        minValues: [zoomStateX === null || zoomStateX === void 0 ? void 0 : zoomStateX[0], rangeSliderState === null || rangeSliderState === void 0 ? void 0 : rangeSliderState.min],
+        maxValues: [effectiveXMax],
+        minValues: [effectiveXMin],
     });
     const xType = get(axis, 'type', DEFAULT_AXIS_TYPE);
     const hasZoomX = Boolean(zoomStateX);
-    let xCategories = get(axis, 'categories');
-    if (rangeSliderState && xCategories) {
-        xCategories = getAxisCategories({
-            categories: xCategories,
-            min: rangeSliderState.min,
-            max: rangeSliderState.max,
-            order: axis.order,
-        });
-    }
+    const xCategories = get(axis, 'categories');
     const maxPadding = get(axis, 'maxPadding', 0);
     const xAxisMaxPadding = boundsWidth * maxPadding + calculateXAxisPadding(series);
     const range = getXScaleRange({
@@ -193,12 +171,11 @@ export function createXScale(args) {
                     !isPointDomain
                     ? xMinPropsOrState
                     : xMinTimestamp;
-                const xMax = getXMaxDomainResult({
-                    xMaxDomain: xMaxTimestamp,
-                    xMaxProps: get(axis, 'max'),
-                    xMaxRangeSlider: rangeSliderState === null || rangeSliderState === void 0 ? void 0 : rangeSliderState.max,
-                    xMaxZoom: zoomStateX === null || zoomStateX === void 0 ? void 0 : zoomStateX[1],
-                });
+                const xMax = typeof xMaxPropsOrState === 'number' &&
+                    xMaxPropsOrState < xMaxTimestamp &&
+                    !isPointDomain
+                    ? xMaxPropsOrState
+                    : xMaxTimestamp;
                 domain = [xMin, xMax];
                 const scale = scaleUtc().domain(domain).range(range);
                 let offsetMin = 0;

package/dist/esm/hooks/useAxisScales/y-scale.js

@@ -141,14 +141,9 @@ export function createYScale(args) {
             }
             if (hasNumberAndNullValues) {
                 const [yMinDomain, yMaxDomain] = extent(domain);
-                const isPointDomain = hasOnlyMarkerSeries(series)
-                    ? checkIsPointDomain([yMinDomain, yMaxDomain])
-                    : false;
-                const yMin = typeof yMinPropsOrState === 'number' && !isPointDomain
-                    ? yMinPropsOrState
-                    : yMinDomain;
+                const yMin = typeof yMinPropsOrState === 'number' ? yMinPropsOrState : yMinDomain;
                 let yMax;
-                if (typeof yMaxPropsOrState === 'number' && !isPointDomain) {
+                if (typeof yMaxPropsOrState === 'number') {
                     yMax = yMaxPropsOrState;
                 }
                 else {

package/dist/esm/hooks/useRangeSlider/types.d.ts

@@ -13,7 +13,7 @@ export interface RangeSliderProps {
     boundsWidth: number;
     height: number;
     htmlLayout: HTMLElement | null;
-    onUpdate: (nextRangeSliderState?: RangeSliderState, syncZoom?: boolean) => void;
+    onUpdate: (nextRangeSliderState?: RangeSliderState) => void;
     preparedChart: PreparedChart;
     preparedLegend: PreparedLegend | null;
     preparedRangeSlider: PreparedRangeSlider;

package/dist/esm/hooks/useSeries/prepare-legend.js

@@ -8,7 +8,8 @@ import { getDefaultColorStops, getDomainForContinuousColorScale, getLabelsSize }
 export async function getPreparedLegend(args) {
     var _a, _b, _c, _d, _e, _f, _g;
     const { legend, series } = args;
-    const enabled = Boolean(typeof (legend === null || legend === void 0 ? void 0 : legend.enabled) === 'boolean' ? legend === null || legend === void 0 ? void 0 : legend.enabled : series.length > 1);
+    const seriesWithEnabledLegend = series.filter((s) => { var _a; return ((_a = s.legend) === null || _a === void 0 ? void 0 : _a.enabled) !== false; });
+    const enabled = Boolean(typeof (legend === null || legend === void 0 ? void 0 : legend.enabled) === 'boolean' ? legend === null || legend === void 0 ? void 0 : legend.enabled : seriesWithEnabledLegend.length > 1);
     const defaultItemStyle = clone(legendDefaults.itemStyle);
     const itemStyle = get(legend, 'itemStyle');
     const computedItemStyle = merge(defaultItemStyle, itemStyle);

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

@@ -11,8 +11,10 @@ export const AreaSeriesShapes = (args) => {
     const hoveredDataRef = React.useRef(null);
     const plotRef = React.useRef(null);
     const markersRef = React.useRef(null);
+    const allowOverlapDataLabels = React.useMemo(() => {
+        return preparedData.some((d) => d === null || d === void 0 ? void 0 : d.series.dataLabels.allowOverlap);
+    }, [preparedData]);
     React.useEffect(() => {
-        var _a;
         if (!plotRef.current || !markersRef.current) {
             return () => { };
         }
@@ -55,7 +57,7 @@ export const AreaSeriesShapes = (args) => {
         let dataLabels = preparedData.reduce((acc, d) => {
             return acc.concat(d.labels);
         }, []);
-        if (!((_a = preparedData[0]) === null || _a === void 0 ? void 0 : _a.series.dataLabels.allowOverlap)) {
+        if (!allowOverlapDataLabels) {
             dataLabels = filterOverlappingLabels(dataLabels);
         }
         const labelsSelection = plotSvgElement
@@ -147,9 +149,16 @@ export const AreaSeriesShapes = (args) => {
         return () => {
             dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.area', null);
         };
-    }, [dispatcher, preparedData, seriesOptions]);
+    }, [allowOverlapDataLabels, dispatcher, preparedData, seriesOptions]);
+    const htmlLayerData = React.useMemo(() => {
+        const items = preparedData.map((d) => d === null || d === void 0 ? void 0 : d.htmlElements).flat();
+        if (allowOverlapDataLabels) {
+            return { htmlElements: items };
+        }
+        return { htmlElements: filterOverlappingLabels(items) };
+    }, [allowOverlapDataLabels, preparedData]);
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: plotRef, className: b(), clipPath: `url(#${clipPathId})` }),
         React.createElement("g", { ref: markersRef }),
-        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
+        React.createElement(HtmlLayer, { preparedData: htmlLayerData, htmlLayout: htmlLayout })));
 };

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

@@ -27,14 +27,14 @@ function getXValues(series, xAxis, xScale) {
     }
     return Array.from(xValues);
 }
-async function prepareDataLabels({ series, points, xMax, yAxisTop, }) {
+async function prepareDataLabels({ series, points, xMax, yAxisTop, isOutsideBounds, }) {
     var _a;
     const svgLabels = [];
     const htmlLabels = [];
     const getTextSize = getTextSizeFn({ style: series.dataLabels.style });
     for (let pointsIndex = 0; pointsIndex < points.length; pointsIndex++) {
         const point = points[pointsIndex];
-        if (point.y === null) {
+        if (point.y === null || isOutsideBounds(point.x, point.y)) {
             continue;
         }
         const text = getFormattedValue(Object.assign({ value: (_a = point.data.label) !== null && _a !== void 0 ? _a : point.data.y }, series.dataLabels));
@@ -281,6 +281,7 @@ export const prepareAreaData = async (args) => {
                         points: item.points,
                         xMax,
                         yAxisTop: itemYAxisTop,
+                        isOutsideBounds,
                     });
                     item.labels.push(...labelsData.svgLabels);
                     item.htmlElements.push(...labelsData.htmlLabels);

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

@@ -11,8 +11,10 @@ export const BarXSeriesShapes = (args) => {
     const { dispatcher, preparedData, seriesOptions, htmlLayout, clipPathId } = args;
     const hoveredDataRef = React.useRef(null);
     const ref = React.useRef(null);
+    const allowOverlapDataLabels = React.useMemo(() => {
+        return preparedData.some((d) => d === null || d === void 0 ? void 0 : d.series.dataLabels.allowOverlap);
+    }, [preparedData]);
     React.useEffect(() => {
-        var _a;
         if (!ref.current) {
             return () => { };
         }
@@ -46,7 +48,7 @@ export const BarXSeriesShapes = (args) => {
             .attr('opacity', (d) => d.opacity)
             .attr('cursor', (d) => d.series.cursor);
         let dataLabels = preparedData.map((d) => d.label).filter(Boolean);
-        if (!((_a = preparedData[0]) === null || _a === void 0 ? void 0 : _a.series.dataLabels.allowOverlap)) {
+        if (!allowOverlapDataLabels) {
             dataLabels = filterOverlappingLabels(dataLabels);
         }
         const labelSelection = svgElement
@@ -108,8 +110,15 @@ export const BarXSeriesShapes = (args) => {
         return () => {
             dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.bar-x', null);
         };
-    }, [dispatcher, preparedData, seriesOptions]);
+    }, [allowOverlapDataLabels, dispatcher, preparedData, seriesOptions]);
+    const htmlLayerData = React.useMemo(() => {
+        const items = preparedData.map((d) => d === null || d === void 0 ? void 0 : d.htmlElements).flat();
+        if (allowOverlapDataLabels) {
+            return { htmlElements: items };
+        }
+        return { htmlElements: filterOverlappingLabels(items) };
+    }, [allowOverlapDataLabels, preparedData]);
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: ref, className: b(), clipPath: `url(#${clipPathId})` }),
-        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
+        React.createElement(HtmlLayer, { preparedData: htmlLayerData, htmlLayout: htmlLayout })));
 };

package/dist/esm/hooks/useShapes/bar-x/prepare-data.js

@@ -5,7 +5,7 @@ import { getFormattedValue } from '../../../utils/chart/format';
 import { getSeriesStackId } from '../../useSeries/utils';
 import { getBarXLayout } from '../../utils/bar-x';
 const isSeriesDataValid = (d) => d.y !== null;
-async function getLabelData(d) {
+async function getLabelData(d, xMax) {
     var _a;
     if (!d.series.dataLabels.enabled) {
         return undefined;
@@ -22,10 +22,10 @@ async function getLabelData(d) {
     if (d.series.dataLabels.inside) {
         y = d.y + d.height / 2;
     }
-    const x = d.x + d.width / 2;
+    const centerX = Math.min(xMax - width / 2, Math.max(width / 2, d.x + d.width / 2));
     return {
         text,
-        x: html ? x - width / 2 : x,
+        x: html ? centerX - width / 2 : centerX,
         y: html ? y - height : y,
         style,
         size: { width, height },
@@ -35,7 +35,7 @@ async function getLabelData(d) {
 }
 // eslint-disable-next-line complexity
 export const prepareBarXData = async (args) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const { series, seriesOptions, xAxis, xScale, yAxis, yScale, boundsHeight: plotHeight, split, isRangeSlider, } = args;
     const stackGap = seriesOptions['bar-x'].stackGap;
     const categories = (_a = xAxis === null || xAxis === void 0 ? void 0 : xAxis.categories) !== null && _a !== void 0 ? _a : [];
@@ -176,10 +176,19 @@ export const prepareBarXData = async (args) => {
             }
         }
     }
+    const [_xMin, xRangeMax] = xScale.range();
+    const xMax = xRangeMax;
     for (let i = 0; i < result.length; i++) {
         const barData = result[i];
-        if (barData.series.dataLabels.enabled && !isRangeSlider) {
-            const label = await getLabelData(barData);
+        const isBarOutsideBounds = barData.x + barData.width <= 0 ||
+            barData.x >= xMax ||
+            barData.y + barData.height <= 0 ||
+            barData.y >= plotHeight;
+        const isZeroValue = ((_e = barData.data.y) !== null && _e !== void 0 ? _e : 0) === 0;
+        if (barData.series.dataLabels.enabled &&
+            !isRangeSlider &&
+            (!isBarOutsideBounds || isZeroValue)) {
+            const label = await getLabelData(barData, xMax);
             if (barData.series.dataLabels.html && label) {
                 barData.htmlElements.push({
                     x: label.x,

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

@@ -11,8 +11,10 @@ export const LineSeriesShapes = (args) => {
     const hoveredDataRef = React.useRef(null);
     const plotRef = React.useRef(null);
     const markersRef = React.useRef(null);
+    const allowOverlapDataLabels = React.useMemo(() => {
+        return preparedData.some((d) => d === null || d === void 0 ? void 0 : d.series.dataLabels.allowOverlap);
+    }, [preparedData]);
     React.useEffect(() => {
-        var _a;
         if (!plotRef.current || !markersRef.current) {
             return () => { };
         }
@@ -42,7 +44,7 @@ export const LineSeriesShapes = (args) => {
         let dataLabels = preparedData.reduce((acc, d) => {
             return acc.concat(d.labels);
         }, []);
-        if (!((_a = preparedData[0]) === null || _a === void 0 ? void 0 : _a.series.dataLabels.allowOverlap)) {
+        if (!allowOverlapDataLabels) {
             dataLabels = filterOverlappingLabels(dataLabels);
         }
         const labelsSelection = plotSvgElement
@@ -133,9 +135,16 @@ export const LineSeriesShapes = (args) => {
         return () => {
             dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.line', null);
         };
-    }, [dispatcher, preparedData, seriesOptions]);
+    }, [allowOverlapDataLabels, dispatcher, preparedData, seriesOptions]);
+    const htmlLayerData = React.useMemo(() => {
+        const items = preparedData.map((d) => d === null || d === void 0 ? void 0 : d.htmlElements).flat();
+        if (allowOverlapDataLabels) {
+            return { htmlElements: items };
+        }
+        return { htmlElements: filterOverlappingLabels(items) };
+    }, [allowOverlapDataLabels, preparedData]);
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: plotRef, className: b(), clipPath: `url(#${clipPathId})` }),
         React.createElement("g", { ref: markersRef }),
-        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
+        React.createElement(HtmlLayer, { preparedData: htmlLayerData, htmlLayout: htmlLayout })));
 };

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

@@ -49,7 +49,7 @@ export const prepareLineData = async (args) => {
         if (s.dataLabels.enabled && !isRangeSlider) {
             if (s.dataLabels.html) {
                 const list = await Promise.all(points.reduce((result, p) => {
-                    if (p.y === null) {
+                    if (p.y === null || p.x === null || isOutsideBounds(p.x, p.y)) {
                         return result;
                     }
                     result.push(getHtmlLabel(p, s, xMax));
@@ -61,7 +61,9 @@ export const prepareLineData = async (args) => {
                 const getTextSize = getTextSizeFn({ style: s.dataLabels.style });
                 for (let index = 0; index < points.length; index++) {
                     const point = points[index];
-                    if (point.y !== null && point.x !== null) {
+                    if (point.y !== null &&
+                        point.x !== null &&
+                        !isOutsideBounds(point.x, point.y)) {
                         const labelValue = (_b = point.data.label) !== null && _b !== void 0 ? _b : point.data.y;
                         const text = getFormattedValue(Object.assign({ value: labelValue }, s.dataLabels));
                         const labelSize = await getTextSize(text);

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

@@ -12,8 +12,10 @@ export const WaterfallSeriesShapes = (args) => {
     const hoveredDataRef = React.useRef(null);
     const ref = React.useRef(null);
     const connectorSelector = `.${b('connector')}`;
+    const allowOverlapDataLabels = React.useMemo(() => {
+        return preparedData.some((d) => d === null || d === void 0 ? void 0 : d.series.dataLabels.allowOverlap);
+    }, [preparedData]);
     React.useEffect(() => {
-        var _a;
         if (!ref.current) {
             return () => { };
         }
@@ -34,7 +36,7 @@ export const WaterfallSeriesShapes = (args) => {
             .attr('opacity', (d) => d.opacity)
             .attr('cursor', (d) => d.series.cursor);
         let dataLabels = preparedData.map((d) => d.label).filter(Boolean);
-        if (!((_a = preparedData[0]) === null || _a === void 0 ? void 0 : _a.series.dataLabels.allowOverlap)) {
+        if (!allowOverlapDataLabels) {
             dataLabels = filterOverlappingLabels(dataLabels);
         }
         const labelSelection = svgElement
@@ -125,8 +127,15 @@ export const WaterfallSeriesShapes = (args) => {
         return () => {
             dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.waterfall', null);
         };
-    }, [connectorSelector, dispatcher, preparedData, seriesOptions]);
+    }, [allowOverlapDataLabels, connectorSelector, dispatcher, preparedData, seriesOptions]);
+    const htmlLayerData = React.useMemo(() => {
+        const items = preparedData.map((d) => d === null || d === void 0 ? void 0 : d.htmlElements).flat();
+        if (allowOverlapDataLabels) {
+            return { htmlElements: items };
+        }
+        return { htmlElements: filterOverlappingLabels(items) };
+    }, [allowOverlapDataLabels, preparedData]);
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: ref, className: b(), clipPath: `url(#${clipPathId})` }),
-        React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
+        React.createElement(HtmlLayer, { preparedData: htmlLayerData, htmlLayout: htmlLayout })));
 };