@gravity-ui/charts 1.43.0 → 1.43.1

package/dist/cjs/components/ChartInner/index.js

@@ -71,7 +71,7 @@ export const ChartInner = (props) => {
         value: allPreparedSeries,
         delay: DEBOUNCED_VALUE_DELAY,
     });
-    const { handleChartClick, handleMouseLeave, throttledHandleMouseMove, throttledHandleTouchMove } = useChartInnerHandlers({
+    const { handleChartClick, handlePointerLeave, throttledHandlePointerMove, throttledHandleTouchMove, } = useChartInnerHandlers({
         boundsHeight,
         boundsOffsetLeft,
         boundsOffsetTop,
@@ -256,7 +256,7 @@ export const ChartInner = (props) => {
                 React.createElement("rect", { x: 0, y: 0, width: boundsWidth, height: boundsHeight })),
             React.createElement("clipPath", { id: getClipPathIdByBounds({ clipPathId, bounds: 'horizontal' }) },
                 React.createElement("rect", { x: 0, y: -boundsHeight, width: boundsWidth, height: boundsHeight * 3 }))),
-        preparedTitle && React.createElement(Title, Object.assign({}, preparedTitle, { chartWidth: width })),
+        preparedTitle && React.createElement(Title, Object.assign({}, preparedTitle)),
         React.createElement("g", { transform: `translate(0, ${boundsOffsetTop})` }, preparedSplit === null || preparedSplit === void 0 ? void 0 : preparedSplit.plots.map((plot, index) => {
             return React.createElement(PlotTitle, { key: `plot-${index}`, title: plot.title });
         })),
@@ -283,7 +283,7 @@ export const ChartInner = (props) => {
         React.createElement("svg", { ref: svgRef, width: width, height: height, 
             // We use onPointerMove here because onMouseMove works incorrectly when the zoom setting is enabled:
             // when starting to select an area, the tooltip remains in the position where the selection began
-            onPointerMove: throttledHandleMouseMove, onMouseLeave: handleMouseLeave, onTouchStart: throttledHandleTouchMove, onTouchMove: throttledHandleTouchMove, onClick: handleChartClick }, initialized ? chartContent : null),
+            onPointerMove: throttledHandlePointerMove, onPointerLeave: handlePointerLeave, onTouchStart: throttledHandleTouchMove, onTouchMove: throttledHandleTouchMove, onClick: handleChartClick }, initialized ? chartContent : null),
         React.createElement("div", { className: b('html-layer'), ref: setHtmlLayout, style: {
                 '--g-html-layout-transform': `translate(${boundsOffsetLeft}px, ${boundsOffsetTop}px)`,
             } }),

package/dist/cjs/components/ChartInner/useChartInnerHandlers.d.ts

@@ -23,8 +23,8 @@ type Props = {
 };
 export declare function useChartInnerHandlers(props: Props): {
     handleChartClick: (event: React.MouseEvent<SVGSVGElement>) => void;
-    handleMouseLeave: React.MouseEventHandler<SVGSVGElement>;
-    throttledHandleMouseMove: import("lodash").DebouncedFuncLeading<React.MouseEventHandler<SVGSVGElement>> | undefined;
-    throttledHandleTouchMove: import("lodash").DebouncedFuncLeading<React.TouchEventHandler<SVGSVGElement>> | undefined;
+    handlePointerLeave: React.PointerEventHandler<SVGSVGElement>;
+    throttledHandlePointerMove: import("lodash").DebouncedFuncLeading<React.PointerEventHandler<SVGSVGElement>>;
+    throttledHandleTouchMove: import("lodash").DebouncedFuncLeading<React.TouchEventHandler<SVGSVGElement>>;
 };
 export {};

package/dist/cjs/components/ChartInner/useChartInnerHandlers.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { pointer } from 'd3-selection';
 import get from 'lodash/get';
 import throttle from 'lodash/throttle';
-import { IS_TOUCH_ENABLED } from '../../core/constants';
 import { EventType } from '../../core/utils';
 import { getClosestPoints } from '../../core/utils/get-closest-data';
 import { getHoveredPlots } from '../../core/utils/get-hovered-plots';
@@ -47,18 +46,19 @@ export function useChartInnerHandlers(props) {
             hoveredPlotBands: plotBands,
         }, event);
     };
