@gravity-ui/charts 1.43.0 → 1.44.0

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

@@ -30,6 +30,7 @@ export * from './chart/radar';
 export * from './chart/heatmap';
 export * from './chart/funnel';
 export * from './chart/brush';
+export * from './chart/x-range';
 export interface ChartData<T = MeaningfulAny> {
     /**
      * General options for the chart.

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

@@ -22,3 +22,4 @@ export * from './chart/radar';
 export * from './chart/heatmap';
 export * from './chart/funnel';
 export * from './chart/brush';
+export * from './chart/x-range';

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

@@ -12,7 +12,15 @@ function getTicksCount(args) {
     if (series) {
         const xDataSet = new Set();
         series === null || series === void 0 ? void 0 : series.forEach((item) => {
-            if (isSeriesWithNumericalXValues(item)) {
+            if (item.type === 'x-range') {
+                item.data.forEach((d) => {
+                    if (d.x0 !== null && d.x1 !== null) {
+                        xDataSet.add(d.x0);
+                        xDataSet.add(d.x1);
+                    }
+                });
+            }
+            else if (isSeriesWithNumericalXValues(item)) {
                 item.data.forEach((data) => {
                     xDataSet.add(data.x);
                 });

package/dist/esm/core/utils/color.js

@@ -22,6 +22,12 @@ export function getDomainForContinuousColorScale(args) {
                 acc.push(...s.data.map((d) => Number(d.y)));
                 break;
             }
+            case 'x-range': {
+                // Use bar duration (x1 - x0) as the color domain value so that
+                // longer bars can be visually distinguished by color intensity.
+                acc.push(...s.data.map((d) => Math.abs(Number(d.x1) - Number(d.x0))));
+                break;
+            }
             default: {
                 throw Error(`The method for calculation a domain for a continuous color scale for the "${s.type}" series is not defined`);
             }

package/dist/esm/core/utils/common.js

@@ -57,6 +57,16 @@ export const getDomainDataXBySeries = (series) => {
                 acc.push(...getDomainDataForStackedSeries(seriesList, 'y', 'x'));
                 break;
             }
+            case 'x-range': {
+                seriesList.forEach((s) => {
+                    s.data.forEach((d) => {
+                        if (!isNil(d.x0) && !isNil(d.x1)) {
+                            acc.push(d.x0, d.x1);
+                        }
+                    });
+                });
+                break;
+            }
             default: {
                 seriesList.filter(isSeriesWithNumericalXValues).forEach((s) => {
                     acc.push(...s.data.map((d) => d.x));

package/dist/esm/core/utils/get-closest-data.js

@@ -288,6 +288,25 @@ export function getClosestPoints(args) {
                 }
                 break;
             }
+            case 'x-range': {
+                const data = list;
+                const pointsInXRange = data.filter((d) => pointerX >= d.x &&
+                    pointerX <= d.x + d.width &&
+                    pointerY >= d.y &&
+                    pointerY <= d.y + d.height);
+                if (pointsInXRange.length === 0) {
+                    break;
+                }
+                const closestByX = pointsInXRange.length === 1
+                    ? pointsInXRange[0]
+                    : sort(pointsInXRange, (d) => Math.abs(d.x + d.width / 2 - pointerX))[0];
+                result.push(...pointsInXRange.map((d) => ({
+                    data: d.data,
+                    series: d.series,
+                    closest: d === closestByX,
+                })));
+                break;
+            }
         }
     });
     if (closestPointsByXValue.length) {

package/dist/esm/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/esm/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/esm/core/validation/index.js

@@ -265,6 +265,18 @@ function validateStacking({ series }) {
         });
     }
 }
+function validateStackingAreaNullMode({ series }) {
+    const availableStackingValues = ['normal', 'percent'];
+    const invalid = series.find((s) => s.type === 'area' &&
+        availableStackingValues.includes(s.stacking) &&
+        s.nullMode === 'connect');
+    if (invalid) {
+        throw new ChartError({
+            code: CHART_ERROR_CODE.INVALID_DATA,
+            message: i18n('error', 'label_stacking-area-connect-null-mode'),
+        });
+    }
+}
 function validateTreemapSeries({ series }) {
     const parentIds = {};
     series.data.forEach((d) => {
@@ -379,6 +391,7 @@ export function validateData(data) {
     }
     validateAxes({ xAxis: data.xAxis, yAxis: data.yAxis });
     validateTooltip({ tooltip: data.tooltip });
+    validateStackingAreaNullMode({ series: data.series.data });
     if (data.series.data.some((s) => isEmpty(s.data))) {
         throw new ChartError({
             code: CHART_ERROR_CODE.INVALID_DATA,

package/dist/esm/core/zoom/zoom.js

@@ -69,13 +69,30 @@ export function getZoomedSeriesData(args) {
             prevPointInRange = currentPointInRange;
             if (zoomState.x) {
                 const [xMin, xMax] = zoomState.x;
-                const x = 'x' in point ? ((_a = point.x) !== null && _a !== void 0 ? _a : undefined) : undefined;
-                inXRange = isValueInRange({
-                    axis: xAxis,
-                    value: x,
-                    min: xMin,
-                    max: xMax,
-                });
+                if ('x0' in point && 'x1' in point) {
+                    const isStartInRange = isValueInRange({
+                        axis: xAxis,
+                        value: point.x0,
+                        min: xMin,
+                        max: xMax,
+                    });
+                    const isEndInRange = isValueInRange({
+                        axis: xAxis,
+                        value: point.x1,
+                        min: xMin,
+                        max: xMax,
+                    });
+                    inXRange = isStartInRange || isEndInRange;
+                }
+                else {
+                    const x = 'x' in point ? ((_a = point.x) !== null && _a !== void 0 ? _a : undefined) : undefined;
+                    inXRange = isValueInRange({
+                        axis: xAxis,
+                        value: x,
+                        min: xMin,
+                        max: xMax,
+                    });
+                }
             }
             if (zoomState.y) {
                 const yAxisIndex = 'yAxis' in seriesItem && typeof seriesItem.yAxis === 'number'

package/dist/esm/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/esm/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/esm/hooks/useShapes/area/prepare-data.js

@@ -1,4 +1,4 @@
-import { group, min } from 'd3-array';
+import { group, min, sort } from 'd3-array';
 import isNil from 'lodash/isNil';
 import round from 'lodash/round';
 import { getDataCategoryValue, getLabelsSize, getTextSizeFn } from '../../../core/utils';
@@ -27,7 +27,7 @@ function getXValues(series, xAxis, xScale) {
             return acc;
         }, []);
     }
-    return Array.from(xValues);
+    return sort(Array.from(xValues), (d) => d[1]);
 }
 async function prepareDataLabels({ series, points, xMax, yAxisTop, isOutsideBounds, }) {
     var _a;
@@ -166,13 +166,14 @@ export const prepareAreaData = async (args) => {
                     return m.set(key, d);
                 }, new Map());
                 const points = xValues.reduce((pointsAcc, [x, xValue], index) => {
-                    var _a, _b, _c, _d, _e, _f, _g, _h;
-                    const d = (_a = seriesData.get(x)) !== null && _a !== void 0 ? _a : {
+                    var _a, _b, _c, _d, _e, _f, _g;
+                    const rawData = seriesData.get(x);
+                    const d = rawData !== null && rawData !== void 0 ? rawData : {
                         x,
                         y: 0,
                     };
-                    let yDataValue = (_b = d.y) !== null && _b !== void 0 ? _b : null;
-                    if (s.nullMode === 'connect' && yDataValue === null) {
+                    let yDataValue = (_a = d.y) !== null && _a !== void 0 ? _a : null;
+                    if (s.nullMode === 'connect' && (yDataValue === null || !rawData)) {
                         return pointsAcc;
                     }
                     if (yDataValue && isPercentStacking) {
@@ -187,13 +188,13 @@ export const prepareAreaData = async (args) => {
                     });
                     if (typeof yDataValue === 'number' && yValue !== null) {
                         yValue = round(yValue, 2);
-                        const prevPoint = seriesData.get((_c = xValues[index - 1]) === null || _c === void 0 ? void 0 : _c[0]);
-                        const nextPoint = seriesData.get((_d = xValues[index + 1]) === null || _d === void 0 ? void 0 : _d[0]);
+                        const prevPoint = seriesData.get((_b = xValues[index - 1]) === null || _b === void 0 ? void 0 : _b[0]);
+                        const nextPoint = seriesData.get((_c = xValues[index + 1]) === null || _c === void 0 ? void 0 : _c[0]);
                         const currentPointStackHeight = Math.abs(yMin - yValue);
                         if (yDataValue >= 0) {
                             const positiveStackHeights = positiveStackValues.get(x);
-                            let prevSectionStackHeight = (_e = positiveStackHeights === null || positiveStackHeights === void 0 ? void 0 : positiveStackHeights.prev) !== null && _e !== void 0 ? _e : 0;
-                            let nextSectionStackHeight = (_f = positiveStackHeights === null || positiveStackHeights === void 0 ? void 0 : positiveStackHeights.next) !== null && _f !== void 0 ? _f : 0;
+                            let prevSectionStackHeight = (_d = positiveStackHeights === null || positiveStackHeights === void 0 ? void 0 : positiveStackHeights.prev) !== null && _d !== void 0 ? _d : 0;
+                            let nextSectionStackHeight = (_e = positiveStackHeights === null || positiveStackHeights === void 0 ? void 0 : positiveStackHeights.next) !== null && _e !== void 0 ? _e : 0;
                             const point = {
                                 y0: yAxisTop + yMin - prevSectionStackHeight,
                                 x: xValue,
@@ -219,11 +220,11 @@ export const prepareAreaData = async (args) => {
                                     point2.y = newYValue;
                                 }
                             }
-                            if ((prevPoint === null || prevPoint === void 0 ? void 0 : prevPoint.y) !== null) {
+                            if ((prevPoint === null || prevPoint === void 0 ? void 0 : prevPoint.y) !== null || s.nullMode === 'zero') {
                                 prevSectionStackHeight =
                                     prevSectionStackHeight + currentPointStackHeight;
                             }
-                            if ((nextPoint === null || nextPoint === void 0 ? void 0 : nextPoint.y) !== null) {
+                            if ((nextPoint === null || nextPoint === void 0 ? void 0 : nextPoint.y) !== null || s.nullMode === 'zero') {
                                 nextSectionStackHeight =
                                     nextSectionStackHeight + currentPointStackHeight;
                             }
@@ -234,8 +235,8 @@ export const prepareAreaData = async (args) => {
                         }
                         else {
                             const negativeStackHeights = negativeStackValues.get(x);
-                            let prevSectionStackHeight = (_g = negativeStackHeights === null || negativeStackHeights === void 0 ? void 0 : negativeStackHeights.prev) !== null && _g !== void 0 ? _g : 0;
-                            let nextSectionStackHeight = (_h = negativeStackHeights === null || negativeStackHeights === void 0 ? void 0 : negativeStackHeights.next) !== null && _h !== void 0 ? _h : 0;
+                            let prevSectionStackHeight = (_f = negativeStackHeights === null || negativeStackHeights === void 0 ? void 0 : negativeStackHeights.prev) !== null && _f !== void 0 ? _f : 0;
+                            let nextSectionStackHeight = (_g = negativeStackHeights === null || negativeStackHeights === void 0 ? void 0 : negativeStackHeights.next) !== null && _g !== void 0 ? _g : 0;
                             pointsAcc.push({
                                 y0: yAxisTop + yMin + prevSectionStackHeight,
                                 x: xValue,
@@ -300,7 +301,7 @@ export const prepareAreaData = async (args) => {
                 seriesStackData.push({
                     points,
                     markers,
-                    labels: [],
+                    svgLabels: [],
                     color: s.color,
                     opacity: s.opacity,
                     width: s.lineWidth,
@@ -308,7 +309,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 +324,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/esm/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/esm/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/esm/hooks/useShapes/bar-x/prepare-data.js

@@ -110,8 +110,8 @@ export const prepareBarXData = async (args) => {
             const currentGroupWidth = rectWidth * stacks.length + rectGap * (stacks.length - 1);
             for (let groupItemIndex = 0; groupItemIndex < stacks.length; groupItemIndex++) {
                 const yValues = stacks[groupItemIndex];
-                let positiveStackHeight = 0;
-                let negativeStackHeight = 0;
+                let positiveStackSum = 0;
+                let negativeStackSum = 0;
                 const stackItems = [];
                 let sortedData = yValues;
                 if (sortKey) {
@@ -144,7 +144,6 @@ export const prepareBarXData = async (args) => {
                     }
                     const x = xCenter - currentGroupWidth / 2 + (rectWidth + rectGap) * groupItemIndex;
                     const yDataValue = ((_d = yValue.data.y) !== null && _d !== void 0 ? _d : 0);
-                    const y = seriesYScale(yDataValue);
                     let base = 0;
                     if (seriesYAxis.type === 'logarithmic') {
                         const domainData = seriesYScale.domain();
@@ -155,7 +154,22 @@ export const prepareBarXData = async (args) => {
                         base = seriesYScale(0);
                     }
                     const isLastStackItem = yValueIndex === sortedData.length - 1;
-                    const height = Math.abs(base - y);
+                    let height;
+                    let barPositionY;
+                    if (yDataValue > 0) {
+                        const newSum = positiveStackSum + yDataValue;
+                        const topPixel = seriesYScale(newSum);
+                        const bottomPixel = positiveStackSum === 0 ? base : seriesYScale(positiveStackSum);
+                        height = Math.abs(bottomPixel - topPixel);
+                        barPositionY = yAxisTop + topPixel;
+                    }
+                    else {
+                        const newSum = negativeStackSum + yDataValue;
+                        const bottomPixel = negativeStackSum === 0 ? base : seriesYScale(negativeStackSum);
+                        const topPixel = seriesYScale(newSum);
+                        height = Math.abs(bottomPixel - topPixel);
+                        barPositionY = yAxisTop + bottomPixel;
+                    }
                     let shapeHeight = height - (stackItems.length ? stackGap : 0);
                     if (shapeHeight < 0) {
                         shapeHeight = height;
@@ -165,28 +179,28 @@ export const prepareBarXData = async (args) => {
                     }
                     const barData = {
                         x,
-                        y: yDataValue > 0
-                            ? yAxisTop + y - positiveStackHeight
-                            : yAxisTop + base + negativeStackHeight,
+                        y: barPositionY,
                         width: rectWidth,
                         height: shapeHeight,
                         _height: height,
                         opacity: get(yValue.data, 'opacity', null),
                         data: yValue.data,
                         series: yValue.series,
-                        htmlElements: [],
+                        htmlLabels: [],
+                        svgLabels: [],
                         isLastStackItem,
                     };
                     stackItems.push(barData);
                     if (yDataValue > 0) {
-                        positiveStackHeight += height;
+                        positiveStackSum += yDataValue;
                     }
                     else {
-                        negativeStackHeight += height;
+                        negativeStackSum += yDataValue;
                     }
                 }
                 if (series.some((s) => s.stacking === 'percent')) {
                     let acc = 0;
+                    const positiveStackHeight = stackItems.reduce((sum, item) => sum + item._height, 0);
                     const ratio = plotHeight / positiveStackHeight;
                     stackItems.forEach((item) => {
                         item.height = item._height * ratio;
@@ -211,17 +225,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/esm/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/esm/hooks/useShapes/index.d.ts

@@ -19,8 +19,9 @@ import type { PreparedScatterData } from './scatter/types';
 export type { PreparedBarXData } from './bar-x';
 export type { PreparedScatterData } from './scatter/types';
 import type { PreparedWaterfallData } from './waterfall';
+import type { PreparedXRangeData } from './x-range';
 import './styles.css';
-export type ShapeData = PreparedBarXData | PreparedBarYData | PreparedScatterData | PreparedLineData | PreparedPieData | PreparedAreaData | PreparedWaterfallData | PreparedSankeyData | PreparedRadarData | PreparedHeatmapData | PreparedFunnelData;
+export type ShapeData = PreparedBarXData | PreparedBarYData | PreparedScatterData | PreparedLineData | PreparedPieData | PreparedAreaData | PreparedWaterfallData | PreparedSankeyData | PreparedRadarData | PreparedHeatmapData | PreparedFunnelData | PreparedXRangeData;
 export type ClipPathBySeriesType = Partial<Record<SeriesType, boolean>>;
 type Args = {
     boundsWidth: number;

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

@@ -22,6 +22,7 @@ import { TreemapSeriesShape } from './treemap';
 import { prepareTreemapData } from './treemap/prepare-data';
 import { getSeriesClipPathId } from './utils';
 import { WaterfallSeriesShapes, prepareWaterfallData } from './waterfall';
+import { XRangeSeriesShapes, prepareXRangeData } from './x-range';
 import './styles.css';
 function IS_OUTSIDE_BOUNDS() {
     return false;
@@ -33,11 +34,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 +64,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 +111,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 +138,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;
             }
@@ -211,13 +225,29 @@ export async function getShapes(args) {
                 shapesData.splice(index, 0, preparedData);
                 break;
             }
+            case SERIES_TYPE.XRange: {
+                if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
+                    const preparedData = await prepareXRangeData({
+                        series: chartSeries,
+                        xAxis,
+                        xScale,
+                        yAxis,
+                        yScale,
+                        boundsWidth,
+                        isRangeSlider,
+                    });
+                    shapes[index] = (React.createElement(XRangeSeriesShapes, { key: SERIES_TYPE.XRange, dispatcher: dispatcher, preparedData: preparedData, seriesOptions: seriesOptions, htmlLayout: htmlLayout, clipPathId: clipPathId }));
+                    shapesData.splice(index, 0, ...preparedData);
+                }
+                break;
+            }
             default: {
                 throw new ChartError({
                     message: `The display method is not defined for a series with type "${seriesType}"`,
                 });
             }
         }
-    }));
+    }
     return { shapes, shapesData };
 }
 export const useShapes = (args) => {

package/dist/esm/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 }),