@gravity-ui/charts 1.10.1 → 1.11.0

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ArrowRotateLeft } from '@gravity-ui/icons';
-import { Button, ButtonIcon } from '@gravity-ui/uikit';
+import { Button, ButtonIcon, useUniqId } from '@gravity-ui/uikit';
 import { useCrosshair } from '../../hooks';
 import { EventType, block, getDispatcher } from '../../utils';
 import { AxisX, AxisY } from '../Axis';
@@ -22,8 +22,9 @@ export const ChartInner = (props) => {
     const plotBeforeRef = React.useRef(null);
     const plotAfterRef = React.useRef(null);
     const dispatcher = React.useMemo(() => getDispatcher(), []);
-    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, handleZoomReset, legendConfig, legendItems, preparedSeries, preparedSplit, preparedLegend, prevHeight, prevWidth, shapes, shapesData, title, tooltip, xAxis, xScale, yAxis, yScale, svgXPos, svgBottomPos, } = useChartInnerProps(Object.assign(Object.assign({}, props), { dispatcher,
-        htmlLayout, svgContainer: svgRef.current, plotNode: plotRef.current }));
+    const clipPathId = useUniqId();
+    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, handleZoomReset, isOutsideBounds, legendConfig, legendItems, preparedSeries, preparedSplit, preparedLegend, prevHeight, prevWidth, shapes, shapesData, title, tooltip, xAxis, xScale, yAxis, yScale, svgXPos, svgBottomPos, } = useChartInnerProps(Object.assign(Object.assign({}, props), { dispatcher,
+        htmlLayout, svgContainer: svgRef.current, plotNode: plotRef.current, clipPathId }));
     const { tooltipPinned, togglePinTooltip, unpinTooltip } = useChartInnerState({
         dispatcher,
         tooltip,
@@ -42,6 +43,7 @@ export const ChartInner = (props) => {
         xAxis,
         yAxis,
         tooltipThrottle: tooltip.throttle,
+        isOutsideBounds,
     });
     const clickHandler = (_b = (_a = data.chart) === null || _a === void 0 ? void 0 : _a.events) === null || _b === void 0 ? void 0 : _b.click;
     const pointerMoveHandler = (_d = (_c = data.chart) === null || _c === void 0 ? void 0 : _c.events) === null || _d === void 0 ? void 0 : _d.pointermove;
@@ -83,6 +85,9 @@ export const ChartInner = (props) => {
             // We use onPointerMove here because onMouseMove works incorrectly when the zoom setting is enabled:
             // when starting to select an area, the tooltip remains in the position where the selection began
             onPointerMove: throttledHandleMouseMove, onMouseLeave: handleMouseLeave, onTouchStart: throttledHandleTouchMove, onTouchMove: throttledHandleTouchMove, onClick: handleChartClick },
+            React.createElement("defs", null,
+                React.createElement("clipPath", { id: clipPathId },
+                    React.createElement("rect", { x: 0, y: 0, width: boundsWidth, height: boundsHeight }))),
             title && React.createElement(Title, Object.assign({}, title, { chartWidth: width })),
             React.createElement("g", { transform: `translate(0, ${boundsOffsetTop})` }, preparedSplit.plots.map((plot, index) => {
                 return React.createElement(PlotTitle, { key: `plot-${index}`, title: plot.title });

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { Dispatch } from 'd3';
 import type { PreparedAxis, ShapeData } from '../../hooks';
 import type { useChartInnerState } from './useChartInnerState';
@@ -17,6 +17,7 @@ type Props = {
     xAxis: PreparedAxis | null;
     yAxis: PreparedAxis[];
     tooltipThrottle: number;
+    isOutsideBounds: (x: number, y: number) => boolean;
 };
 export declare function useChartInnerHandlers(props: Props): {
     handleChartClick: (event: React.MouseEvent<SVGSVGElement>) => void;

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

@@ -1,14 +1,10 @@
-import React from 'react';
 import { pointer } from 'd3';
 import throttle from 'lodash/throttle';
 import { IS_TOUCH_ENABLED } from '../../constants';
 import { EventType } from '../../utils';
 import { getClosestPoints } from '../../utils/chart/get-closest-data';
 export function useChartInnerHandlers(props) {
-    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, dispatcher, shapesData, svgContainer, togglePinTooltip, tooltipPinned, unpinTooltip, xAxis, yAxis, tooltipThrottle, } = props;
-    const isOutsideBounds = React.useCallback((x, y) => {
-        return x < 0 || x > boundsWidth || y < 0 || y > boundsHeight;
-    }, [boundsHeight, boundsWidth]);
+    const { boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, dispatcher, shapesData, svgContainer, togglePinTooltip, tooltipPinned, unpinTooltip, xAxis, yAxis, tooltipThrottle, isOutsideBounds, } = props;
     const handleMove = ([pointerX, pointerY], event) => {
         if (tooltipPinned) {
             return;

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

@@ -7,6 +7,7 @@ type Props = ChartInnerProps & {
     htmlLayout: HTMLElement | null;
     svgContainer: SVGGElement | null;
     plotNode: SVGGElement | null;
+    clipPathId: string;
 };
 export declare function useChartInnerProps(props: Props): {
     svgBottomPos: number | undefined;
@@ -17,6 +18,7 @@ export declare function useChartInnerProps(props: Props): {
     boundsWidth: number;
     handleLegendItemClick: import("../../hooks").OnLegendItemClick;
     handleZoomReset: (() => void) | undefined;
+    isOutsideBounds: (x: number, y: number) => boolean;
     legendConfig: {
         offset: {
             left: number;

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

@@ -8,7 +8,7 @@ import { useZoom } from '../../hooks/useZoom';
 import { hasAtLeastOneSeriesDataPerPlot } from './utils';
 export function useChartInnerProps(props) {
     var _a;
-    const { width, height, data, dispatcher, htmlLayout, svgContainer, plotNode } = props;
+    const { width, height, data, dispatcher, htmlLayout, svgContainer, plotNode, clipPathId } = props;
     const prevWidth = usePrevious(width);
     const prevHeight = usePrevious(height);
     const [zoomState, setZoomState] = React.useState({});
@@ -17,7 +17,7 @@ export function useChartInnerProps(props) {
         return getZoomedSeriesData({
             seriesData: data.series.data,
             xAxis: data.xAxis,
-            yAxises: data.yAxis,
+            yAxes: data.yAxis,
             zoomState,
         });
     }, [data.series.data, data.xAxis, data.yAxis, zoomState]);
@@ -60,6 +60,9 @@ export function useChartInnerProps(props) {
         yAxis,
         split: preparedSplit,
     });
+    const isOutsideBounds = React.useCallback((x, y) => {
+        return x < 0 || x > boundsWidth || y < 0 || y > boundsHeight;
+    }, [boundsHeight, boundsWidth]);
     const { shapes, shapesData } = useShapes({
         boundsWidth,
         boundsHeight,
@@ -72,12 +75,14 @@ export function useChartInnerProps(props) {
         yScale,
         split: preparedSplit,
         htmlLayout,
+        clipPathId,
+        isOutsideBounds,
     });
     const handleAttemptToSetZoomState = React.useCallback((nextZoomState) => {
         const nextZoomedSeriesData = getZoomedSeriesData({
             seriesData: zoomedSeriesData,
             xAxis: data.xAxis,
-            yAxises: data.yAxis,
+            yAxes: data.yAxis,
             zoomState: nextZoomState,
         });
         const hasData = hasAtLeastOneSeriesDataPerPlot(nextZoomedSeriesData, yAxis);
@@ -123,6 +128,7 @@ export function useChartInnerProps(props) {
         boundsWidth,
         handleLegendItemClick,
         handleZoomReset: Object.keys(zoomState).length > 0 ? handleZoomReset : undefined,
+        isOutsideBounds,
         legendConfig,
         legendItems,
         preparedLegend,

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

@@ -1,3 +1,3 @@
 import type { PreparedAxis } from '../../hooks/useChartOptions/types';
 import type { ChartSeries } from '../../types';
-export declare function hasAtLeastOneSeriesDataPerPlot(seriesData: ChartSeries[], yAxises?: PreparedAxis[]): boolean;
+export declare function hasAtLeastOneSeriesDataPerPlot(seriesData: ChartSeries[], yAxes?: PreparedAxis[]): boolean;

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

@@ -1,6 +1,6 @@
-export function hasAtLeastOneSeriesDataPerPlot(seriesData, yAxises = []) {
+export function hasAtLeastOneSeriesDataPerPlot(seriesData, yAxes = []) {
     const hasDataMap = new Map();
-    yAxises.forEach((yAxis) => {
+    yAxes.forEach((yAxis) => {
         var _a;
         const plotIndex = (_a = yAxis.plotIndex) !== null && _a !== void 0 ? _a : 0;
         if (!hasDataMap.has(plotIndex)) {
@@ -16,7 +16,7 @@ export function hasAtLeastOneSeriesDataPerPlot(seriesData, yAxises = []) {
         if ('yAxis' in seriesDataChunk && typeof seriesDataChunk.yAxis === 'number') {
             yAxisIndex = seriesDataChunk.yAxis;
         }
-        const yAxis = yAxises[yAxisIndex];
+        const yAxis = yAxes[yAxisIndex];
         const plotIndex = (_a = yAxis === null || yAxis === void 0 ? void 0 : yAxis.plotIndex) !== null && _a !== void 0 ? _a : 0;
         if (!hasDataMap.get(plotIndex)) {
             if (seriesDataChunk.data.length > 0) {

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

@@ -312,8 +312,11 @@ export const Legend = (props) => {
                     },
                 });
                 const tickTop = legend.title.height + legend.title.margin + rectHeight;
+                const legendAxisClassname = b('axis');
+                svgElement.selectAll(`.${legendAxisClassname}`).remove();
                 svgElement
                     .append('g')
+                    .attr('class', legendAxisClassname)
                     .attr('transform', `translate(0, ${tickTop})`)
                     .call(xAxisGenerator);
                 legendWidth = legend.width;

package/dist/cjs/hooks/hooks-utils/zoom.d.ts

@@ -4,5 +4,5 @@ export declare function getZoomedSeriesData(args: {
     seriesData: ChartSeries[];
     zoomState: Partial<ZoomState>;
     xAxis?: ChartXAxis;
-    yAxises?: ChartYAxis[];
+    yAxes?: ChartYAxis[];
 }): ChartSeries[];

package/dist/cjs/hooks/hooks-utils/zoom.js

@@ -40,7 +40,7 @@ function isValueInRange(args) {
     }
 }
 export function getZoomedSeriesData(args) {
-    const { seriesData, xAxis, yAxises, zoomState } = args;
+    const { seriesData, xAxis, yAxes, zoomState } = args;
     if (Object.keys(zoomState).length < 0) {
         return seriesData;
     }
@@ -65,7 +65,7 @@ export function getZoomedSeriesData(args) {
                 const [yMin, yMax] = zoomState.y[yAxisIndex];
                 const y = 'y' in point ? point.y : undefined;
                 inYRange = isValueInRange({
-                    axis: yAxises === null || yAxises === void 0 ? void 0 : yAxises[yAxisIndex],
+                    axis: yAxes === null || yAxes === void 0 ? void 0 : yAxes[yAxisIndex],
                     value: y,
                     min: yMin,
                     max: yMax,

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { extent, scaleBand, scaleLinear, scaleLog, scaleUtc } from 'd3';
 import get from 'lodash/get';
 import { DEFAULT_AXIS_TYPE } from '../../constants';
-import { CHART_SERIES_WITH_VOLUME_ON_Y_AXIS, getAxisHeight, getDataCategoryValue, getDefaultMaxXAxisValue, getDomainDataXBySeries, getDomainDataYBySeries, getOnlyVisibleSeries, isAxisRelatedSeries, isSeriesWithCategoryValues, } from '../../utils';
+import { CHART_SERIES_WITH_VOLUME_ON_Y_AXIS, getAxisHeight, getDataCategoryValue, getDefaultMaxXAxisValue, getDefaultMinXAxisValue, getDomainDataXBySeries, getDomainDataYBySeries, getOnlyVisibleSeries, isAxisRelatedSeries, isSeriesWithCategoryValues, } from '../../utils';
 const isNumericalArrayData = (data) => {
     return data.every((d) => typeof d === 'number' || d === null);
 };
@@ -20,7 +20,8 @@ const filterCategoriesByVisibleSeries = (args) => {
 };
 export function createYScale(axis, series, boundsHeight) {
     const yType = get(axis, 'type', DEFAULT_AXIS_TYPE);
-    const yMin = get(axis, 'min');
+    const yMinProps = get(axis, 'min');
+    const yMaxProps = get(axis, 'max');
     const yCategories = get(axis, 'categories');
     const yTimestamps = get(axis, 'timestamps');
     switch (yType) {
@@ -29,14 +30,18 @@ export function createYScale(axis, series, boundsHeight) {
             const domain = getDomainDataYBySeries(series);
             const range = [boundsHeight, boundsHeight * axis.maxPadding];
             if (isNumericalArrayData(domain)) {
-                const [domainYMin, domainMax] = extent(domain);
-                const yMinValue = typeof yMin === 'number' ? yMin : domainYMin;
-                let yMaxValue = domainMax;
-                if (series.some((s) => CHART_SERIES_WITH_VOLUME_ON_Y_AXIS.includes(s.type))) {
-                    yMaxValue = Math.max(yMaxValue, 0);
+                const [yMinDomain, yMaxDomain] = extent(domain);
+                const yMin = typeof yMinProps === 'number' ? yMinProps : yMinDomain;
+                let yMax;
+                if (typeof yMaxProps === 'number') {
+                    yMax = yMaxProps;
+                }
+                else {
+                    const hasSeriesWithVolumeOnYAxis = series.some((s) => CHART_SERIES_WITH_VOLUME_ON_Y_AXIS.includes(s.type));
+                    yMax = hasSeriesWithVolumeOnYAxis ? Math.max(yMaxDomain, 0) : yMaxDomain;
                 }
                 const scaleFn = yType === 'logarithmic' ? scaleLog : scaleLinear;
-                return scaleFn().domain([yMinValue, yMaxValue]).range(range).nice();
+                return scaleFn().domain([yMin, yMax]).range(range).nice();
             }
             break;
         }
@@ -54,13 +59,17 @@ export function createYScale(axis, series, boundsHeight) {
         case 'datetime': {
             const range = [boundsHeight, boundsHeight * axis.maxPadding];
             if (yTimestamps) {
-                const [yMin, yMax] = extent(yTimestamps);
+                const [yMinTimestamp, yMaxTimestamp] = extent(yTimestamps);
+                const yMin = typeof yMinProps === 'number' ? yMinProps : yMinTimestamp;
+                const yMax = typeof yMaxProps === 'number' ? yMaxProps : yMaxTimestamp;
                 return scaleUtc().domain([yMin, yMax]).range(range).nice();
             }
             else {
                 const domain = getDomainDataYBySeries(series);
                 if (isNumericalArrayData(domain)) {
-                    const [yMin, yMax] = extent(domain);
+                    const [yMinTimestamp, yMaxTimestamp] = extent(domain);
+                    const yMin = typeof yMinProps === 'number' ? yMinProps : yMinTimestamp;
+                    const yMax = typeof yMaxProps === 'number' ? yMaxProps : yMaxTimestamp;
                     return scaleUtc().domain([yMin, yMax]).range(range).nice();
                 }
             }
@@ -86,9 +95,10 @@ function calculateXAxisPadding(series) {
     });
     return result;
 }
+// eslint-disable-next-line complexity
 export function createXScale(axis, series, boundsWidth, hasZoomX) {
-    const xMin = get(axis, 'min');
-    const xMax = getDefaultMaxXAxisValue(series);
+    const xMinProps = get(axis, 'min');
+    const xMaxProps = get(axis, 'max');
     const xType = get(axis, 'type', DEFAULT_AXIS_TYPE);
     const xCategories = get(axis, 'categories');
     const xTimestamps = get(axis, 'timestamps');
@@ -100,11 +110,28 @@ export function createXScale(axis, series, boundsWidth, hasZoomX) {
         case 'logarithmic': {
             const domain = getDomainDataXBySeries(series);
             if (isNumericalArrayData(domain)) {
-                const [domainXMin, domainXMax] = extent(domain);
-                const xMinValue = typeof xMin === 'number' ? xMin : domainXMin;
-                const xMaxValue = typeof xMax === 'number' ? Math.max(xMax, domainXMax) : domainXMax;
+                const [xMinDomain, xMaxDomain] = extent(domain);
+                let xMin;
+                let xMax;
+                if (typeof xMinProps === 'number') {
+                    xMin = xMinProps;
+                }
+                else {
+                    const xMinDefault = getDefaultMinXAxisValue(series);
+                    xMin = xMinDefault !== null && xMinDefault !== void 0 ? xMinDefault : xMinDomain;
+                }
+                if (typeof xMaxProps === 'number') {
+                    xMax = xMaxProps;
+                }
+                else {
+                    const xMaxDefault = getDefaultMaxXAxisValue(series);
+                    xMax =
+                        typeof xMaxDefault === 'number'
+                            ? Math.max(xMaxDefault, xMaxDomain)
+                            : xMaxDomain;
+                }
                 const scaleFn = xType === 'logarithmic' ? scaleLog : scaleLinear;
-                const scale = scaleFn().domain([xMinValue, xMaxValue]).range(xRange);
+                const scale = scaleFn().domain([xMin, xMax]).range(xRange);
                 if (!hasZoomX) {
                     scale.nice();
                 }
@@ -129,7 +156,9 @@ export function createXScale(axis, series, boundsWidth, hasZoomX) {
         }
         case 'datetime': {
             if (xTimestamps) {
-                const [xMin, xMax] = extent(xTimestamps);
+                const [xMinTimestamp, xMaxTimestamp] = extent(xTimestamps);
+                const xMin = typeof xMinProps === 'number' ? xMinProps : xMinTimestamp;
+                const xMax = typeof xMaxProps === 'number' ? xMaxProps : xMaxTimestamp;
                 const scale = scaleUtc().domain([xMin, xMax]).range(xRange);
                 if (!hasZoomX) {
                     scale.nice();
@@ -139,7 +168,9 @@ export function createXScale(axis, series, boundsWidth, hasZoomX) {
             else {
                 const domain = getDomainDataXBySeries(series);
                 if (isNumericalArrayData(domain)) {
-                    const [xMin, xMax] = extent(domain);
+                    const [xMinTimestamp, xMaxTimestamp] = extent(domain);
+                    const xMin = typeof xMinProps === 'number' ? xMinProps : xMinTimestamp;
+                    const xMax = typeof xMaxProps === 'number' ? xMaxProps : xMaxTimestamp;
                     const scale = scaleUtc().domain([xMin, xMax]).range(xRange);
                     if (!hasZoomX) {
                         scale.nice();

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

@@ -1,6 +1,6 @@
 import get from 'lodash/get';
 import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, axisCrosshairDefaults, axisLabelsDefaults, xAxisTitleDefaults, } from '../../constants';
-import { CHART_SERIES_WITH_VOLUME_ON_X_AXIS, calculateCos, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getMaxTickCount, getTicksCount, getXAxisItems, hasOverlappingLabels, wrapText, } from '../../utils';
+import { calculateCos, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getMaxTickCount, getTicksCount, getXAxisItems, hasOverlappingLabels, wrapText, } from '../../utils';
 import { createXScale } from '../useAxisScales';
 async function getLabelSettings({ axis, seriesData, width, autoRotation = true, }) {
     const scale = createXScale(axis, seriesData, width);
@@ -36,18 +36,6 @@ async function getLabelSettings({ axis, seriesData, width, autoRotation = true,
     const maxHeight = rotation ? calculateCos(rotation) * axis.labels.maxWidth : labelsHeight;
     return { height: Math.min(maxHeight, labelsHeight), rotation };
 }
-function getAxisMin(axis, series) {
-    const min = axis === null || axis === void 0 ? void 0 : axis.min;
-    if (typeof min === 'undefined' &&
-        (series === null || series === void 0 ? void 0 : series.some((s) => CHART_SERIES_WITH_VOLUME_ON_X_AXIS.includes(s.type)))) {
-        return series.reduce((minValue, s) => {
-            // @ts-expect-error
-            const minYValue = s.data.reduce((res, d) => Math.min(res, get(d, 'x', 0)), 0);
-            return Math.min(minValue, minYValue);
-        }, 0);
-    }
-    return min;
-}
 export const getPreparedXAxis = async ({ xAxis, seriesData, width, }) => {
     var _a;
     const titleText = get(xAxis, 'title.text', '');
@@ -92,7 +80,8 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, }) => {
             align: get(xAxis, 'title.align', xAxisTitleDefaults.align),
             maxRowCount: get(xAxis, 'title.maxRowCount', xAxisTitleDefaults.maxRowCount),
         },
-        min: getAxisMin(xAxis, seriesData),
+        min: get(xAxis, 'min'),
+        max: get(xAxis, 'max'),
         maxPadding: get(xAxis, 'maxPadding', 0.01),
         grid: {
             enabled: get(xAxis, 'grid.enabled', true),

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

@@ -1,6 +1,6 @@
 import get from 'lodash/get';
 import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_TYPE, axisCrosshairDefaults, axisLabelsDefaults, yAxisTitleDefaults, } from '../../constants';
-import { CHART_SERIES_WITH_VOLUME_ON_Y_AXIS, formatAxisTickLabel, getClosestPointsRange, getHorisontalSvgTextHeight, getLabelsSize, getScaleTicks, getWaterfallPointSubtotal, isAxisRelatedSeries, wrapText, } from '../../utils';
+import { formatAxisTickLabel, getClosestPointsRange, getDefaultMinYAxisValue, getHorisontalSvgTextHeight, getLabelsSize, getScaleTicks, isAxisRelatedSeries, wrapText, } from '../../utils';
 import { createYScale } from '../useAxisScales';
 const getAxisLabelMaxWidth = async (args) => {
     const { axis, seriesData } = args;
@@ -23,26 +23,6 @@ const getAxisLabelMaxWidth = async (args) => {
     });
     return size.maxWidth;
 };
-function getAxisMin(axis, seriesData) {
-    const min = axis === null || axis === void 0 ? void 0 : axis.min;
-    if (typeof min === 'undefined' &&
-        (seriesData === null || seriesData === void 0 ? void 0 : seriesData.some((s) => CHART_SERIES_WITH_VOLUME_ON_Y_AXIS.includes(s.type)))) {
-        return seriesData.reduce((minValue, s) => {
-            switch (s.type) {
-                case 'waterfall': {
-                    const minSubTotal = s.data.reduce((res, d) => Math.min(res, getWaterfallPointSubtotal(d, s) || 0), 0);
-                    return Math.min(minValue, minSubTotal);
-                }
-                default: {
-                    // @ts-expect-error
-                    const minYValue = s.data.reduce((res, d) => Math.min(res, get(d, 'y', 0)), 0);
-                    return Math.min(minValue, minYValue);
-                }
-            }
-        }, 0);
-    }
-    return min;
-}
 export const getPreparedYAxis = ({ seriesData, yAxis, height, }) => {
     const axisByPlot = [];
     const axisItems = yAxis || [{}];
@@ -51,7 +31,7 @@ export const getPreparedYAxis = ({ seriesData, yAxis, height, }) => {
         return Promise.resolve([]);
     }
     return Promise.all(axisItems.map(async (axisItem) => {
-        var _a;
+        var _a, _b;
         const plotIndex = get(axisItem, 'plotIndex', 0);
         const firstPlotAxis = !axisByPlot[plotIndex];
         if (firstPlotAxis) {
@@ -104,11 +84,12 @@ export const getPreparedYAxis = ({ seriesData, yAxis, height, }) => {
                 align: get(axisItem, 'title.align', yAxisTitleDefaults.align),
                 maxRowCount: titleMaxRowsCount,
             },
-            min: getAxisMin(axisItem, seriesData),
+            min: (_a = get(axisItem, 'min')) !== null && _a !== void 0 ? _a : getDefaultMinYAxisValue(seriesData),
+            max: get(axisItem, 'max'),
             maxPadding: get(axisItem, 'maxPadding', 0.05),
             grid: {
                 enabled: get(axisItem, 'grid.enabled', firstPlotAxis ||
-                    (!firstPlotAxis && !((_a = axisByPlot[plotIndex][0].visible) !== null && _a !== void 0 ? _a : true))),
+                    (!firstPlotAxis && !((_b = axisByPlot[plotIndex][0].visible) !== null && _b !== void 0 ? _b : true))),
             },
             ticks: {
                 pixelInterval: get(axisItem, 'ticks.pixelInterval'),

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

@@ -7,6 +7,7 @@ type Args = {
     preparedData: PreparedAreaData[];
     seriesOptions: PreparedSeriesOptions;
     htmlLayout: HTMLElement | null;
+    clipPathId: string;
 };
 export declare const AreaSeriesShapes: (args: Args) => React.JSX.Element;
 export {};

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

@@ -7,22 +7,25 @@ import { getMarkerHaloVisibility, getMarkerVisibility, renderMarker, selectMarke
 import { setActiveState } from '../utils';
 const b = block('area');
 export const AreaSeriesShapes = (args) => {
-    const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
+    const { dispatcher, preparedData, seriesOptions, htmlLayout, clipPathId } = args;
     const hoveredDataRef = React.useRef(null);
-    const ref = React.useRef(null);
+    const plotRef = React.useRef(null);
+    const markersRef = React.useRef(null);
     React.useEffect(() => {
         var _a;
-        if (!ref.current) {
+        if (!plotRef.current || !markersRef.current) {
             return () => { };
         }
-        const svgElement = select(ref.current);
+        const plotSvgElement = select(plotRef.current);
+        const markersSvgElement = select(markersRef.current);
         const hoverOptions = get(seriesOptions, 'area.states.hover');
         const inactiveOptions = get(seriesOptions, 'area.states.inactive');
         const line = lineGenerator()
             .x((d) => d.x)
             .y((d) => d.y);
-        svgElement.selectAll('*').remove();
-        const shapeSelection = svgElement
+        plotSvgElement.selectAll('*').remove();
+        markersSvgElement.selectAll('*').remove();
+        const shapeSelection = plotSvgElement
             .selectAll('shape')
             .data(preparedData)
             .join('g')
@@ -53,7 +56,7 @@ export const AreaSeriesShapes = (args) => {
         if (!((_a = preparedData[0]) === null || _a === void 0 ? void 0 : _a.series.dataLabels.allowOverlap)) {
             dataLabels = filterOverlappingLabels(dataLabels);
         }
-        const labelsSelection = svgElement
+        const labelsSelection = plotSvgElement
             .selectAll('text')
             .data(dataLabels)
             .join('text')
@@ -66,7 +69,7 @@ export const AreaSeriesShapes = (args) => {
             .style('font-weight', (d) => d.style.fontWeight || null)
             .style('fill', (d) => d.style.fontColor || null);
         const markers = preparedData.reduce((acc, d) => acc.concat(d.markers), []);
-        const markerSelection = svgElement
+        const markerSelection = markersSvgElement
             .selectAll('marker')
             .data(markers)
             .join('g')
@@ -144,6 +147,7 @@ export const AreaSeriesShapes = (args) => {
         };
     }, [dispatcher, preparedData, seriesOptions]);
     return (React.createElement(React.Fragment, null,
-        React.createElement("g", { ref: ref, className: b() }),
+        React.createElement("g", { ref: plotRef, className: b(), clipPath: `url(#${clipPathId})` }),
+        React.createElement("g", { ref: markersRef }),
         React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
 };

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

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

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

@@ -53,7 +53,7 @@ function getXValues(series, xAxis, xScale) {
     return sort(Array.from(xValues), ([_x, xValue]) => xValue);
 }
 export const prepareAreaData = async (args) => {
-    const { series, xAxis, xScale, yAxis, yScale, boundsHeight: plotHeight } = args;
+    const { series, xAxis, xScale, yAxis, yScale, boundsHeight: plotHeight, isOutsideBounds } = args;
     const [_xMin, xRangeMax] = xScale.range();
     const xMax = xRangeMax / (1 - xAxis.maxPadding);
     const result = [];
@@ -142,6 +142,7 @@ export const prepareAreaData = async (args) => {
                     point: p,
                     active: true,
                     hovered: false,
+                    clipped: isOutsideBounds(p.x, p.y),
                 }));
             }
             seriesStackData.push({

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

@@ -12,6 +12,7 @@ export type MarkerData = {
     point: PointData;
     active: boolean;
     hovered: boolean;
+    clipped: boolean;
 };
 export type PreparedAreaData = {
     id: string;

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

@@ -9,5 +9,6 @@ type Args = {
     preparedData: PreparedBarXData[];
     seriesOptions: PreparedSeriesOptions;
     htmlLayout: HTMLElement | null;
+    clipPathId: string;
 };
 export declare const BarXSeriesShapes: (args: Args) => React.JSX.Element;

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

@@ -8,7 +8,7 @@ export { prepareBarXData } from './prepare-data';
 export * from './types';
 const b = block('bar-x');
 export const BarXSeriesShapes = (args) => {
-    const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
+    const { dispatcher, preparedData, seriesOptions, htmlLayout, clipPathId } = args;
     const hoveredDataRef = React.useRef(null);
     const ref = React.useRef(null);
     React.useEffect(() => {
@@ -110,6 +110,6 @@ export const BarXSeriesShapes = (args) => {
         };
     }, [dispatcher, preparedData, seriesOptions]);
     return (React.createElement(React.Fragment, null,
-        React.createElement("g", { ref: ref, className: b() }),
+        React.createElement("g", { ref: ref, className: b(), clipPath: `url(#${clipPathId})` }),
         React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
 };

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

@@ -8,5 +8,6 @@ type Args = {
     preparedData: PreparedBarYData[];
     seriesOptions: PreparedSeriesOptions;
     htmlLayout: HTMLElement | null;
+    clipPathId: string;
 };
 export declare const BarYSeriesShapes: (args: Args) => React.JSX.Element;

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

@@ -7,7 +7,7 @@ import { getRectPath } from '../utils';
 export { prepareBarYData } from './prepare-data';
 const b = block('bar-y');
 export const BarYSeriesShapes = (args) => {
-    const { dispatcher, preparedData, seriesOptions, htmlLayout } = args;
+    const { dispatcher, preparedData, seriesOptions, htmlLayout, clipPathId } = args;
     const hoveredDataRef = React.useRef(null);
     const ref = React.useRef(null);
     React.useEffect(() => {
@@ -99,6 +99,6 @@ export const BarYSeriesShapes = (args) => {
         };
     }, [dispatcher, preparedData, seriesOptions]);
     return (React.createElement(React.Fragment, null,
-        React.createElement("g", { ref: ref, className: b() }),
+        React.createElement("g", { ref: ref, className: b(), clipPath: `url(#${clipPathId})` }),
         React.createElement(HtmlLayer, { preparedData: preparedData, htmlLayout: htmlLayout })));
 };

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

@@ -28,6 +28,8 @@ type Args = {
     yScale?: ChartScale[];
     split: PreparedSplit;
     htmlLayout: HTMLElement | null;
+    clipPathId: string;
+    isOutsideBounds: (x: number, y: number) => boolean;
 };
 export declare const useShapes: (args: Args) => {
     shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];