-    const handleMouseMove = (event) => {
+    const handlePointerMove = (event) => {
+        if (event.pointerType === 'touch') {
+            return;
+        }
         const [pointerX, pointerY] = pointer(event, svgContainer);
         handleMove([pointerX, pointerY], event);
     };
-    const throttledHandleMouseMove = IS_TOUCH_ENABLED
-        ? undefined
-        : throttle(handleMouseMove, tooltipThrottle);
-    const handleMouseLeave = (event) => {
+    const throttledHandlePointerMove = throttle(handlePointerMove, tooltipThrottle);
+    const handlePointerLeave = (event) => {
         if (tooltipPinned) {
             return;
         }
-        throttledHandleMouseMove === null || throttledHandleMouseMove === void 0 ? void 0 : throttledHandleMouseMove.cancel();
+        throttledHandlePointerMove.cancel();
         dispatcher.call(EventType.HOVER_SHAPE, {}, undefined);
         dispatcher.call(EventType.POINTERMOVE_CHART, {}, undefined, event);
     };
@@ -67,9 +67,7 @@ export function useChartInnerHandlers(props) {
         const [pointerX, pointerY] = pointer(touch, svgContainer);
         handleMove([pointerX, pointerY], event);
     };
-    const throttledHandleTouchMove = IS_TOUCH_ENABLED
-        ? throttle(handleTouchMove, tooltipThrottle)
-        : undefined;
+    const throttledHandleTouchMove = throttle(handleTouchMove, tooltipThrottle);
     const handleChartClick = (event) => {
         const [pointerX, pointerY] = pointer(event, svgContainer);
         const x = pointerX - boundsOffsetLeft;
@@ -116,8 +114,8 @@ export function useChartInnerHandlers(props) {
     };
     return {
         handleChartClick,
-        handleMouseLeave,
-        throttledHandleMouseMove,
+        handlePointerLeave,
+        throttledHandlePointerMove,
         throttledHandleTouchMove,
     };
 }

package/dist/cjs/components/ChartInner/useChartInnerProps.js

@@ -48,15 +48,19 @@ export function useChartInnerProps(props) {
         currentRunRef.current++;
         const currentRun = currentRunRef.current;
         (async function () {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             const chartDataChanged = !(previousChartData.current && isEqual(previousChartData.current, data));
-            const preparedTitle = await getPreparedTitle({ title: data.title, chartWidth: width });
+            const preparedTitle = await getPreparedTitle({
+                title: data.title,
+                chartWidth: width,
+                chartMargin: (_a = data.chart) === null || _a === void 0 ? void 0 : _a.margin,
+            });
             const preparedChart = getPreparedChart({
                 chart: data.chart,
                 seriesData: data.series.data,
                 preparedTitle,
             });
-            const colors = (_a = data.colors) !== null && _a !== void 0 ? _a : DEFAULT_PALETTE;
+            const colors = (_b = data.colors) !== null && _b !== void 0 ? _b : DEFAULT_PALETTE;
             const normalizedSeriesData = getSortedSeriesData({
                 seriesData: data.series.data,
                 xAxis: data.xAxis,
@@ -79,7 +83,7 @@ export function useChartInnerProps(props) {
                 });
             }
             else {
-                allPreparedSeries = (_c = (_b = prevStateValue.current) === null || _b === void 0 ? void 0 : _b.allPreparedSeries) !== null && _c !== void 0 ? _c : [];
+                allPreparedSeries = (_d = (_c = prevStateValue.current) === null || _c === void 0 ? void 0 : _c.allPreparedSeries) !== null && _d !== void 0 ? _d : [];
             }
             const activeLegendItems = selectedLegendItems !== null && selectedLegendItems !== void 0 ? selectedLegendItems : getActiveLegendItems(allPreparedSeries);
             const visiblePreparedSeries = getVisibleSeries({

package/dist/cjs/components/ChartInner/utils/title.d.ts

@@ -1,6 +1,7 @@
 import type { PreparedTitle } from '../../../hooks/types';
-import type { ChartData } from '../../../types';
-export declare const getPreparedTitle: ({ title, chartWidth, }: {
+import type { ChartData, ChartMargin } from '../../../types';
+export declare const getPreparedTitle: ({ title, chartWidth, chartMargin, }: {
     title: ChartData["title"];
     chartWidth: number;
+    chartMargin?: Partial<ChartMargin>;
 }) => Promise<PreparedTitle | undefined>;

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

@@ -2,25 +2,30 @@ import get from 'lodash/get';
 import { getTextSizeFn, getTextWithElipsis, wrapText } from '../../../core/utils';
 const DEFAULT_TITLE_FONT_SIZE = '15px';
 const DEFAULT_TITLE_MARGIN = 10;
-export const getPreparedTitle = async ({ title, chartWidth, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+export const getPreparedTitle = async ({ title, chartWidth, chartMargin, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    const chartMarginTop = (_a = chartMargin === null || chartMargin === void 0 ? void 0 : chartMargin.top) !== null && _a !== void 0 ? _a : 0;
+    const chartMarginLeft = (_b = chartMargin === null || chartMargin === void 0 ? void 0 : chartMargin.left) !== null && _b !== void 0 ? _b : 0;
+    const chartMarginRight = (_c = chartMargin === null || chartMargin === void 0 ? void 0 : chartMargin.right) !== null && _c !== void 0 ? _c : 0;
     const titleText = get(title, 'text');
     const titleStyle = {
-        fontSize: (_b = (_a = title === null || title === void 0 ? void 0 : title.style) === null || _a === void 0 ? void 0 : _a.fontSize) !== null && _b !== void 0 ? _b : DEFAULT_TITLE_FONT_SIZE,
-        fontWeight: (_d = (_c = title === null || title === void 0 ? void 0 : title.style) === null || _c === void 0 ? void 0 : _c.fontWeight) !== null && _d !== void 0 ? _d : 'var(--g-text-subheader-font-weight)',
-        fontColor: (_f = (_e = title === null || title === void 0 ? void 0 : title.style) === null || _e === void 0 ? void 0 : _e.fontColor) !== null && _f !== void 0 ? _f : 'var(--g-color-text-primary)',
+        fontSize: (_e = (_d = title === null || title === void 0 ? void 0 : title.style) === null || _d === void 0 ? void 0 : _d.fontSize) !== null && _e !== void 0 ? _e : DEFAULT_TITLE_FONT_SIZE,
+        fontWeight: (_g = (_f = title === null || title === void 0 ? void 0 : title.style) === null || _f === void 0 ? void 0 : _f.fontWeight) !== null && _g !== void 0 ? _g : 'var(--g-text-subheader-font-weight)',
+        fontColor: (_j = (_h = title === null || title === void 0 ? void 0 : title.style) === null || _h === void 0 ? void 0 : _h.fontColor) !== null && _j !== void 0 ? _j : 'var(--g-color-text-primary)',
     };
     if (!titleText) {
         return undefined;
     }
     const getTitleTextSize = getTextSizeFn({ style: titleStyle });
-    const maxRowCount = (_g = title === null || title === void 0 ? void 0 : title.maxRowCount) !== null && _g !== void 0 ? _g : 1;
+    const maxRowCount = (_k = title === null || title === void 0 ? void 0 : title.maxRowCount) !== null && _k !== void 0 ? _k : 1;
     const contentRows = [];
+    const usableWidth = chartWidth - chartMarginLeft - chartMarginRight;
+    const xCenter = chartMarginLeft + usableWidth / 2;
     if (maxRowCount > 1) {
         let titleTextRows = await wrapText({
             text: titleText,
             style: titleStyle,
-            width: chartWidth,
+            width: usableWidth,
             getTextSize: getTitleTextSize,
         });
         titleTextRows = titleTextRows.reduce((acc, row, index) => {
@@ -38,15 +43,15 @@ export const getPreparedTitle = async ({ title, chartWidth, }) => {
             if (i === titleTextRows.length - 1) {
                 textRowContent = await getTextWithElipsis({
                     text: textRowContent,
-                    maxWidth: chartWidth,
+                    maxWidth: usableWidth,
                     getTextWidth: async (s) => (await getTitleTextSize(s)).width,
                 });
             }
             const textRowSize = await getTitleTextSize(textRowContent);
             contentRows.push({
                 text: textRowContent,
-                x: 0,
-                y: textRow.y + textRowSize.hangingOffset,
+                x: xCenter,
+                y: textRow.y + textRowSize.hangingOffset + chartMarginTop,
                 size: textRowSize,
             });
         }
@@ -54,14 +59,14 @@ export const getPreparedTitle = async ({ title, chartWidth, }) => {
     else {
         const truncatedText = await getTextWithElipsis({
             text: titleText,
-            maxWidth: chartWidth,
+            maxWidth: usableWidth,
             getTextWidth: async (s) => (await getTitleTextSize(s)).width,
         });
         const textSize = await getTitleTextSize(truncatedText);
         contentRows.push({
             text: truncatedText,
-            x: 0,
-            y: textSize.hangingOffset,
+            x: xCenter,
+            y: textSize.hangingOffset + chartMarginTop,
             size: textSize,
         });
     }
@@ -71,7 +76,7 @@ export const getPreparedTitle = async ({ title, chartWidth, }) => {
         text: titleText,
         style: titleStyle,
         height: titleHeight,
-        margin: (_h = title === null || title === void 0 ? void 0 : title.margin) !== null && _h !== void 0 ? _h : DEFAULT_TITLE_MARGIN,
+        margin: (_l = title === null || title === void 0 ? void 0 : title.margin) !== null && _l !== void 0 ? _l : DEFAULT_TITLE_MARGIN,
         qa: title === null || title === void 0 ? void 0 : title.qa,
         contentRows,
     };

package/dist/cjs/components/Title/index.d.ts

@@ -1,7 +1,5 @@
 import React from 'react';
 import type { PreparedTitle } from '../../hooks';
-type Props = PreparedTitle & {
-    chartWidth: number;
-};
+type Props = PreparedTitle;
 export declare const Title: (props: Props) => React.JSX.Element;
 export {};

package/dist/cjs/components/Title/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
 export const Title = (props) => {
-    const { chartWidth, style, qa, contentRows } = props;
+    const { style, qa, contentRows } = props;
     return (React.createElement("text", { dominantBaseline: "hanging", textAnchor: "middle", style: {
             fill: style === null || style === void 0 ? void 0 : style.fontColor,
             fontSize: style === null || style === void 0 ? void 0 : style.fontSize,
             fontWeight: style === null || style === void 0 ? void 0 : style.fontWeight,
-        }, "data-qa": qa }, contentRows.map((row, i) => (React.createElement("tspan", { key: i, x: chartWidth / 2, y: row.y, dominantBaseline: "hanging", dangerouslySetInnerHTML: { __html: row.text } })))));
+        }, "data-qa": qa }, contentRows.map((row, i) => (React.createElement("tspan", { key: i, x: row.x, y: row.y, dominantBaseline: "hanging", dangerouslySetInnerHTML: { __html: row.text } })))));
 };

package/dist/cjs/core/constants/index.d.ts

@@ -4,7 +4,6 @@ export * from './datetime';
 export * from './defaults';
 export * from './layout-algorithms';
 export * from './line-styles';
-export * from './misc';
 export * from './palette';
 export * from './symbol-types';
 export * from './tooltip';

package/dist/cjs/core/constants/index.js

@@ -4,7 +4,6 @@ export * from './datetime';
 export * from './defaults';
 export * from './layout-algorithms';
 export * from './line-styles';
-export * from './misc';
 export * from './palette';
 export * from './symbol-types';
 export * from './tooltip';

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

@@ -3,7 +3,7 @@ export declare function getLeftPosition(label: LabelData): number;
 export declare function getOverlappingByX(rect1: LabelData | HtmlItem, rect2: LabelData | HtmlItem, gap?: number): number;
 export declare function getOverlappingByY(rect1: LabelData | HtmlItem, rect2: LabelData | HtmlItem, gap?: number): number;
 export declare function isLabelsOverlapping<T extends LabelData | HtmlItem>(label1: T, label2: T, padding?: number): boolean;
-export declare function filterOverlappingLabels<T extends LabelData | HtmlItem>(labels: T[]): T[];
+export declare function filterOverlappingLabels<T extends LabelData | HtmlItem>(labels: T[], renderedSvgLabels?: T[]): T[];
 export declare function getSvgLabelConstraintedPosition(args: {
     boundsHeight: number;
     boundsWidth: number;

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

@@ -32,11 +32,12 @@ export function getOverlappingByY(rect1, rect2, gap = 0) {
 export function isLabelsOverlapping(label1, label2, padding = 0) {
     return Boolean(getOverlappingByX(label1, label2, padding) && getOverlappingByY(label1, label2, padding));
 }
-export function filterOverlappingLabels(labels) {
+export function filterOverlappingLabels(labels, renderedSvgLabels) {
     const result = [];
     const sorted = sortBy(labels, (d) => d.y, (d) => ('textAnchor' in d ? getLeftPosition(d) : d.x));
     sorted.forEach((label) => {
-        if (!result.some((l) => isLabelsOverlapping(label, l))) {
+        if (!(renderedSvgLabels === null || renderedSvgLabels === void 0 ? void 0 : renderedSvgLabels.some((l) => isLabelsOverlapping(label, l))) &&
+            !result.some((l) => isLabelsOverlapping(label, l))) {
             result.push(label);
         }
     });

package/dist/cjs/hooks/useSeries/index.js

@@ -13,14 +13,20 @@ export const getVisibleSeries = ({ preparedSeries, activeLegendItems, }) => {
 export const getPreparedSeries = async ({ seriesData, seriesOptions, colors, preparedLegend, }) => {
     const seriesNames = getSeriesNames(seriesData);
     const colorScale = scaleOrdinal(seriesNames, colors);
-    const groupedSeries = group(seriesData, (item) => item.type);
+    const groupedSeries = group(seriesData, (item, index) => {
+        if (item.type === 'line') {
+            return `${item.type}_${index}`;
+        }
+        return item.type;
+    });
     const acc = [];
     if (!preparedLegend) {
         return acc;
     }
     const list = Array.from(groupedSeries);
     for (let i = 0; i < list.length; i++) {
-        const [seriesType, seriesList] = list[i];
+        const [_groupId, seriesList] = list[i];
+        const seriesType = seriesList[0].type;
         acc.push(...(await prepareSeries({
             type: seriesType,
             series: seriesList,

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

@@ -60,7 +60,7 @@ export const AreaSeriesShapes = (args) => {
             .attr('fill', (d) => d.color)
             .attr('opacity', (d) => d.opacity);
         let dataLabels = preparedData.reduce((acc, d) => {
-            return acc.concat(d.labels);
+            return acc.concat(d.svgLabels);
         }, []);
         if (!allowOverlapDataLabels) {
             dataLabels = filterOverlappingLabels(dataLabels);
@@ -191,7 +191,7 @@ export const AreaSeriesShapes = (args) => {
         };
     }, [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/dist/cjs/hooks/useShapes/area/prepare-data.js

@@ -300,7 +300,7 @@ export const prepareAreaData = async (args) => {
                 seriesStackData.push({
                     points,
                     markers,
-                    labels: [],
+                    svgLabels: [],
                     color: s.color,
                     opacity: s.opacity,
                     width: s.lineWidth,
@@ -308,7 +308,7 @@ export const prepareAreaData = async (args) => {
                     hovered: false,
                     active: true,
                     id: s.id,
-                    htmlElements: [],
+                    htmlLabels: [],
                 });
             }
             for (let itemIndex = 0; itemIndex < seriesStackData.length; itemIndex++) {
@@ -323,8 +323,8 @@ export const prepareAreaData = async (args) => {
                         yAxisTop: itemYAxisTop,
                         isOutsideBounds,
                     });
-                    item.labels.push(...labelsData.svgLabels);
-                    item.htmlElements.push(...labelsData.htmlLabels);
+                    item.svgLabels.push(...labelsData.svgLabels);
+                    item.htmlLabels.push(...labelsData.htmlLabels);
                 }
             }
             result.push(...seriesStackData);

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

@@ -27,6 +27,6 @@ export type PreparedAreaData = {
     series: PreparedAreaSeries;
     hovered: boolean;
     active: boolean;
-    labels: LabelData[];
-    htmlElements: HtmlItem[];
+    svgLabels: LabelData[];
+    htmlLabels: HtmlItem[];
 };

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

@@ -49,7 +49,7 @@ export const BarXSeriesShapes = (args) => {
             .attr('fill', (d) => d.data.color || d.series.color)
             .attr('opacity', (d) => d.opacity)
             .attr('cursor', (d) => d.series.cursor);
-        let dataLabels = preparedData.map((d) => d.label).filter(Boolean);
+        let dataLabels = preparedData.map((d) => d.svgLabels).flat();
         if (!allowOverlapDataLabels) {
             dataLabels = filterOverlappingLabels(dataLabels);
         }
@@ -114,7 +114,7 @@ export const BarXSeriesShapes = (args) => {
         };
     }, [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/dist/cjs/hooks/useShapes/bar-x/prepare-data.js

@@ -174,7 +174,8 @@ export const prepareBarXData = async (args) => {
                         opacity: get(yValue.data, 'opacity', null),
                         data: yValue.data,
                         series: yValue.series,
-                        htmlElements: [],
+                        htmlLabels: [],
+                        svgLabels: [],
                         isLastStackItem,
                     };
                     stackItems.push(barData);
@@ -211,17 +212,19 @@ export const prepareBarXData = async (args) => {
             !isRangeSlider &&
             (!isBarOutsideBounds || isZeroValue)) {
             const label = await getLabelData(barData, xMax);
-            if (barData.series.dataLabels.html && label) {
-                barData.htmlElements.push({
-                    x: label.x,
-                    y: label.y,
-                    content: label.text,
-                    size: label.size,
-                    style: label.style,
-                });
-            }
-            else {
-                barData.label = label;
+            if (label) {
+                if (barData.series.dataLabels.html) {
+                    barData.htmlLabels.push({
+                        x: label.x,
+                        y: label.y,
+                        content: label.text,
+                        size: label.size,
+                        style: label.style,
+                    });
+                }
+                else {
+                    barData.svgLabels.push(label);
+                }
             }
         }
     }

package/dist/cjs/hooks/useShapes/bar-x/types.d.ts

@@ -7,8 +7,8 @@ export type PreparedBarXData = Omit<TooltipDataChunkBarX, 'series'> & {
     height: number;
     opacity: number | null;
     series: PreparedBarXSeries;
-    label?: LabelData;
-    htmlElements: HtmlItem[];
+    svgLabels: LabelData[];
+    htmlLabels: HtmlItem[];
     isLastStackItem: boolean;
     /**
      * the utility field for storing the original height (for recalculations, etc.)

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

@@ -33,11 +33,20 @@ function shouldUseClipPathId(seriesType, clipPathBySeriesType) {
 export async function getShapes(args) {
     const { boundsWidth, boundsHeight, clipPathId, clipPathBySeriesType, dispatcher, htmlLayout, isOutsideBounds = IS_OUTSIDE_BOUNDS, isRangeSlider, series, seriesOptions, split, xAxis, xScale, yAxis, yScale, zoomState, } = args;
     const visibleSeries = getOnlyVisibleSeries(series);
-    const groupedSeries = group(visibleSeries, (item) => item.type);
+    const groupedSeries = group(visibleSeries, (item) => {
+        if (item.type === 'line') {
+            return item.id;
+        }
+        return item.type;
+    });
     const shapesData = [];
     const shapes = [];
-    await Promise.all(Array.from(groupedSeries).map(async (item, index) => {
-        const [seriesType, chartSeries] = item;
+    const layers = [];
+    const groupedSeriesItems = Array.from(groupedSeries);
+    for (let index = groupedSeriesItems.length - 1; index >= 0; index--) {
+        const item = groupedSeriesItems[index];
+        const [groupId, chartSeries] = item;
+        const seriesType = chartSeries[0].type;
         switch (seriesType) {
             case SERIES_TYPE.BarX: {
                 if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
@@ -54,6 +63,7 @@ export async function getShapes(args) {
                     });
                     shapes[index] = (React.createElement(BarXSeriesShapes, { key: SERIES_TYPE.BarX, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
                     shapesData.splice(index, 0, ...preparedData);
+                    layers.push(...preparedData);
                 }
                 break;
             }
@@ -100,14 +110,16 @@ export async function getShapes(args) {
                         split,
                         isOutsideBounds,
                         isRangeSlider,
+                        otherLayers: layers,
                     });
                     const resultClipPathId = getSeriesClipPathId({
                         clipPathId,
                         yAxis,
                         zoomState,
                     });
-                    shapes[index] = (React.createElement(LineSeriesShapes, { key: SERIES_TYPE.Line, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: resultClipPathId }));
+                    shapes[index] = (React.createElement(LineSeriesShapes, { key: groupId, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: resultClipPathId }));
                     shapesData.splice(index, 0, ...preparedData);
+                    layers.push(...preparedData);
                 }
                 break;
             }
@@ -125,6 +137,7 @@ export async function getShapes(args) {
                     });
                     shapes[index] = (React.createElement(AreaSeriesShapes, { key: SERIES_TYPE.Area, dispatcher: dispatcher, seriesOptions: seriesOptions, preparedData: preparedData, htmlLayout: htmlLayout, clipPathId: clipPathId }));
                     shapesData.splice(index, 0, ...preparedData);
+                    layers.push(...preparedData);
                 }
                 break;
             }
@@ -217,7 +230,7 @@ export async function getShapes(args) {
                 });
             }
         }
-    }));
+    }
     return { shapes, shapesData };
 }
 export const useShapes = (args) => {

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

@@ -3,7 +3,7 @@ import { color } from 'd3-color';
 import { select } from 'd3-selection';
 import { line as lineGenerator } from 'd3-shape';
 import get from 'lodash/get';
-import { filterOverlappingLabels, getLineDashArray } from '../../../core/utils';
+import { getLineDashArray } from '../../../core/utils';
 import { block } from '../../../utils';
 import { HtmlLayer } from '../HtmlLayer';
 import { getMarkerHaloVisibility, getMarkerVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../marker';
@@ -15,9 +15,6 @@ export const LineSeriesShapes = (args) => {
     const plotRef = React.useRef(null);
     const markersRef = React.useRef(null);
     const hoverMarkersRef = 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(() => {
         if (!plotRef.current || !markersRef.current) {
             return () => { };
@@ -46,12 +43,9 @@ export const LineSeriesShapes = (args) => {
             .attr('stroke-dasharray', (d) => getLineDashArray(d.dashStyle, d.lineWidth))
             .attr('opacity', (d) => d.opacity)
             .attr('cursor', (d) => d.series.cursor);
-        let dataLabels = preparedData.reduce((acc, d) => {
-            return acc.concat(d.labels);
+        const dataLabels = preparedData.reduce((acc, d) => {
+            return acc.concat(d.svgLabels);
         }, []);
-        if (!allowOverlapDataLabels) {
-            dataLabels = filterOverlappingLabels(dataLabels);
-        }
         const labelsSelection = plotSvgElement
             .selectAll('text')
             .data(dataLabels)
@@ -175,14 +169,11 @@ export const LineSeriesShapes = (args) => {
         return () => {
             dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on('hover-shape.line', null);
         };
-    }, [allowOverlapDataLabels, dispatcher, preparedData, seriesOptions]);
+    }, [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]);
+        const items = preparedData.map((d) => d === null || d === void 0 ? void 0 : d.htmlLabels).flat();
+        return { htmlElements: items };
+    }, [preparedData]);
     return (React.createElement(React.Fragment, null,
         React.createElement("g", { ref: plotRef, className: b(), clipPath: `url(#${clipPathId})` }),
         React.createElement("g", { ref: markersRef }),

package/dist/cjs/hooks/useShapes/line/prepare-data.d.ts

@@ -1,5 +1,6 @@
 import type { PreparedSplit } from '../../../core/layout/split-types';
 import type { ChartScale } from '../../../core/scales/types';
+import type { ShapeDataWithLabels } from '../../../types';
 import type { PreparedXAxis, PreparedYAxis } from '../../useAxis/types';
 import type { PreparedLineSeries } from '../../useSeries/types';
 import type { PreparedLineData } from './types';
@@ -12,4 +13,5 @@ export declare const prepareLineData: (args: {
     split: PreparedSplit;
     isOutsideBounds: (x: number, y: number) => boolean;
     isRangeSlider?: boolean;
+    otherLayers: ShapeDataWithLabels[];
 }) => Promise<PreparedLineData[]>;

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

@@ -1,4 +1,4 @@
-import { getLabelsSize, getTextSizeFn } from '../../../core/utils';
+import { filterOverlappingLabels, getLabelsSize, getTextSizeFn } from '../../../core/utils';
 import { getFormattedValue } from '../../../core/utils/format';
 import { getXValue, getYValue } from '../utils';
 async function getHtmlLabel(point, series, xMax) {
@@ -16,7 +16,7 @@ async function getHtmlLabel(point, series, xMax) {
 }
 export const prepareLineData = async (args) => {
     var _a, _b, _c, _d;
-    const { series, xAxis, yAxis, xScale, yScale, split, isOutsideBounds, isRangeSlider } = args;
+    const { series, xAxis, yAxis, xScale, yScale, split, isOutsideBounds, isRangeSlider, otherLayers, } = args;
     const [_xMin, xRangeMax] = xScale.range();
     const xMax = xRangeMax;
     const acc = [];
@@ -44,8 +44,8 @@ export const prepareLineData = async (args) => {
                 series: s,
             };
         });
-        const htmlElements = [];
-        const labels = [];
+        let htmlElements = [];
+        let svgLabels = [];
         if (s.dataLabels.enabled && !isRangeSlider) {
             if (s.dataLabels.html) {
                 const list = await Promise.all(points.reduce((result, p) => {
@@ -83,11 +83,15 @@ export const prepareLineData = async (args) => {
                             series: s,
                             active: true,
                         };
-                        labels.push(labelData);
+                        svgLabels.push(labelData);
                     }
                 }
             }
         }
+        if (!s.dataLabels.allowOverlap) {
+            svgLabels = filterOverlappingLabels(svgLabels, otherLayers.map((l) => l.svgLabels).flat());
+            htmlElements = filterOverlappingLabels(htmlElements, otherLayers.map((l) => l.htmlLabels).flat());
+        }
         let markers = [];
         const hasPerPointNormalMarkers = s.data.some((d) => { var _a, _b, _c; return (_c = (_b = (_a = d.marker) === null || _a === void 0 ? void 0 : _a.states) === null || _b === void 0 ? void 0 : _b.normal) === null || _c === void 0 ? void 0 : _c.enabled; });
         if (s.marker.states.normal.enabled || hasPerPointNormalMarkers) {
@@ -111,12 +115,12 @@ export const prepareLineData = async (args) => {
         const result = {
             points,
             markers,
-            labels,
+            svgLabels: svgLabels,
             series: s,
             hovered: false,
             active: true,
             id: s.id,
-            htmlElements,
+            htmlLabels: htmlElements,
             color: s.color,
             lineWidth: (_c = (isRangeSlider ? s.rangeSlider.lineWidth : undefined)) !== null && _c !== void 0 ? _c : s.lineWidth,
             dashStyle: s.dashStyle,