@gravity-ui/charts 1.27.0 → 1.27.2

package/dist/cjs/components/AxisX/prepare-axis-data.d.ts

@@ -1,10 +1,12 @@
-import type { ChartScale, PreparedAxis } from '../../hooks';
+import type { ChartScale, PreparedAxis, PreparedSplit } from '../../hooks';
 import type { AxisXData } from './types';
-export declare function prepareXAxisData({ axis, scale, boundsWidth, boundsOffsetLeft, boundsOffsetRight, height, }: {
+export declare function prepareXAxisData({ axis, yAxis, scale, boundsWidth, boundsOffsetLeft, boundsOffsetRight, height, split, }: {
     axis: PreparedAxis;
+    yAxis: PreparedAxis[];
     scale: ChartScale;
     boundsWidth: number;
     boundsOffsetLeft: number;
     boundsOffsetRight: number;
     height: number;
-}): Promise<AxisXData>;
+    split: PreparedSplit;
+}): Promise<AxisXData[]>;

package/dist/cjs/components/AxisX/prepare-axis-data.js

@@ -8,13 +8,22 @@ async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxWid
     let rowText = text;
     let textSize = await getTextSize(text);
     const a = (360 + rotation) % 90;
-    const textMaxWidth = a === 0
-        ? Math.min(labelMaxWidth, 
+    let textMaxWidth = Infinity;
+    if (a === 0) {
+        textMaxWidth = Math.min(labelMaxWidth, 
         // rightmost label
-        labelMaxWidth / 2 + axisWidth + boundsOffsetRight - left)
-        : Math.min(axis.labels.height / calculateSin(a) - textSize.height * calculateSin(90 - a), 
+        labelMaxWidth / 2 + axisWidth + boundsOffsetRight - left);
+    }
+    else if (rotation > 0) {
+        textMaxWidth = Math.min(axis.labels.height / calculateSin(a) - textSize.height * calculateSin(90 - a), 
+        // rightmost label
+        (axisWidth - left) / calculateSin(a));
+    }
+    else {
+        textMaxWidth = Math.min(axis.labels.height / calculateSin(a) - textSize.height * calculateSin(90 - a), 
         // leftmostLabel
         (boundsOffsetLeft + left) / calculateSin(a));
+    }
     if (textSize.width > textMaxWidth) {
         rowText = await getTextWithElipsis({
             text: rowText,
@@ -23,245 +32,279 @@ async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxWid
         });
         textSize = await getTextSize(rowText);
     }
-    const actualTextWidth = a
-        ? textSize.width * calculateSin(90 - a) + textSize.height * calculateSin(a)
-        : textSize.width;
-    const xOffset = a ? (textSize.width * calculateSin(90 - a)) / 2 : 0;
-    const yOffset = textSize.width * calculateSin(a);
     content.push({
         text: rowText,
         x: 0,
         y: 0,
         size: textSize,
     });
-    const x = Math.max(-boundsOffsetLeft, Math.min(left - actualTextWidth / 2 - xOffset, axisWidth - actualTextWidth));
+    const actualTextWidth = a
+        ? textSize.width * calculateSin(90 - a) + textSize.height * calculateSin(a)
+        : textSize.width;
+    let x = 0;
+    if (rotation === 0) {
+        x = Math.min(left - actualTextWidth / 2, axisWidth - actualTextWidth);
+    }
+    else if (rotation < 0) {
+        const xOffset = (textSize.width * calculateSin(90 - a)) / 2;
+        x = left - actualTextWidth / 2 - xOffset;
+        x = Math.min(x, axisWidth - actualTextWidth);
+    }
+    else {
+        const xOffset = (textSize.width * calculateSin(90 - a)) / 2;
+        x = left + actualTextWidth / 2 - xOffset;
+    }
+    const yOffset = rotation <= 0 ? textSize.width * calculateSin(a) : 0;
     const y = top + yOffset + axis.labels.margin;
     const svgLabel = {
         title: ((_a = content[0]) === null || _a === void 0 ? void 0 : _a.text) === text ? undefined : text,
         content,
         style: axis.labels.style,
         size: textSize,
-        x,
+        x: Math.max(-boundsOffsetLeft, x),
         y,
         angle: rotation,
     };
     return svgLabel;
 }
 // eslint-disable-next-line complexity
