@gravity-ui/charts 1.17.0 → 1.18.1

package/dist/cjs/hooks/useChartOptions/index.d.ts

@@ -1,4 +1,4 @@
-import type { ChartSeries, ChartTitle, ChartTooltip, ChartOptions as GeneralChartOptions } from '../../types';
+import type { ChartSeries, ChartTitle, ChartTooltip, ChartXAxis, ChartYAxis, ChartOptions as GeneralChartOptions } from '../../types';
 import type { ChartOptions } from './types';
 type Args = {
     seriesData: ChartSeries[];
@@ -6,6 +6,8 @@ type Args = {
     colors?: string[];
     title?: ChartTitle;
     tooltip?: ChartTooltip;
+    yAxes?: ChartYAxis[];
+    xAxis?: ChartXAxis;
 };
 export declare const useChartOptions: (args: Args) => ChartOptions;
 export {};

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

@@ -4,10 +4,10 @@ import { getPreparedChart } from './chart';
 import { getPreparedTitle } from './title';
 import { getPreparedTooltip } from './tooltip';
 export const useChartOptions = (args) => {
-    const { chart, colors, seriesData, title, tooltip } = args;
+    const { chart, colors, seriesData, title, tooltip, yAxes, xAxis } = args;
     const options = React.useMemo(() => {
         const preparedTitle = getPreparedTitle({ title });
-        const preparedTooltip = getPreparedTooltip({ tooltip });
+        const preparedTooltip = getPreparedTooltip({ tooltip, seriesData, yAxes, xAxis });
         const preparedChart = getPreparedChart({
             chart,
             preparedTitle,
@@ -19,6 +19,6 @@ export const useChartOptions = (args) => {
             title: preparedTitle,
             tooltip: preparedTooltip,
         };
-    }, [chart, colors, seriesData, title, tooltip]);
+    }, [chart, colors, seriesData, title, tooltip, xAxis, yAxes]);
     return options;
 };

package/dist/cjs/hooks/useChartOptions/tooltip.d.ts

@@ -1,5 +1,8 @@
-import type { ChartData } from '../../types';
+import type { ChartData, ChartSeries, ChartXAxis, ChartYAxis } from '../../types';
 import type { PreparedTooltip } from './types';
 export declare const getPreparedTooltip: (args: {
     tooltip: ChartData["tooltip"];
+    seriesData: ChartSeries[];
+    yAxes?: ChartYAxis[];
+    xAxis?: ChartXAxis;
 }) => PreparedTooltip;

package/dist/cjs/hooks/useChartOptions/tooltip.js

@@ -1,6 +1,21 @@
 import get from 'lodash/get';
+import { getDefaultValueFormat } from '../../components/Tooltip/DefaultTooltipContent/utils';
+import { getDomainDataXBySeries, getDomainDataYBySeries, getMinSpaceBetween } from '../../utils';
+function getDefaultHeaderFormat({ seriesData, yAxes, xAxis, }) {
+    if (seriesData.every((item) => ['pie', 'treemap', 'waterfall', 'sankey', 'radar'].includes(item.type))) {
+        return undefined;
+    }
+    if (seriesData.some((item) => item.type === 'bar-y')) {
+        const domainData = getDomainDataYBySeries(seriesData);
+        const closestPointsRange = getMinSpaceBetween(domainData, (d) => d);
+        return getDefaultValueFormat({ axis: yAxes === null || yAxes === void 0 ? void 0 : yAxes[0], closestPointsRange });
+    }
+    const domainData = getDomainDataXBySeries(seriesData);
+    const closestPointsRange = getMinSpaceBetween(domainData, (d) => d);
+    return getDefaultValueFormat({ axis: xAxis, closestPointsRange });
+}
 export const getPreparedTooltip = (args) => {
-    var _a;
-    const { tooltip } = args;
-    return Object.assign(Object.assign({}, tooltip), { enabled: get(tooltip, 'enabled', true), throttle: (_a = tooltip === null || tooltip === void 0 ? void 0 : tooltip.throttle) !== null && _a !== void 0 ? _a : 0 });
+    var _a, _b;
+    const { tooltip, seriesData, yAxes, xAxis } = args;
+    return Object.assign(Object.assign({}, tooltip), { enabled: get(tooltip, 'enabled', true), throttle: (_a = tooltip === null || tooltip === void 0 ? void 0 : tooltip.throttle) !== null && _a !== void 0 ? _a : 0, headerFormat: (_b = tooltip === null || tooltip === void 0 ? void 0 : tooltip.headerFormat) !== null && _b !== void 0 ? _b : getDefaultHeaderFormat({ seriesData, yAxes, xAxis }) });
 };

package/dist/cjs/hooks/useChartOptions/utils.d.ts

@@ -1,4 +1,4 @@
-import type { AxisPlot, ChartYAxis } from '../../types';
+import type { AxisPlot, ChartAxis } from '../../types';
 export declare function prepareAxisPlotLabel(d: AxisPlot): {
     text: string;
     style: {
@@ -8,4 +8,7 @@ export declare function prepareAxisPlotLabel(d: AxisPlot): {
     };
     padding: number;
 };
-export declare function getAxisCategories(axis?: ChartYAxis): string[] | undefined;
+export declare function getAxisCategories({ categories, order, }?: {
+    categories?: string[];
+    order?: ChartAxis['order'];
+}): string[] | undefined;

package/dist/cjs/hooks/useChartOptions/utils.js

@@ -8,10 +8,9 @@ export function prepareAxisPlotLabel(d) {
         padding: (_e = (_d = d.label) === null || _d === void 0 ? void 0 : _d.padding) !== null && _e !== void 0 ? _e : 5,
     };
 }
-export function getAxisCategories(axis) {
-    const categories = axis === null || axis === void 0 ? void 0 : axis.categories;
+export function getAxisCategories({ categories, order, } = {}) {
     if (categories) {
-        switch (axis.order) {
+        switch (order) {
             case 'reverse': {
                 return reverse(categories);
             }

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

@@ -1,10 +1,15 @@
 import get from 'lodash/get';
 import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, axisCrosshairDefaults, axisLabelsDefaults, xAxisTitleDefaults, } from '../../constants';
-import { calculateCos, calculateNumericProperty, formatAxisTickLabel, getAxisItems, getClosestPointsRange, getHorizontalHtmlTextHeight, getHorizontalSvgTextHeight, getLabelsSize, getMaxTickCount, getTicksCount, hasOverlappingLabels, wrapText, } from '../../utils';
+import { calculateCos, calculateNumericProperty, formatAxisTickLabel, getAxisItems, getClosestPointsRange, getDefaultDateFormat, getHorizontalHtmlTextHeight, getHorizontalSvgTextHeight, getLabelsSize, getMaxTickCount, getTicksCount, hasOverlappingLabels, wrapText, } from '../../utils';
 import { createXScale } from '../useAxisScales';
 import { getAxisCategories, prepareAxisPlotLabel } from './utils';
-async function getLabelSettings({ axis, seriesData, seriesOptions, width, autoRotation = true, }) {
+async function setLabelSettings({ axis, seriesData, seriesOptions, width, autoRotation = true, }) {
     const scale = createXScale({ axis, series: seriesData, seriesOptions, boundsWidth: width });
+    if (!scale) {
+        axis.labels.height = 0;
+        axis.labels.rotation = 0;
+        return;
+    }
     const tickCount = getTicksCount({ axis, range: width });
     const ticks = getAxisItems({
         scale: scale,
@@ -12,6 +17,9 @@ async function getLabelSettings({ axis, seriesData, seriesOptions, width, autoRo
         maxCount: getMaxTickCount({ width, axis }),
     });
     const step = getClosestPointsRange(axis, ticks);
+    if (axis.type === 'datetime' && !axis.labels.dateFormat) {
+        axis.labels.dateFormat = getDefaultDateFormat(step);
+    }
     const labels = ticks.map((value) => {
         return formatAxisTickLabel({
             axis,
@@ -38,10 +46,11 @@ async function getLabelSettings({ axis, seriesData, seriesOptions, width, autoRo
         })).maxHeight
         : axis.labels.lineHeight;
     const maxHeight = rotation ? calculateCos(rotation) * axis.labels.maxWidth : labelsHeight;
-    return { height: Math.min(maxHeight, labelsHeight), rotation };
+    axis.labels.height = Math.min(maxHeight, labelsHeight);
+    axis.labels.rotation = rotation;
 }
 export const getPreparedXAxis = async ({ xAxis, seriesData, seriesOptions, width, }) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     const titleText = get(xAxis, 'title.text', '');
     const titleStyle = Object.assign(Object.assign({}, xAxisTitleDefaults.style), get(xAxis, 'title.style'));
     const titleMaxRowsCount = get(xAxis, 'title.maxRowCount', xAxisTitleDefaults.maxRowCount);
@@ -96,7 +105,12 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, seriesOptions, width
             enabled: get(xAxis, 'grid.enabled', true),
         },
         ticks: {
-            pixelInterval: get(xAxis, 'ticks.pixelInterval'),
+            pixelInterval: ((_c = xAxis === null || xAxis === void 0 ? void 0 : xAxis.ticks) === null || _c === void 0 ? void 0 : _c.interval)
+                ? calculateNumericProperty({
+                    base: width,
+                    value: xAxis.ticks.interval,
+                })
+                : (_d = xAxis === null || xAxis === void 0 ? void 0 : xAxis.ticks) === null || _d === void 0 ? void 0 : _d.pixelInterval,
         },
         position: 'bottom',
         plotIndex: 0,
@@ -129,14 +143,12 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, seriesOptions, width
         visible: get(xAxis, 'visible', true),
         order: xAxis === null || xAxis === void 0 ? void 0 : xAxis.order,
     };
-    const { height, rotation } = await getLabelSettings({
+    await setLabelSettings({
         axis: preparedXAxis,
         seriesData,
         seriesOptions,
         width,
-        autoRotation: (_c = xAxis === null || xAxis === void 0 ? void 0 : xAxis.labels) === null || _c === void 0 ? void 0 : _c.autoRotation,
+        autoRotation: (_e = xAxis === null || xAxis === void 0 ? void 0 : xAxis.labels) === null || _e === void 0 ? void 0 : _e.autoRotation,
     });
-    preparedXAxis.labels.height = height;
-    preparedXAxis.labels.rotation = rotation;
     return preparedXAxis;
 };

package/dist/cjs/hooks/useChartOptions/y-axis.d.ts

@@ -1,11 +1,9 @@
 import type { ChartSeries, ChartYAxis } from '../../types';
-import type { PreparedSeriesOptions } from '../useSeries/types';
 import type { PreparedAxis } from './types';
-export declare const getPreparedYAxis: ({ height, boundsHeight, width, seriesData, seriesOptions, yAxis, }: {
+export declare const getPreparedYAxis: ({ height, boundsHeight, width, seriesData, yAxis, }: {
     height: number;
     boundsHeight: number;
     width: number;
     seriesData: ChartSeries[];
-    seriesOptions: PreparedSeriesOptions;
     yAxis: ChartYAxis[] | undefined;
 }) => Promise<PreparedAxis[]>;

package/dist/cjs/hooks/useChartOptions/y-axis.js

@@ -1,11 +1,11 @@
 import get from 'lodash/get';
 import { getTickValues } from '../../components/AxisY/utils';
 import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_TYPE, axisCrosshairDefaults, axisLabelsDefaults, yAxisTitleDefaults, } from '../../constants';
-import { calculateNumericProperty, getDefaultMinYAxisValue, getHorizontalHtmlTextHeight, getHorizontalSvgTextHeight, getLabelFormatter, getLabelsSize, getTextSizeFn, isAxisRelatedSeries, wrapText, } from '../../utils';
+import { calculateNumericProperty, formatAxisTickLabel, getClosestPointsRange, getDefaultDateFormat, getDefaultMinYAxisValue, getHorizontalHtmlTextHeight, getHorizontalSvgTextHeight, getLabelsSize, getScaleTicks, getTextSizeFn, isAxisRelatedSeries, wrapText, } from '../../utils';
 import { createYScale } from '../useAxisScales';
 import { getAxisCategories, prepareAxisPlotLabel } from './utils';
 const getAxisLabelMaxWidth = async (args) => {
-    const { axis, seriesData, seriesOptions, height } = args;
+    const { axis, seriesData, height } = args;
     if (!axis.labels.enabled) {
         return { height: 0, width: 0 };
     }
@@ -13,13 +13,23 @@ const getAxisLabelMaxWidth = async (args) => {
         axis,
         boundsHeight: height,
         series: seriesData,
-        seriesOptions,
     });
+    if (!scale) {
+        return { height: 0, width: 0 };
+    }
     const getTextSize = getTextSizeFn({ style: axis.labels.style });
     const labelLineHeight = (await getTextSize('Tmp')).height;
-    const tickValues = getTickValues({ axis, scale, labelLineHeight });
-    const labelFormatter = getLabelFormatter({ axis, scale });
-    const labels = tickValues.map((tick) => labelFormatter(tick.value));
+    const tickValues = getTickValues({ axis, scale, labelLineHeight, series: seriesData });
+    const ticks = getScaleTicks(scale);
+    const tickStep = getClosestPointsRange(axis, ticks);
+    if (axis.type === 'datetime' && !axis.labels.dateFormat) {
+        axis.labels.dateFormat = getDefaultDateFormat(tickStep);
+    }
+    const labels = tickValues.map((tick) => formatAxisTickLabel({
+        axis,
+        value: tick.value,
+        step: tickStep,
+    }));
     const size = await getLabelsSize({
         labels,
         style: axis.labels.style,
@@ -28,7 +38,7 @@ const getAxisLabelMaxWidth = async (args) => {
     });
     return { height: size.maxHeight, width: size.maxWidth };
 };
-export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, seriesOptions, yAxis, }) => {
+export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxis, }) => {
     const axisByPlot = [];
     const axisItems = yAxis || [{}];
     const hasAxisRelatedSeries = seriesData.some(isAxisRelatedSeries);
@@ -100,10 +110,12 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, seri
                     (!firstPlotAxis && !((_d = axisByPlot[plotIndex][0].visible) !== null && _d !== void 0 ? _d : true))),
             },
             ticks: {
-                pixelInterval: (_f = (_e = axisItem.ticks) === null || _e === void 0 ? void 0 : _e.pixelInterval) !== null && _f !== void 0 ? _f : calculateNumericProperty({
-                    base: height,
-                    value: (_g = axisItem.ticks) === null || _g === void 0 ? void 0 : _g.interval,
-                }),
+                pixelInterval: ((_e = axisItem.ticks) === null || _e === void 0 ? void 0 : _e.interval)
+                    ? calculateNumericProperty({
+                        base: height,
+                        value: (_f = axisItem.ticks) === null || _f === void 0 ? void 0 : _f.interval,
+                    })
+                    : (_g = axisItem.ticks) === null || _g === void 0 ? void 0 : _g.pixelInterval,
             },
             position: get(axisItem, 'position', defaultAxisPosition),
             plotIndex: get(axisItem, 'plotIndex', 0),
@@ -140,7 +152,6 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, seri
             const { height: labelsHeight, width: labelsWidth } = await getAxisLabelMaxWidth({
                 axis: preparedAxis,
                 seriesData,
-                seriesOptions,
                 height: boundsHeight,
             });
             preparedAxis.labels.height = labelsHeight;

package/dist/cjs/hooks/useCrosshair/index.d.ts

@@ -6,7 +6,7 @@ type Props = {
     width: number;
     height: number;
     xScale?: ChartScale;
-    yScale?: ChartScale[];
+    yScale?: (ChartScale | undefined)[];
     split: PreparedSplit;
     plotElement: SVGGElement | null;
     dispatcher: Dispatch<object>;

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

@@ -63,7 +63,8 @@ export const useCrosshair = (props) => {
         }
         yAxes.forEach((yAxis, index, currentArr) => {
             const yAxisScale = yScale[index];
-            if (index !== 0 && !yAxis.crosshair.snap && !currentArr[0].crosshair.snap) {
+            if (!yAxisScale ||
+                (index !== 0 && !yAxis.crosshair.snap && !currentArr[0].crosshair.snap)) {
                 return;
             }
             if (yAxis.crosshair.enabled && (hovered === null || hovered === void 0 ? void 0 : hovered.length)) {

package/dist/cjs/hooks/useSeries/prepare-bar-y.js

@@ -9,7 +9,9 @@ async function prepareDataLabels(series) {
     const style = Object.assign({}, DEFAULT_DATALABELS_STYLE, (_a = series.dataLabels) === null || _a === void 0 ? void 0 : _a.style);
     const html = get(series, 'dataLabels.html', false);
     const labels = enabled
-        ? series.data.map((d) => getFormattedValue(Object.assign({ value: d.x || d.label }, series.dataLabels)))
+        ? series.data
+            .filter((d) => Boolean(d.x || d.label))
+            .map((d) => getFormattedValue(Object.assign({ value: d.x || d.label }, series.dataLabels)))
         : [];
     const { maxHeight = 0, maxWidth = 0 } = await getLabelsSize({
         labels,

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

@@ -7,7 +7,7 @@ export declare const prepareAreaData: (args: {
     xAxis: PreparedAxis;
     xScale: ChartScale;
     yAxis: PreparedAxis[];
-    yScale: ChartScale[];
+    yScale: (ChartScale | undefined)[];
     boundsHeight: number;
     isOutsideBounds: (x: number, y: number) => boolean;
 }) => Promise<PreparedAreaData[]>;

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

@@ -71,6 +71,9 @@ export const prepareAreaData = async (args) => {
             const yAxisIndex = s.yAxis;
             const seriesYAxis = yAxis[yAxisIndex];
             const seriesYScale = yScale[yAxisIndex];
+            if (!seriesYScale) {
+                continue;
+            }
             const yMin = getYValue({
                 point: { y: 0 },
                 points: s.data,

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

@@ -8,6 +8,6 @@ export declare const prepareBarXData: (args: {
     xAxis: PreparedAxis;
     xScale: ChartScale;
     yAxis: PreparedAxis[];
-    yScale: ChartScale[];
+    yScale: (ChartScale | undefined)[];
     boundsHeight: number;
 }) => Promise<PreparedBarXData[]>;

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

@@ -112,6 +112,9 @@ export const prepareBarXData = async (args) => {
                 const yValue = sortedData[yValueIndex];
                 const yAxisIndex = yValue.series.yAxis;
                 const seriesYScale = yScale[yAxisIndex];
+                if (!seriesYScale) {
+                    continue;
+                }
                 let xCenter;
                 if (xAxis.type === 'category') {
                     const xBandScale = xScale;

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

@@ -2,11 +2,13 @@ import type { ChartScale } from '../../useAxisScales';
 import type { PreparedAxis } from '../../useChartOptions/types';
 import type { PreparedBarYSeries, PreparedSeriesOptions } from '../../useSeries/types';
 import type { BarYShapesArgs } from './types';
-export declare const prepareBarYData: (args: {
+export declare function prepareBarYData(args: {
+    boundsHeight: number;
+    boundsWidth: number;
     series: PreparedBarYSeries[];
     seriesOptions: PreparedSeriesOptions;
     xAxis: PreparedAxis;
     xScale: ChartScale;
     yAxis: PreparedAxis[];
-    yScale: ChartScale[];
-}) => Promise<BarYShapesArgs>;
+    yScale: (ChartScale | undefined)[];
+}): Promise<BarYShapesArgs>;

package/dist/cjs/hooks/useShapes/bar-y/prepare-data.js

@@ -1,17 +1,23 @@
 import { ascending, descending, sort } from 'd3';
 import get from 'lodash/get';
-import { filterOverlappingLabels, getLabelsSize, getTextSizeFn } from '../../../utils';
+import { filterOverlappingLabels, getHtmlLabelConstraintedPosition, getLabelsSize, getSvgLabelConstraintedPosition, getTextSizeFn, } from '../../../utils';
 import { getFormattedValue } from '../../../utils/chart/format';
-import { getBarYLayoutForCategoryScale, getBarYLayoutForNumericScale, groupBarYDataByYValue, } from '../../utils';
+import { getBarYLayout, groupBarYDataByYValue } from '../../utils';
 const DEFAULT_LABEL_PADDING = 7;
-export const prepareBarYData = async (args) => {
+export async function prepareBarYData(args) {
     var _a;
-    const { series, seriesOptions, yAxis, xScale, yScale: [yScale], } = args;
+    const { boundsHeight, boundsWidth, series, seriesOptions, yAxis, xScale, yScale: [yScale], } = args;
     const stackGap = seriesOptions['bar-y'].stackGap;
     const xLinearScale = xScale;
     const yLinearScale = yScale;
+    if (!yLinearScale) {
+        return {
+            shapes: [],
+            labels: [],
+            htmlElements: [],
+        };
+    }
     const yScaleRange = yLinearScale.range();
-    const plotHeight = Math.abs(yScaleRange[0] - yScaleRange[1]);
     const sortingOptions = get(seriesOptions, 'bar-y.dataSorting');
     const comparator = (sortingOptions === null || sortingOptions === void 0 ? void 0 : sortingOptions.direction) === 'desc' ? descending : ascending;
     const sortKey = (() => {
@@ -28,13 +34,13 @@ export const prepareBarYData = async (args) => {
         }
     })();
     const groupedData = groupBarYDataByYValue(series, yAxis);
-    const { bandSize, barGap, barSize } = yAxis[0].type === 'category'
-        ? getBarYLayoutForCategoryScale({ groupedData, seriesOptions, yScale })
-        : getBarYLayoutForNumericScale({
-            groupedData,
-            seriesOptions,
-            plotHeight: plotHeight - plotHeight * yAxis[0].maxPadding,
-        });
+    const plotHeight = Math.abs(yScaleRange[0] - yScaleRange[1]);
+    const { bandSize, barGap, barSize } = getBarYLayout({
+        groupedData,
+        seriesOptions,
+        plotHeight,
+        scale: yScale,
+    });
     const result = [];
     const baseRangeValue = xLinearScale.range()[0];
     Object.entries(groupedData).forEach(([yValue, val]) => {
@@ -99,7 +105,7 @@ export const prepareBarYData = async (args) => {
         });
     });
     let labels = [];
-    const htmlElements = [];
+    let htmlElements = [];
     const map = new Map();
     for (let i = 0; i < result.length; i++) {
         const prepared = result[i];
@@ -117,12 +123,20 @@ export const prepareBarYData = async (args) => {
                     style: dataLabels.style,
                     html: dataLabels.html,
                 });
-                htmlElements.push({
+                const constrainedPosition = getHtmlLabelConstraintedPosition({
+                    boundsHeight,
+                    boundsWidth,
+                    height,
+                    width,
                     x,
                     y: y - height / 2,
+                });
+                htmlElements.push({
                     content,
                     size: { width, height },
                     style: dataLabels.style,
+                    x: constrainedPosition.x,
+                    y: constrainedPosition.y,
                 });
             }
             else {
@@ -131,24 +145,36 @@ export const prepareBarYData = async (args) => {
                 }
                 const getTextSize = map.get(dataLabels.style);
                 const { width, height } = await getTextSize(content);
-                labels.push({
+                const constrainedPosition = getSvgLabelConstraintedPosition({
+                    boundsHeight,
+                    boundsWidth,
+                    height,
+                    width,
                     x,
                     y: y + height / 2,
+                });
+                labels.push({
+                    size: { width, height },
+                    series: prepared.series,
+                    style: dataLabels.style,
                     text: content,
                     textAnchor: dataLabels.inside ? 'middle' : 'right',
-                    style: dataLabels.style,
-                    series: prepared.series,
-                    size: { width, height },
+                    x: constrainedPosition.x,
+                    y: constrainedPosition.y,
                 });
             }
         }
     }
-    if (!((_a = result[0]) === null || _a === void 0 ? void 0 : _a.series.dataLabels.allowOverlap)) {
+    const allowOverlap = (_a = result[0]) === null || _a === void 0 ? void 0 : _a.series.dataLabels.allowOverlap;
+    if (labels.length && !allowOverlap) {
         labels = filterOverlappingLabels(labels);
     }
+    else if (htmlElements.length && !allowOverlap) {
+        htmlElements = filterOverlappingLabels(htmlElements);
+    }
     return {
         shapes: result,
         labels,
         htmlElements,
     };
-};
+}

package/dist/cjs/hooks/useShapes/index.d.ts

@@ -25,7 +25,7 @@ type Args = {
     xAxis: PreparedAxis | null;
     yAxis: PreparedAxis[];
     xScale?: ChartScale;
-    yScale?: ChartScale[];
+    yScale?: (ChartScale | undefined)[];
     split: PreparedSplit;
     htmlLayout: HTMLElement | null;
     clipPathId: string;

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

@@ -56,6 +56,8 @@ export const useShapes = (args) => {
                     case 'bar-y': {
                         if (xAxis && xScale && (yScale === null || yScale === void 0 ? void 0 : yScale.length)) {
                             const preparedData = await prepareBarYData({
+                                boundsHeight,
+                                boundsWidth,
                                 series: chartSeries,
                                 seriesOptions,
                                 xAxis,

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

@@ -8,7 +8,7 @@ export declare const prepareLineData: (args: {
     xAxis: PreparedAxis;
     xScale: ChartScale;
     yAxis: PreparedAxis[];
-    yScale: ChartScale[];
+    yScale: (ChartScale | undefined)[];
     split: PreparedSplit;
     isOutsideBounds: (x: number, y: number) => boolean;
 }) => Promise<PreparedLineData[]>;

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

@@ -50,6 +50,9 @@ export const prepareLineData = async (args) => {
         const seriesYAxis = yAxis[yAxisIndex];
         const yAxisTop = ((_a = split.plots[seriesYAxis.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
         const seriesYScale = yScale[s.yAxis];
+        if (!seriesYScale) {
+            continue;
+        }
         const points = s.data.map((d) => ({
             x: getXValue({ point: d, points: s.data, xAxis, xScale }),
             y: yAxisTop +

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

@@ -7,6 +7,6 @@ export declare const prepareScatterData: (args: {
     xAxis: PreparedAxis;
     xScale: ChartScale;
     yAxis: PreparedAxis[];
-    yScale: ChartScale[];
+    yScale: (ChartScale | undefined)[];
     isOutsideBounds: (x: number, y: number) => boolean;
 }) => PreparedScatterData[];

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

@@ -9,6 +9,9 @@ export const prepareScatterData = (args) => {
         const yAxisIndex = get(s, 'yAxis', 0);
         const seriesYAxis = yAxis[yAxisIndex];
         const seriesYScale = yScale[yAxisIndex];
+        if (!seriesYScale) {
+            return acc;
+        }
         const filteredData = xAxis.type === 'category' || seriesYAxis.type === 'category'
             ? s.data
             : getFilteredLinearScatterData(s.data);
@@ -16,6 +19,9 @@ export const prepareScatterData = (args) => {
             var _a;
             const x = getXValue({ point: d, xAxis, xScale });
             const y = getYValue({ point: d, yAxis: seriesYAxis, yScale: seriesYScale });
+            if (typeof x === 'undefined' || typeof y === 'undefined') {
+                return;
+            }
             acc.push({
                 point: {
                     data: d,

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

@@ -8,5 +8,5 @@ export declare const prepareWaterfallData: (args: {
     xAxis: PreparedAxis;
     xScale: ChartScale;
     yAxis: PreparedAxis[];
-    yScale: ChartScale[];
+    yScale: (ChartScale | undefined)[];
 }) => Promise<PreparedWaterfallData[]>;

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

@@ -55,6 +55,9 @@ function getBandWidth(args) {
 export const prepareWaterfallData = async (args) => {
     const { series, seriesOptions, xAxis, xScale, yAxis: [yAxis], yScale: [yScale], } = args;
     const yLinearScale = yScale;
+    if (!yLinearScale) {
+        return [];
+    }
     const plotHeight = yLinearScale(yLinearScale.domain()[0]);
     const barMaxWidth = get(seriesOptions, 'waterfall.barMaxWidth');
     const barPadding = get(seriesOptions, 'waterfall.barPadding');
@@ -72,7 +75,7 @@ export const prepareWaterfallData = async (args) => {
     const rectWidth = Math.max(MIN_BAR_WIDTH, Math.min(bandWidth - rectGap, barMaxWidth));
     const yZero = getYValue({
         point: { y: 0 },
-        yScale,
+        yScale: yLinearScale,
         yAxis,
     });
     let totalValue = 0;
@@ -92,7 +95,7 @@ export const prepareWaterfallData = async (args) => {
         const height = yZero -
             getYValue({
                 point: { y: Math.abs(yValue) },
-                yScale,
+                yScale: yLinearScale,
                 yAxis,
             });
         let y;
@@ -101,7 +104,7 @@ export const prepareWaterfallData = async (args) => {
                 point: {
                     y: yValue > 0 ? yValue : 0,
                 },
-                yScale,
+                yScale: yLinearScale,
                 yAxis,
             });
         }

package/dist/cjs/hooks/useZoom/index.d.ts

@@ -12,7 +12,7 @@ interface UseZoomProps {
     xAxis: PreparedAxis | null;
     xScale?: ChartScale;
     yAxis: PreparedAxis[];
-    yScale?: ChartScale[];
+    yScale?: (ChartScale | undefined)[];
 }
 export declare function useZoom(props: UseZoomProps): void;
 export {};

package/dist/cjs/hooks/useZoom/types.d.ts

@@ -15,5 +15,5 @@ export interface ZoomState {
      * or the category index from the categories array specified in the axis settings (if the axis type is `category`).
      * The second element is the corresponding maximum value.
      */
-    y: [number, number][];
+    y: ([number, number] | undefined)[];
 }

package/dist/cjs/hooks/useZoom/utils.d.ts

@@ -7,6 +7,6 @@ export declare function selectionToZoomBounds(args: {
     xAxis: PreparedAxis;
     xScale: ChartScale;
     yAxes: PreparedAxis[];
-    yScales: ChartScale[];
+    yScales: (ChartScale | undefined)[];
     zoomType: PreparedZoom['type'];
 }): Partial<ZoomState>;