diff --git a/src/__snapshots__/x-axis.visual.test.tsx-snapshots/X-axis-max-1-chromium-linux.png b/src/__snapshots__/x-axis.visual.test.tsx-snapshots/X-axis-max-1-chromium-linux.png
new file mode 100644
index 00000000..afa91060
Binary files /dev/null and b/src/__snapshots__/x-axis.visual.test.tsx-snapshots/X-axis-max-1-chromium-linux.png differ
diff --git a/src/__snapshots__/x-axis.visual.test.tsx-snapshots/X-axis-min-1-chromium-linux.png b/src/__snapshots__/x-axis.visual.test.tsx-snapshots/X-axis-min-1-chromium-linux.png
new file mode 100644
index 00000000..8b6894c4
Binary files /dev/null and b/src/__snapshots__/x-axis.visual.test.tsx-snapshots/X-axis-min-1-chromium-linux.png differ
diff --git a/src/__snapshots__/x-axis.visual.test.tsx-snapshots/X-axis-min-max-1-chromium-linux.png b/src/__snapshots__/x-axis.visual.test.tsx-snapshots/X-axis-min-max-1-chromium-linux.png
new file mode 100644
index 00000000..a7037213
Binary files /dev/null and b/src/__snapshots__/x-axis.visual.test.tsx-snapshots/X-axis-min-max-1-chromium-linux.png differ
diff --git a/src/__snapshots__/y-axis.visual.test.tsx-snapshots/Y-axis-max-1-chromium-linux.png b/src/__snapshots__/y-axis.visual.test.tsx-snapshots/Y-axis-max-1-chromium-linux.png
new file mode 100644
index 00000000..d60578d1
Binary files /dev/null and b/src/__snapshots__/y-axis.visual.test.tsx-snapshots/Y-axis-max-1-chromium-linux.png differ
diff --git a/src/__snapshots__/y-axis.visual.test.tsx-snapshots/Y-axis-min-1-chromium-linux.png b/src/__snapshots__/y-axis.visual.test.tsx-snapshots/Y-axis-min-1-chromium-linux.png
new file mode 100644
index 00000000..ef697b00
Binary files /dev/null and b/src/__snapshots__/y-axis.visual.test.tsx-snapshots/Y-axis-min-1-chromium-linux.png differ
diff --git a/src/__snapshots__/y-axis.visual.test.tsx-snapshots/Y-axis-min-max-1-chromium-linux.png b/src/__snapshots__/y-axis.visual.test.tsx-snapshots/Y-axis-min-max-1-chromium-linux.png
new file mode 100644
index 00000000..16e01c4c
Binary files /dev/null and b/src/__snapshots__/y-axis.visual.test.tsx-snapshots/Y-axis-min-max-1-chromium-linux.png differ
diff --git a/src/__tests__/x-axis.visual.test.tsx b/src/__tests__/x-axis.visual.test.tsx
new file mode 100644
index 00000000..e8620249
--- /dev/null
+++ b/src/__tests__/x-axis.visual.test.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+import {expect, test} from '@playwright/experimental-ct-react';
+import cloneDeep from 'lodash/cloneDeep';
+import set from 'lodash/set';
+
+import {ChartTestStory} from '../../playwright/components/ChartTestStory';
+import {barYBasicData} from '../__stories__/__data__';
+
+test.describe('X-axis', () => {
+ test('min', async ({mount}) => {
+ const data = cloneDeep(barYBasicData);
+ set(data, 'xAxis.min', 60);
+ const component = await mount();
+ await expect(component.locator('svg')).toHaveScreenshot();
+ });
+
+ test('max', async ({mount}) => {
+ const data = cloneDeep(barYBasicData);
+ set(data, 'xAxis.max', 120);
+ const component = await mount();
+ await expect(component.locator('svg')).toHaveScreenshot();
+ });
+
+ test('min-max', async ({mount}) => {
+ const data = cloneDeep(barYBasicData);
+ set(data, 'xAxis.min', 60);
+ set(data, 'xAxis.max', 120);
+ const component = await mount();
+ await expect(component.locator('svg')).toHaveScreenshot();
+ });
+});
diff --git a/src/__tests__/y-axis.visual.test.tsx b/src/__tests__/y-axis.visual.test.tsx
new file mode 100644
index 00000000..75db3283
--- /dev/null
+++ b/src/__tests__/y-axis.visual.test.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+import {expect, test} from '@playwright/experimental-ct-react';
+import cloneDeep from 'lodash/cloneDeep';
+import set from 'lodash/set';
+
+import {ChartTestStory} from '../../playwright/components/ChartTestStory';
+import {scatterBasicData} from '../__stories__/__data__';
+
+test.describe('Y-axis', () => {
+ test('min', async ({mount}) => {
+ const data = cloneDeep(scatterBasicData);
+ set(data, 'yAxis[0].min', 5);
+ const component = await mount();
+ await expect(component.locator('svg')).toHaveScreenshot();
+ });
+
+ test('max', async ({mount}) => {
+ const data = cloneDeep(scatterBasicData);
+ set(data, 'yAxis[0].max', 8);
+ const component = await mount();
+ await expect(component.locator('svg')).toHaveScreenshot();
+ });
+
+ test('min-max', async ({mount}) => {
+ const data = cloneDeep(scatterBasicData);
+ set(data, 'yAxis[0].min', 5);
+ set(data, 'yAxis[0].max', 8);
+ const component = await mount();
+ await expect(component.locator('svg')).toHaveScreenshot();
+ });
+});
diff --git a/src/components/ChartInner/index.tsx b/src/components/ChartInner/index.tsx
index 3ab5e9fc..fb2363c2 100644
--- a/src/components/ChartInner/index.tsx
+++ b/src/components/ChartInner/index.tsx
@@ -1,5 +1,7 @@
import React from 'react';
+import {useUniqId} from '@gravity-ui/uikit';
+
import {useCrosshair} from '../../hooks';
import {EventType, block, getDispatcher} from '../../utils';
import {AxisX, AxisY} from '../Axis';
@@ -23,6 +25,7 @@ export const ChartInner = (props: ChartInnerProps) => {
const htmlLayerRef = React.useRef(null);
const plotRef = React.useRef(null);
const dispatcher = React.useMemo(() => getDispatcher(), []);
+ const clipPathId = useUniqId();
const {
boundsHeight,
boundsOffsetLeft,
@@ -125,6 +128,11 @@ export const ChartInner = (props: ChartInnerProps) => {
onTouchMove={throttledHandleTouchMove}
onClick={handleChartClick}
>
+
+
+
+
+
{title && }
{preparedSplit.plots.map((plot, index) => {
@@ -161,7 +169,7 @@ export const ChartInner = (props: ChartInnerProps) => {
)}
- {shapes}
+ {shapes}
{preparedLegend.enabled && (