-export async function prepareXAxisData({ axis, scale, boundsWidth, boundsOffsetLeft, boundsOffsetRight, height, }) {
-    var _a, _b, _c, _d;
-    const axisHeight = height;
-    const axisWidth = boundsWidth;
-    let domain = null;
-    if (axis.visible) {
-        domain = {
-            start: [0, height],
-            end: [axisWidth, height],
-            lineColor: (_a = axis.lineColor) !== null && _a !== void 0 ? _a : '',
-        };
-    }
-    const ticks = [];
-    const getTextSize = getTextSizeFn({ style: axis.labels.style });
-    const labelLineHeight = (await getTextSize('Tmp')).height;
-    const values = getXAxisTickValues({ scale, axis, labelLineHeight });
-    const tickStep = getMinSpaceBetween(values, (d) => Number(d.value));
-    const labelMaxWidth = values.length > 1
-        ? Math.abs(values[0].x - values[1].x) - axis.labels.padding * 2
-        : axisWidth;
-    for (let i = 0; i < values.length; i++) {
-        const tickValue = values[i];
-        let svgLabel = null;
-        let htmlLabel = null;
-        if (axis.labels.enabled) {
-            if (axis.labels.html) {
-                const content = String(tickValue.value);
-                const labelSize = await getLabelsSize({
-                    labels: [content],
-                    html: true,
-                    style: axis.labels.style,
-                });
-                const size = { width: labelSize.maxWidth, height: labelSize.maxHeight };
-                htmlLabel = {
-                    content,
-                    x: tickValue.x - size.width / 2,
-                    y: height + axis.labels.margin,
-                    size,
-                    style: axis.labels.style,
-                };
+export async function prepareXAxisData({ axis, yAxis, scale, boundsWidth, boundsOffsetLeft, boundsOffsetRight, height, split, }) {
+    var _a, _b, _c, _d, _e, _f;
+    const xAxisItems = [];
+    for (let plotIndex = 0; plotIndex < split.plots.length; plotIndex++) {
+        const plot = split.plots[plotIndex];
+        const axisTop = plot.top;
+        const axisHeight = plot.height;
+        const axisWidth = boundsWidth;
+        const isBottomPlot = plotIndex === split.plots.length - 1;
+        const plotYAxes = yAxis.filter((a) => a.plotIndex === plotIndex);
+        const yDomainLeftPosition = ((_a = plotYAxes.find((a) => a.position === 'left')) === null || _a === void 0 ? void 0 : _a.visible)
+            ? 0
+            : null;
+        const yDomainRightPosition = ((_b = plotYAxes.find((a) => a.position === 'right')) === null || _b === void 0 ? void 0 : _b.visible)
+            ? axisWidth
+            : null;
+        let domain = null;
+        if (isBottomPlot && axis.visible) {
+            domain = {
+                start: [0, axisTop + axisHeight],
+                end: [axisWidth, axisTop + axisHeight],
+                lineColor: (_c = axis.lineColor) !== null && _c !== void 0 ? _c : '',
+            };
+        }
+        const ticks = [];
+        const getTextSize = getTextSizeFn({ style: axis.labels.style });
+        const labelLineHeight = (await getTextSize('Tmp')).height;
+        const values = getXAxisTickValues({ scale, axis, labelLineHeight });
+        const tickStep = getMinSpaceBetween(values, (d) => Number(d.value));
+        const labelMaxWidth = values.length > 1
+            ? Math.abs(values[0].x - values[1].x) - axis.labels.padding * 2
+            : axisWidth;
+        for (let i = 0; i < values.length; i++) {
+            const tickValue = values[i];
+            let svgLabel = null;
+            let htmlLabel = null;
+            if (isBottomPlot && axis.labels.enabled) {
+                if (axis.labels.html) {
+                    const content = String(tickValue.value);
+                    const labelSize = await getLabelsSize({
+                        labels: [content],
+                        html: true,
+                        style: axis.labels.style,
+                    });
+                    const size = { width: labelSize.maxWidth, height: labelSize.maxHeight };
+                    htmlLabel = {
+                        content,
+                        x: tickValue.x - size.width / 2,
+                        y: height + axis.labels.margin,
+                        size,
+                        style: axis.labels.style,
+                    };
+                }
+                else {
+                    const text = formatAxisTickLabel({
+                        value: tickValue.value,
+                        axis,
+                        step: tickStep,
+                    });
+                    svgLabel = await getSvgAxisLabel({
+                        getTextSize,
+                        text,
+                        axis,
+                        top: height,
+                        left: tickValue.x,
+                        labelMaxWidth,
+                        axisWidth,
+                        boundsOffsetLeft,
+                        boundsOffsetRight,
+                    });
+                }
             }
-            else {
-                const text = formatAxisTickLabel({ value: tickValue.value, axis, step: tickStep });
-                svgLabel = await getSvgAxisLabel({
-                    getTextSize,
-                    text,
-                    axis,
-                    top: height,
-                    left: tickValue.x,
-                    labelMaxWidth,
-                    axisWidth,
-                    boundsOffsetLeft,
-                    boundsOffsetRight,
-                });
+            let tickLine = null;
+            if (axis.grid.enabled &&
+                tickValue.x !== yDomainLeftPosition &&
+                tickValue.x !== yDomainRightPosition) {
+                tickLine = {
+                    points: [
+                        [tickValue.x, axisTop],
+                        [tickValue.x, axisTop + axisHeight],
+                    ],
+                };
             }
+            ticks.push({
+                line: tickLine,
+                svgLabel,
+                htmlLabel,
+            });
         }
-        const tickLine = axis.grid.enabled
-            ? {
-                points: [
-                    [tickValue.x, 0],
-                    [tickValue.x, height],
-                ],
+        let title = null;
+        if (axis.title.text) {
+            const getTitleTextSize = getTextSizeFn({ style: axis.title.style });
+            const titleContent = [];
+            const titleMaxWidth = axisWidth;
+            if (axis.title.maxRowCount > 1) {
+                const titleTextRows = await wrapText({
+                    text: axis.title.text,
+                    style: axis.title.style,
+                    width: titleMaxWidth,
+                    getTextSize: getTitleTextSize,
+                });
+                for (let i = 0; i < axis.title.maxRowCount && i < titleTextRows.length; i++) {
+                    const textRow = titleTextRows[i];
+                    const textRowContent = textRow.text.trim();
+                    const textRowSize = await getTitleTextSize(textRowContent);
+                    titleContent.push({
+                        text: textRowContent,
+                        x: 0,
+                        y: textRow.y,
+                        size: textRowSize,
+                    });
+                }
             }
-            : null;
-        ticks.push({
-            line: tickLine,
-            svgLabel,
-            htmlLabel,
-        });
-    }
-    let title = null;
-    if (axis.title.text) {
-        const getTitleTextSize = getTextSizeFn({ style: axis.title.style });
-        const titleContent = [];
-        const titleMaxWidth = axisWidth;
-        if (axis.title.maxRowCount > 1) {
-            const titleTextRows = await wrapText({
-                text: axis.title.text,
-                style: axis.title.style,
-                width: titleMaxWidth,
-                getTextSize: getTitleTextSize,
-            });
-            for (let i = 0; i < axis.title.maxRowCount && i < titleTextRows.length; i++) {
-                const textRow = titleTextRows[i];
-                const textRowContent = textRow.text.trim();
-                const textRowSize = await getTitleTextSize(textRowContent);
+            else {
+                const text = await getTextWithElipsis({
+                    text: axis.title.text,
+                    maxWidth: titleMaxWidth,
+                    getTextWidth: async (s) => (await getTitleTextSize(s)).width,
+                });
                 titleContent.push({
-                    text: textRowContent,
+                    text,
                     x: 0,
-                    y: textRow.y,
-                    size: textRowSize,
+                    y: 0,
+                    size: await getTitleTextSize(text),
                 });
             }
+            const titleTextSize = titleContent.reduce((acc, item) => {
+                acc.width = Math.max(acc.width, item.size.width);
+                acc.height += item.size.height;
+                return acc;
+            }, { width: 0, height: 0 });
+            let x = 0;
+            switch (axis.title.align) {
+                case 'left': {
+                    x = 0;
+                    break;
+                }
+                case 'center': {
+                    x = Math.max(axisWidth / 2 - titleTextSize.width / 2);
+                    break;
+                }
+                case 'right': {
+                    x = Math.max(0, axisWidth - titleTextSize.width);
+                    break;
+                }
+            }
+            title = {
+                content: titleContent,
+                style: axis.title.style,
+                size: titleTextSize,
+                x,
+                y: height +
+                    axis.labels.margin +
+                    axis.labels.height +
+                    axis.title.margin +
+                    titleTextSize.height,
+                rotate: 0,
+                offset: 0,
+            };
         }
-        else {
-            const text = await getTextWithElipsis({
-                text: axis.title.text,
-                maxWidth: titleMaxWidth,
-                getTextWidth: async (s) => (await getTitleTextSize(s)).width,
+        const plotBands = [];
+        for (let i = 0; i < axis.plotBands.length; i++) {
+            const plotBand = axis.plotBands[i];
+            const axisScale = scale;
+            const { from, to } = getBandsPosition({
+                band: plotBand,
+                axisScale,
+                axis: 'x',
             });
-            titleContent.push({
-                text,
-                x: 0,
+            const halfBandwidth = ((_e = (_d = axisScale.bandwidth) === null || _d === void 0 ? void 0 : _d.call(axisScale)) !== null && _e !== void 0 ? _e : 0) / 2;
+            const startPos = halfBandwidth + Math.min(from, to);
+            const endPos = Math.min(Math.abs(to - from), axisWidth - Math.min(from, to));
+            const getPlotLabelSize = getTextSizeFn({ style: plotBand.label.style });
+            const labelSize = plotBand.label.text
+                ? await getPlotLabelSize(plotBand.label.text)
+                : null;
+            plotBands.push({
+                layerPlacement: plotBand.layerPlacement,
+                x: Math.max(0, startPos),
                 y: 0,
-                size: await getTitleTextSize(text),
+                width: Math.min(endPos, axisWidth),
+                height: axisHeight,
+                color: plotBand.color,
+                opacity: plotBand.opacity,
+                label: plotBand.label.text
+                    ? {
+                        text: plotBand.label.text,
+                        style: plotBand.label.style,
+                        x: plotBand.label.padding,
+                        y: plotBand.label.padding + ((_f = labelSize === null || labelSize === void 0 ? void 0 : labelSize.width) !== null && _f !== void 0 ? _f : 0),
+                        rotate: -90,
+                    }
+                    : null,
             });
         }
-        const titleTextSize = titleContent.reduce((acc, item) => {
-            acc.width = Math.max(acc.width, item.size.width);
-            acc.height += item.size.height;
-            return acc;
-        }, { width: 0, height: 0 });
-        let x = 0;
-        switch (axis.title.align) {
-            case 'left': {
-                x = 0;
-                break;
-            }
-            case 'center': {
-                x = Math.max(axisWidth / 2 - titleTextSize.width / 2);
-                break;
-            }
-            case 'right': {
-                x = Math.max(0, axisWidth - titleTextSize.width);
-                break;
-            }
-        }
-        title = {
-            content: titleContent,
-            style: axis.title.style,
-            size: titleTextSize,
-            x,
-            y: height +
-                axis.labels.margin +
-                axis.labels.height +
-                axis.title.margin +
-                titleTextSize.height,
-            rotate: 0,
-            offset: 0,
-        };
-    }
-    const plotBands = [];
-    for (let i = 0; i < axis.plotBands.length; i++) {
-        const plotBand = axis.plotBands[i];
-        const axisScale = scale;
-        const { from, to } = getBandsPosition({
-            band: plotBand,
-            axisScale,
-            axis: 'x',
-        });
-        const halfBandwidth = ((_c = (_b = axisScale.bandwidth) === null || _b === void 0 ? void 0 : _b.call(axisScale)) !== null && _c !== void 0 ? _c : 0) / 2;
-        const startPos = halfBandwidth + Math.min(from, to);
-        const endPos = Math.min(Math.abs(to - from), axisWidth - Math.min(from, to));
-        const getPlotLabelSize = getTextSizeFn({ style: plotBand.label.style });
-        const labelSize = plotBand.label.text ? await getPlotLabelSize(plotBand.label.text) : null;
-        plotBands.push({
-            layerPlacement: plotBand.layerPlacement,
-            x: Math.max(0, startPos),
-            y: 0,
-            width: Math.min(endPos, axisWidth),
-            height: axisHeight,
-            color: plotBand.color,
-            opacity: plotBand.opacity,
-            label: plotBand.label.text
-                ? {
-                    text: plotBand.label.text,
-                    style: plotBand.label.style,
-                    x: plotBand.label.padding,
-                    y: plotBand.label.padding + ((_d = labelSize === null || labelSize === void 0 ? void 0 : labelSize.width) !== null && _d !== void 0 ? _d : 0),
+        const plotLines = [];
+        for (let i = 0; i < axis.plotLines.length; i++) {
+            const plotLine = axis.plotLines[i];
+            const axisScale = scale;
+            const plotLineValue = Number(axisScale(plotLine.value));
+            const points = [
+                [plotLineValue, 0],
+                [plotLineValue, axisHeight],
+            ];
+            let label = null;
+            if (plotLine.label.text) {
+                const getTitleTextSize = getTextSizeFn({ style: plotLine.label.style });
+                const size = await getTitleTextSize(plotLine.label.text);
+                label = {
+                    text: plotLine.label.text,
+                    style: plotLine.label.style,
+                    x: plotLineValue - plotLine.label.padding - size.height,
+                    y: plotLine.label.padding + size.width,
                     rotate: -90,
-                }
-                : null,
-        });
-    }
-    const plotLines = [];
-    for (let i = 0; i < axis.plotLines.length; i++) {
-        const plotLine = axis.plotLines[i];
-        const axisScale = scale;
-        const plotLineValue = Number(axisScale(plotLine.value));
-        const points = [
-            [plotLineValue, 0],
-            [plotLineValue, axisHeight],
-        ];
-        let label = null;
-        if (plotLine.label.text) {
-            const getTitleTextSize = getTextSizeFn({ style: plotLine.label.style });
-            const size = await getTitleTextSize(plotLine.label.text);
-            label = {
-                text: plotLine.label.text,
-                style: plotLine.label.style,
-                x: plotLineValue - plotLine.label.padding - size.height,
-                y: plotLine.label.padding + size.width,
-                rotate: -90,
-            };
+                };
+            }
+            plotLines.push({
+                layerPlacement: plotLine.layerPlacement,
+                x: 0,
+                y: 0,
+                width: axisWidth,
+                color: plotLine.color,
+                opacity: plotLine.opacity,
+                label,
+                points,
+                lineWidth: plotLine.width,
+                dashStyle: plotLine.dashStyle,
+            });
         }
-        plotLines.push({
-            layerPlacement: plotLine.layerPlacement,
-            x: 0,
-            y: 0,
-            width: axisWidth,
-            color: plotLine.color,
-            opacity: plotLine.opacity,
-            label,
-            points,
-            lineWidth: plotLine.width,
-            dashStyle: plotLine.dashStyle,
+        xAxisItems.push({
+            id: getUniqId(),
+            title,
+            ticks,
+            domain,
+            plotBands,
+            plotLines,
         });
     }
-    return {
-        id: getUniqId(),
-        title,
-        ticks,
-        domain,
-        plotBands,
-        plotLines,
-    };
+    return xAxisItems;
 }

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

@@ -158,16 +158,18 @@ export const ChartInner = (props) => {
         if (axis && scale) {
             const axisData = await prepareXAxisData({
                 axis,
+                yAxis,
                 scale,
                 boundsWidth,
                 boundsOffsetLeft: boundsOffsetLeft,
                 boundsOffsetRight: width - boundsWidth - boundsOffsetLeft,
                 height: boundsHeight,
+                split: preparedSplit,
             });
-            items.push(axisData);
+            items.push(...axisData);
         }
         return items;
-    }, [boundsHeight, boundsOffsetLeft, boundsWidth, width, xAxis, xScale]);
+    }, [xAxis, xScale, yAxis, boundsWidth, boundsOffsetLeft, width, boundsHeight, preparedSplit]);
     const xAxisDataItems = useAsyncState([], setXAxisDataItems);
     React.useEffect(() => {
         if (!initialized && xScale) {
@@ -200,7 +202,9 @@ export const ChartInner = (props) => {
             return React.createElement(PlotTitle, { key: `plot-${index}`, title: plot.title });
         })),
         React.createElement("g", { className: b('content'), width: boundsWidth, height: boundsHeight, transform: `translate(${[boundsOffsetLeft, boundsOffsetTop].join(',')})`, ref: plotRef },
-            xScale && xAxisDataItems.length && (React.createElement(AxisX, { htmlLayout: htmlLayout, plotAfterRef: plotAfterRef, plotBeforeRef: plotBeforeRef, preparedAxisData: xAxisDataItems[0] })),
+            xScale && xAxisDataItems.length && (React.createElement(React.Fragment, null, xAxisDataItems.map((axisData) => {
+                return (React.createElement(AxisX, { key: axisData.id, htmlLayout: htmlLayout, plotAfterRef: plotAfterRef, plotBeforeRef: plotBeforeRef, preparedAxisData: axisData }));
+            }))),
             Boolean(yAxisDataItems.length) && (React.createElement(React.Fragment, null, yAxisDataItems.map((axisData, index) => {
                 if (!axisData) {
                     return null;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import isEqual from 'lodash/isEqual';
+import { getWidthOccupiedByYAxis } from '../useChartDimensions/utils';
 import { getPreparedXAxis } from './x-axis';
 import { getPreparedYAxis } from './y-axis';
 export function useAxis(props) {
@@ -21,7 +22,7 @@ export function useAxis(props) {
                 seriesData,
                 yAxis,
             });
-            const axesWidth = estimatedPreparedYAxis.reduce((acc, a) => acc + a.title.height + a.title.margin + a.labels.margin + a.labels.width, 0);
+            const axesWidth = getWidthOccupiedByYAxis({ preparedAxis: estimatedPreparedYAxis });
             const estimatedBoundsWidth = width - (axesWidth + preparedChart.margin.left + preparedChart.margin.right);
             const preparedXAxis = await getPreparedXAxis({
                 xAxis,

package/dist/cjs/hooks/useAxis/x-axis.js

@@ -5,7 +5,8 @@ import { getXAxisTickValues } from '../../utils/chart/axis/x-axis';
 import { createXScale } from '../useAxisScales';
 import { getPreparedRangeSlider } from './range-slider';
 import { prepareAxisPlotLabel } from './utils';
-async function setLabelSettings({ axis, seriesData, width, autoRotation = true, }) {
+async function setLabelSettings({ axis, seriesData, width, axisLabels, }) {
+    var _a, _b;
     const scale = createXScale({ axis, series: seriesData, boundsWidth: width });
     if (!scale) {
         axis.labels.height = 0;
@@ -16,7 +17,7 @@ async function setLabelSettings({ axis, seriesData, width, autoRotation = true,
     const labelLineHeight = (await getTextSize('Tmp')).height;
     const tickValues = getXAxisTickValues({ axis, scale, labelLineHeight });
     const tickStep = getMinSpaceBetween(tickValues, (d) => Number(d.value));
-    if (axis.type === 'datetime' && !axis.labels.dateFormat) {
+    if (axis.type === 'datetime' && !(axisLabels === null || axisLabels === void 0 ? void 0 : axisLabels.dateFormat)) {
         axis.labels.dateFormat = getDefaultDateFormat(tickStep);
     }
     const labels = tickValues.map((tick) => formatAxisTickLabel({
@@ -36,9 +37,10 @@ async function setLabelSettings({ axis, seriesData, width, autoRotation = true,
         }
         return false;
     };
+    const autoRotation = (_a = axisLabels === null || axisLabels === void 0 ? void 0 : axisLabels.autoRotation) !== null && _a !== void 0 ? _a : true;
     const overlapping = axis.labels.html ? false : await hasOverlappingLabels();
     const defaultRotation = overlapping && autoRotation ? -45 : 0;
-    const rotation = axis.labels.html ? 0 : axis.labels.rotation || defaultRotation;
+    const rotation = axis.labels.html ? 0 : ((_b = axisLabels === null || axisLabels === void 0 ? void 0 : axisLabels.rotation) !== null && _b !== void 0 ? _b : defaultRotation);
     const labelsHeight = rotation || axis.labels.html
         ? (await getLabelsSize({
             labels,
@@ -58,7 +60,7 @@ function getMaxPaddingBySeries({ series }) {
     return 0.01;
 }
 export const getPreparedXAxis = async ({ xAxis, seriesData, width, boundsWidth, }) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d;
     const hasAxisRelatedSeries = seriesData.some(isAxisRelatedSeries);
     if (!hasAxisRelatedSeries) {
         return Promise.resolve(null);
@@ -168,7 +170,7 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, boundsWidth,
         axis: preparedXAxis,
         seriesData,
         width: boundsWidth,
-        autoRotation: (_e = xAxis === null || xAxis === void 0 ? void 0 : xAxis.labels) === null || _e === void 0 ? void 0 : _e.autoRotation,
+        axisLabels: xAxis === null || xAxis === void 0 ? void 0 : xAxis.labels,
     });
     return preparedXAxis;
 };

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
 import { calculateNumericProperty, getHorizontalSvgTextHeight } from '../../utils';
 const DEFAULT_TITLE_FONT_SIZE = '15px';
 const TITLE_TOP_BOTTOM_PADDING = 8;
@@ -34,10 +35,13 @@ export function getPlotHeight(args) {
 export const useSplit = (args) => {
     const { split, boundsHeight, chartWidth } = args;
     return React.useMemo(() => {
-        var _a;
+        var _a, _b;
         const splitGap = (_a = calculateNumericProperty({ value: split === null || split === void 0 ? void 0 : split.gap, base: boundsHeight })) !== null && _a !== void 0 ? _a : 0;
         const plotHeight = getPlotHeight({ split: split, boundsHeight, gap: splitGap });
-        const plots = (split === null || split === void 0 ? void 0 : split.plots) || [];
+        const plots = (_b = split === null || split === void 0 ? void 0 : split.plots) !== null && _b !== void 0 ? _b : [];
+        if (isEmpty(plots)) {
+            plots.push({});
+        }
         return {
             plots: plots.map((p, index) => {
                 const title = preparePlotTitle({