@gravity-ui/charts 1.38.1 → 1.38.2

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Dispatch } from 'd3';
-import type { LegendItem, PreparedChart, PreparedLegend, PreparedSeries, RangeSliderState, ZoomState } from '../../hooks';
+import type { PreparedChart, PreparedLegend, RangeSliderState, ZoomState } from '../../hooks';
 import type { LegendConfig } from '../../types';
 import type { ChartInnerProps } from './types';
 type Props = ChartInnerProps & {
@@ -13,19 +13,8 @@ type Props = ChartInnerProps & {
     zoomState: Partial<ZoomState>;
     rangeSliderState?: RangeSliderState;
 };
-type LegendState = {
-    legendConfig?: LegendConfig;
-    legendItems: LegendItem[][];
-};
-export declare function useLegend({ preparedLegend, preparedChart, preparedSeries, width, height, }: {
-    preparedLegend: PreparedLegend | null;
-    preparedChart: PreparedChart;
-    preparedSeries: PreparedSeries[];
-    width: number;
-    height: number;
-}): LegendState;
 export declare function useChartInnerProps(props: Props): {
-    allPreparedSeries: PreparedSeries[];
+    allPreparedSeries: import("../../hooks").PreparedSeries[];
     boundsHeight: number;
     boundsOffsetLeft: number;
     boundsOffsetTop: number;
@@ -33,9 +22,9 @@ export declare function useChartInnerProps(props: Props): {
     handleLegendItemClick: import("../../hooks").OnLegendItemClick;
     isOutsideBounds: (x: number, y: number) => boolean;
     legendConfig: LegendConfig | undefined;
-    legendItems: LegendItem[][];
+    legendItems: import("../../hooks").LegendItem[][];
     preparedLegend: PreparedLegend | null;
-    preparedSeries: PreparedSeries[];
+    preparedSeries: import("../../hooks").PreparedSeries[];
     preparedSeriesOptions: import("../../constants").SeriesOptionsDefaults;
     preparedSplit: import("../../hooks").PreparedSplit;
     prevHeight: number | undefined;

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

@@ -1,11 +1,10 @@
 import React from 'react';
-import isEqual from 'lodash/isEqual';
 import { DEFAULT_PALETTE, SERIES_TYPE } from '../../constants';
 import { useAxis, useAxisScales, useChartDimensions, useNormalizedOriginalData, usePrevious, useSeries, useShapes, useSplit, useYAxisLabelWidth, useZoom, } from '../../hooks';
 import { getYAxisWidth } from '../../hooks/useChartDimensions/utils';
-import { getLegendComponents } from '../../hooks/useSeries/prepare-legend';
 import { getPreparedOptions } from '../../hooks/useSeries/prepare-options';
 import { getEffectiveXRange, getZoomedSeriesData } from '../../utils';
+import { useLegend } from './useLegend';
 import { hasAtLeastOneSeriesDataPerPlot } from './utils';
 const CLIP_PATH_BY_SERIES_TYPE = {
     [SERIES_TYPE.Scatter]: false,
@@ -35,45 +34,6 @@ function getBoundsOffsetLeft(args) {
     }, 0);
     return chartMarginLeft + legendOffset + leftAxisWidth;
 }
-export function useLegend({ preparedLegend, preparedChart, preparedSeries, width, height, }) {
-    const [legendState, setLegend] = React.useState({
-        legendConfig: undefined,
-        legendItems: [],
-    });
-    const legendStateRunRef = React.useRef(0);
-    const prevLegendStateValue = React.useRef(legendState);
-    const legendStateReady = React.useRef(false);
-    React.useEffect(() => {
-        legendStateRunRef.current++;
-        legendStateReady.current = false;
-        (async function () {
-            const currentRun = legendStateRunRef.current;
-            if (!preparedLegend) {
-                return;
-            }
-            const newStateValue = await getLegendComponents({
-                chartWidth: width,
-                chartHeight: height,
-                chartMargin: preparedChart.margin,
-                series: preparedSeries,
-                preparedLegend,
-            });
-            if (legendStateRunRef.current === currentRun) {
-                if (!isEqual(prevLegendStateValue.current, newStateValue)) {
-                    setLegend(newStateValue);
-                    prevLegendStateValue.current = newStateValue;
-                }
-                legendStateReady.current = true;
-            }
-        })();
-    }, [height, preparedChart.margin, preparedLegend, preparedSeries, width]);
-    return legendStateReady.current
-        ? legendState
-        : {
-            legendConfig: undefined,
-            legendItems: [],
-        };
-}
 export function useChartInnerProps(props) {
     const { clipPathId, data, dispatcher, height, htmlLayout, plotNode, preparedChart, rangeSliderState, width, updateZoomState, zoomState, } = props;
     const prevWidth = usePrevious(width);

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

@@ -0,0 +1,14 @@
+import type { LegendItem, PreparedChart, PreparedLegend, PreparedSeries } from '../../hooks';
+import type { LegendConfig } from '../../types';
+type LegendState = {
+    legendConfig?: LegendConfig;
+    legendItems: LegendItem[][];
+};
+export declare function useLegend({ preparedLegend, preparedChart, preparedSeries, width, height, }: {
+    preparedLegend: PreparedLegend | null;
+    preparedChart: PreparedChart;
+    preparedSeries: PreparedSeries[];
+    width: number;
+    height: number;
+}): LegendState;
+export {};

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import isEqual from 'lodash/isEqual';
+import { getLegendComponents } from '../../hooks/useSeries/prepare-legend';
+export function useLegend({ preparedLegend, preparedChart, preparedSeries, width, height, }) {
+    const [legendState, setLegend] = React.useState({
+        legendConfig: undefined,
+        legendItems: [],
+    });
+    const legendStateRunRef = React.useRef(0);
+    const prevLegendStateValue = React.useRef(legendState);
+    const legendStateReady = React.useRef(false);
+    React.useEffect(() => {
+        legendStateRunRef.current++;
+        legendStateReady.current = false;
+        (async function () {
+            const currentRun = legendStateRunRef.current;
+            if (!preparedLegend) {
+                return;
+            }
+            const newStateValue = await getLegendComponents({
+                chartWidth: width,
+                chartHeight: height,
+                chartMargin: preparedChart.margin,
+                series: preparedSeries,
+                preparedLegend,
+            });
+            if (legendStateRunRef.current === currentRun) {
+                if (!isEqual(prevLegendStateValue.current, newStateValue)) {
+                    setLegend(newStateValue);
+                    prevLegendStateValue.current = newStateValue;
+                }
+                legendStateReady.current = true;
+            }
+        })();
+    }, [height, preparedChart.margin, preparedLegend, preparedSeries, width]);
+    return legendState;
+}

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

@@ -142,7 +142,7 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, boundsWidth,
                 : (_j = xAxis === null || xAxis === void 0 ? void 0 : xAxis.ticks) === null || _j === void 0 ? void 0 : _j.pixelInterval,
         },
         tickMarks: {
-            enabled: get(xAxis, 'tickMarks.enabled', axisTickMarksDefaults.enabled),
+            enabled: isAxisVisible && get(xAxis, 'tickMarks.enabled', axisTickMarksDefaults.enabled),
             length: get(xAxis, 'tickMarks.length', axisTickMarksDefaults.length),
         },
         position: 'bottom',

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

@@ -52,7 +52,7 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
     return Promise.all(
     // eslint-disable-next-line complexity
     axisItems.map(async (axisItem, axisIndex) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
         const plotIndex = get(axisItem, 'plotIndex', 0);
         const firstPlotAxis = !axisByPlot[plotIndex];
         if (firstPlotAxis) {
@@ -62,7 +62,8 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
         const defaultAxisPosition = firstPlotAxis ? 'left' : 'right';
         const axisPosition = get(axisItem, 'position', defaultAxisPosition);
         const axisSeriesData = seriesData.filter((s) => get(s, 'yAxis', 0) === axisIndex);
-        const labelsEnabled = get(axisItem, 'labels.enabled', true);
+        const isAxisVisible = (_a = axisItem.visible) !== null && _a !== void 0 ? _a : true;
+        const labelsEnabled = isAxisVisible && get(axisItem, 'labels.enabled', true);
         const labelsStyle = {
             fontSize: get(axisItem, 'labels.style.fontSize', DEFAULT_AXIS_LABEL_FONT_SIZE),
         };
@@ -70,7 +71,7 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
         const labelsLineHeight = labelsHtml
             ? getHorizontalHtmlTextHeight({ text: 'Tmp', style: labelsStyle })
             : getHorizontalSvgTextHeight({ text: 'Tmp', style: labelsStyle });
-        const titleText = get(axisItem, 'title.text', '');
+        const titleText = isAxisVisible ? get(axisItem, 'title.text', '') : '';
         const titleStyle = Object.assign(Object.assign({}, yAxisTitleDefaults.style), get(axisItem, 'title.style'));
         const titleMaxRowsCount = get(axisItem, 'title.maxRowCount', yAxisTitleDefaults.maxRowCount);
         const estimatedTitleRows = (await wrapText({
@@ -78,24 +79,23 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
             style: titleStyle,
             width: height,
         })).slice(0, titleMaxRowsCount);
-        const titleRotation = getAxisTitleRotation((_a = axisItem.title) === null || _a === void 0 ? void 0 : _a.rotation, axisPosition);
+        const titleRotation = getAxisTitleRotation((_b = axisItem.title) === null || _b === void 0 ? void 0 : _b.rotation, axisPosition);
         const titleMaxWidth = titleRotation === 0
             ? calculateNumericProperty({
-                value: (_c = (_b = axisItem.title) === null || _b === void 0 ? void 0 : _b.maxWidth) !== null && _c !== void 0 ? _c : '20%',
+                value: (_d = (_c = axisItem.title) === null || _c === void 0 ? void 0 : _c.maxWidth) !== null && _d !== void 0 ? _d : '20%',
                 base: width,
             })
             : calculateNumericProperty({
-                value: (_e = (_d = axisItem.title) === null || _d === void 0 ? void 0 : _d.maxWidth) !== null && _e !== void 0 ? _e : '100%',
+                value: (_f = (_e = axisItem.title) === null || _e === void 0 ? void 0 : _e.maxWidth) !== null && _f !== void 0 ? _f : '100%',
                 base: height,
             });
         const titleSize = await getLabelsSize({
             labels: [titleText],
             style: titleStyle,
-            html: (_f = axisItem.title) === null || _f === void 0 ? void 0 : _f.html,
+            html: (_g = axisItem.title) === null || _g === void 0 ? void 0 : _g.html,
         });
         const axisType = get(axisItem, 'type', DEFAULT_AXIS_TYPE);
-        const shouldHideGrid = axisItem.visible === false ||
-            axisSeriesData.some((s) => s.type === SERIES_TYPE.Heatmap);
+        const shouldHideGrid = !isAxisVisible || axisSeriesData.some((s) => s.type === SERIES_TYPE.Heatmap);
         let gridEnabled;
         if (shouldHideGrid) {
             gridEnabled = false;
@@ -108,7 +108,7 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
             else {
                 gridEnabled = shouldSyncAxisWithPrimary(axisItem, axisByPlot[plotIndex][0])
                     ? false
-                    : !((_g = axisByPlot[plotIndex][0].visible) !== null && _g !== void 0 ? _g : true);
+                    : !((_h = axisByPlot[plotIndex][0].visible) !== null && _h !== void 0 ? _h : true);
             }
         }
         const preparedAxis = {
@@ -126,7 +126,7 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
                 width: 0,
                 height: 0,
                 lineHeight: labelsLineHeight,
-                maxWidth: (_j = calculateNumericProperty({ base: width, value: (_h = axisItem.labels) === null || _h === void 0 ? void 0 : _h.maxWidth })) !== null && _j !== void 0 ? _j : axisLabelsDefaults.maxWidth,
+                maxWidth: (_k = calculateNumericProperty({ base: width, value: (_j = axisItem.labels) === null || _j === void 0 ? void 0 : _j.maxWidth })) !== null && _k !== void 0 ? _k : axisLabelsDefaults.maxWidth,
                 html: labelsHtml,
             },
             lineColor: get(axisItem, 'lineColor'),
@@ -140,11 +140,11 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
                 height: titleSize.maxHeight * estimatedTitleRows.length,
                 align: get(axisItem, 'title.align', yAxisTitleDefaults.align),
                 maxRowCount: titleMaxRowsCount,
-                html: (_l = (_k = axisItem.title) === null || _k === void 0 ? void 0 : _k.html) !== null && _l !== void 0 ? _l : false,
+                html: (_m = (_l = axisItem.title) === null || _l === void 0 ? void 0 : _l.html) !== null && _m !== void 0 ? _m : false,
                 maxWidth: titleMaxWidth !== null && titleMaxWidth !== void 0 ? titleMaxWidth : Infinity,
                 rotation: titleRotation,
             },
-            min: (_m = get(axisItem, 'min')) !== null && _m !== void 0 ? _m : getDefaultMinYAxisValue(axisSeriesData),
+            min: (_o = get(axisItem, 'min')) !== null && _o !== void 0 ? _o : getDefaultMinYAxisValue(axisSeriesData),
             max: get(axisItem, 'max'),
             startOnTick: get(axisItem, 'startOnTick'),
             endOnTick: get(axisItem, 'endOnTick'),
@@ -153,15 +153,16 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
                 enabled: gridEnabled,
             },
             ticks: {
-                pixelInterval: ((_o = axisItem.ticks) === null || _o === void 0 ? void 0 : _o.interval)
+                pixelInterval: ((_p = axisItem.ticks) === null || _p === void 0 ? void 0 : _p.interval)
                     ? calculateNumericProperty({
                         base: height,
-                        value: (_p = axisItem.ticks) === null || _p === void 0 ? void 0 : _p.interval,
+                        value: (_q = axisItem.ticks) === null || _q === void 0 ? void 0 : _q.interval,
                     })
-                    : (_q = axisItem.ticks) === null || _q === void 0 ? void 0 : _q.pixelInterval,
+                    : (_r = axisItem.ticks) === null || _r === void 0 ? void 0 : _r.pixelInterval,
             },
             tickMarks: {
-                enabled: get(axisItem, 'tickMarks.enabled', axisTickMarksDefaults.enabled),
+                enabled: isAxisVisible &&
+                    get(axisItem, 'tickMarks.enabled', axisTickMarksDefaults.enabled),
                 length: get(axisItem, 'tickMarks.length', axisTickMarksDefaults.length),
             },
             position: axisPosition,

package/dist/cjs/types/chart/axis.d.ts

@@ -97,6 +97,9 @@ export interface ChartAxisTitle {
 }
 export interface ChartAxisTickMarks {
     /** Enable or disable the tick marks on the axis.
+     *
+     * Note: tick marks are always hidden when the axis `visible` is set to `false`.
+     *
      * @default false
      */
     enabled?: boolean;
@@ -172,9 +175,12 @@ export interface ChartAxis {
     plotLines?: AxisPlotLine[];
     /** An array of colored bands stretching across the plot area marking an interval on the axis. */
     plotBands?: AxisPlotBand[];
-    /** Small perpendicular marks on the axis line at each tick position. */
+    /** Small perpendicular marks on the axis line at each tick position.
+     *
+     * Hidden when the axis `visible` is set to `false`.
+     */
     tickMarks?: ChartAxisTickMarks;
-    /** Whether axis, including axis title, line, ticks and labels, should be visible. */
+    /** Whether axis, including axis title, line, tick marks, and labels, should be visible. */
     visible?: boolean;
     /** Setting the order of the axis values. It is not applied by default.
      * the "reverse" value is needed to use the reverse order without sorting

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Dispatch } from 'd3';
-import type { LegendItem, PreparedChart, PreparedLegend, PreparedSeries, RangeSliderState, ZoomState } from '../../hooks';
+import type { PreparedChart, PreparedLegend, RangeSliderState, ZoomState } from '../../hooks';
 import type { LegendConfig } from '../../types';
 import type { ChartInnerProps } from './types';
 type Props = ChartInnerProps & {
@@ -13,19 +13,8 @@ type Props = ChartInnerProps & {
     zoomState: Partial<ZoomState>;
     rangeSliderState?: RangeSliderState;
 };
-type LegendState = {
-    legendConfig?: LegendConfig;
-    legendItems: LegendItem[][];
-};
-export declare function useLegend({ preparedLegend, preparedChart, preparedSeries, width, height, }: {
-    preparedLegend: PreparedLegend | null;
-    preparedChart: PreparedChart;
-    preparedSeries: PreparedSeries[];
-    width: number;
-    height: number;
-}): LegendState;
 export declare function useChartInnerProps(props: Props): {
-    allPreparedSeries: PreparedSeries[];
+    allPreparedSeries: import("../../hooks").PreparedSeries[];
     boundsHeight: number;
     boundsOffsetLeft: number;
     boundsOffsetTop: number;
@@ -33,9 +22,9 @@ export declare function useChartInnerProps(props: Props): {
     handleLegendItemClick: import("../../hooks").OnLegendItemClick;
     isOutsideBounds: (x: number, y: number) => boolean;
     legendConfig: LegendConfig | undefined;
-    legendItems: LegendItem[][];
+    legendItems: import("../../hooks").LegendItem[][];
     preparedLegend: PreparedLegend | null;
-    preparedSeries: PreparedSeries[];
+    preparedSeries: import("../../hooks").PreparedSeries[];
     preparedSeriesOptions: import("../../constants").SeriesOptionsDefaults;
     preparedSplit: import("../../hooks").PreparedSplit;
     prevHeight: number | undefined;

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

@@ -1,11 +1,10 @@
 import React from 'react';
-import isEqual from 'lodash/isEqual';
 import { DEFAULT_PALETTE, SERIES_TYPE } from '../../constants';
 import { useAxis, useAxisScales, useChartDimensions, useNormalizedOriginalData, usePrevious, useSeries, useShapes, useSplit, useYAxisLabelWidth, useZoom, } from '../../hooks';
 import { getYAxisWidth } from '../../hooks/useChartDimensions/utils';
-import { getLegendComponents } from '../../hooks/useSeries/prepare-legend';
 import { getPreparedOptions } from '../../hooks/useSeries/prepare-options';
 import { getEffectiveXRange, getZoomedSeriesData } from '../../utils';
+import { useLegend } from './useLegend';
 import { hasAtLeastOneSeriesDataPerPlot } from './utils';
 const CLIP_PATH_BY_SERIES_TYPE = {
     [SERIES_TYPE.Scatter]: false,
@@ -35,45 +34,6 @@ function getBoundsOffsetLeft(args) {
     }, 0);
     return chartMarginLeft + legendOffset + leftAxisWidth;
 }
-export function useLegend({ preparedLegend, preparedChart, preparedSeries, width, height, }) {
-    const [legendState, setLegend] = React.useState({
-        legendConfig: undefined,
-        legendItems: [],
-    });
-    const legendStateRunRef = React.useRef(0);
-    const prevLegendStateValue = React.useRef(legendState);
-    const legendStateReady = React.useRef(false);
-    React.useEffect(() => {
-        legendStateRunRef.current++;
-        legendStateReady.current = false;
-        (async function () {
-            const currentRun = legendStateRunRef.current;
-            if (!preparedLegend) {
-                return;
-            }
-            const newStateValue = await getLegendComponents({
-                chartWidth: width,
-                chartHeight: height,
-                chartMargin: preparedChart.margin,
-                series: preparedSeries,
-                preparedLegend,
-            });
-            if (legendStateRunRef.current === currentRun) {
-                if (!isEqual(prevLegendStateValue.current, newStateValue)) {
-                    setLegend(newStateValue);
-                    prevLegendStateValue.current = newStateValue;
-                }
-                legendStateReady.current = true;
-            }
-        })();
-    }, [height, preparedChart.margin, preparedLegend, preparedSeries, width]);
-    return legendStateReady.current
-        ? legendState
-        : {
-            legendConfig: undefined,
-            legendItems: [],
-        };
-}
 export function useChartInnerProps(props) {
     const { clipPathId, data, dispatcher, height, htmlLayout, plotNode, preparedChart, rangeSliderState, width, updateZoomState, zoomState, } = props;
     const prevWidth = usePrevious(width);

package/dist/esm/components/ChartInner/useLegend.d.ts

@@ -0,0 +1,14 @@
+import type { LegendItem, PreparedChart, PreparedLegend, PreparedSeries } from '../../hooks';
+import type { LegendConfig } from '../../types';
+type LegendState = {
+    legendConfig?: LegendConfig;
+    legendItems: LegendItem[][];
+};
+export declare function useLegend({ preparedLegend, preparedChart, preparedSeries, width, height, }: {
+    preparedLegend: PreparedLegend | null;
+    preparedChart: PreparedChart;
+    preparedSeries: PreparedSeries[];
+    width: number;
+    height: number;
+}): LegendState;
+export {};

package/dist/esm/components/ChartInner/useLegend.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import isEqual from 'lodash/isEqual';
+import { getLegendComponents } from '../../hooks/useSeries/prepare-legend';
+export function useLegend({ preparedLegend, preparedChart, preparedSeries, width, height, }) {
+    const [legendState, setLegend] = React.useState({
+        legendConfig: undefined,
+        legendItems: [],
+    });
+    const legendStateRunRef = React.useRef(0);
+    const prevLegendStateValue = React.useRef(legendState);
+    const legendStateReady = React.useRef(false);
+    React.useEffect(() => {
+        legendStateRunRef.current++;
+        legendStateReady.current = false;
+        (async function () {
+            const currentRun = legendStateRunRef.current;
+            if (!preparedLegend) {
+                return;
+            }
+            const newStateValue = await getLegendComponents({
+                chartWidth: width,
+                chartHeight: height,
+                chartMargin: preparedChart.margin,
+                series: preparedSeries,
+                preparedLegend,
+            });
+            if (legendStateRunRef.current === currentRun) {
+                if (!isEqual(prevLegendStateValue.current, newStateValue)) {
+                    setLegend(newStateValue);
+                    prevLegendStateValue.current = newStateValue;
+                }
+                legendStateReady.current = true;
+            }
+        })();
+    }, [height, preparedChart.margin, preparedLegend, preparedSeries, width]);
+    return legendState;
+}

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

@@ -142,7 +142,7 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, boundsWidth,
                 : (_j = xAxis === null || xAxis === void 0 ? void 0 : xAxis.ticks) === null || _j === void 0 ? void 0 : _j.pixelInterval,
         },
         tickMarks: {
-            enabled: get(xAxis, 'tickMarks.enabled', axisTickMarksDefaults.enabled),
+            enabled: isAxisVisible && get(xAxis, 'tickMarks.enabled', axisTickMarksDefaults.enabled),
             length: get(xAxis, 'tickMarks.length', axisTickMarksDefaults.length),
         },
         position: 'bottom',

package/dist/esm/hooks/useAxis/y-axis.js

@@ -52,7 +52,7 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
     return Promise.all(
     // eslint-disable-next-line complexity
     axisItems.map(async (axisItem, axisIndex) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
         const plotIndex = get(axisItem, 'plotIndex', 0);
         const firstPlotAxis = !axisByPlot[plotIndex];
         if (firstPlotAxis) {
@@ -62,7 +62,8 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
         const defaultAxisPosition = firstPlotAxis ? 'left' : 'right';
         const axisPosition = get(axisItem, 'position', defaultAxisPosition);
         const axisSeriesData = seriesData.filter((s) => get(s, 'yAxis', 0) === axisIndex);
-        const labelsEnabled = get(axisItem, 'labels.enabled', true);
+        const isAxisVisible = (_a = axisItem.visible) !== null && _a !== void 0 ? _a : true;
+        const labelsEnabled = isAxisVisible && get(axisItem, 'labels.enabled', true);
         const labelsStyle = {
             fontSize: get(axisItem, 'labels.style.fontSize', DEFAULT_AXIS_LABEL_FONT_SIZE),
         };
@@ -70,7 +71,7 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
         const labelsLineHeight = labelsHtml
             ? getHorizontalHtmlTextHeight({ text: 'Tmp', style: labelsStyle })
             : getHorizontalSvgTextHeight({ text: 'Tmp', style: labelsStyle });
-        const titleText = get(axisItem, 'title.text', '');
+        const titleText = isAxisVisible ? get(axisItem, 'title.text', '') : '';
         const titleStyle = Object.assign(Object.assign({}, yAxisTitleDefaults.style), get(axisItem, 'title.style'));
         const titleMaxRowsCount = get(axisItem, 'title.maxRowCount', yAxisTitleDefaults.maxRowCount);
         const estimatedTitleRows = (await wrapText({
@@ -78,24 +79,23 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
             style: titleStyle,
             width: height,
         })).slice(0, titleMaxRowsCount);
-        const titleRotation = getAxisTitleRotation((_a = axisItem.title) === null || _a === void 0 ? void 0 : _a.rotation, axisPosition);
+        const titleRotation = getAxisTitleRotation((_b = axisItem.title) === null || _b === void 0 ? void 0 : _b.rotation, axisPosition);
         const titleMaxWidth = titleRotation === 0
             ? calculateNumericProperty({
-                value: (_c = (_b = axisItem.title) === null || _b === void 0 ? void 0 : _b.maxWidth) !== null && _c !== void 0 ? _c : '20%',
+                value: (_d = (_c = axisItem.title) === null || _c === void 0 ? void 0 : _c.maxWidth) !== null && _d !== void 0 ? _d : '20%',
                 base: width,
             })
             : calculateNumericProperty({
-                value: (_e = (_d = axisItem.title) === null || _d === void 0 ? void 0 : _d.maxWidth) !== null && _e !== void 0 ? _e : '100%',
+                value: (_f = (_e = axisItem.title) === null || _e === void 0 ? void 0 : _e.maxWidth) !== null && _f !== void 0 ? _f : '100%',
                 base: height,
             });
         const titleSize = await getLabelsSize({
             labels: [titleText],
             style: titleStyle,
-            html: (_f = axisItem.title) === null || _f === void 0 ? void 0 : _f.html,
+            html: (_g = axisItem.title) === null || _g === void 0 ? void 0 : _g.html,
         });
         const axisType = get(axisItem, 'type', DEFAULT_AXIS_TYPE);
-        const shouldHideGrid = axisItem.visible === false ||
-            axisSeriesData.some((s) => s.type === SERIES_TYPE.Heatmap);
+        const shouldHideGrid = !isAxisVisible || axisSeriesData.some((s) => s.type === SERIES_TYPE.Heatmap);
         let gridEnabled;
         if (shouldHideGrid) {
             gridEnabled = false;
@@ -108,7 +108,7 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
             else {
                 gridEnabled = shouldSyncAxisWithPrimary(axisItem, axisByPlot[plotIndex][0])
                     ? false
-                    : !((_g = axisByPlot[plotIndex][0].visible) !== null && _g !== void 0 ? _g : true);
+                    : !((_h = axisByPlot[plotIndex][0].visible) !== null && _h !== void 0 ? _h : true);
             }
         }
         const preparedAxis = {
@@ -126,7 +126,7 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
                 width: 0,
                 height: 0,
                 lineHeight: labelsLineHeight,
-                maxWidth: (_j = calculateNumericProperty({ base: width, value: (_h = axisItem.labels) === null || _h === void 0 ? void 0 : _h.maxWidth })) !== null && _j !== void 0 ? _j : axisLabelsDefaults.maxWidth,
+                maxWidth: (_k = calculateNumericProperty({ base: width, value: (_j = axisItem.labels) === null || _j === void 0 ? void 0 : _j.maxWidth })) !== null && _k !== void 0 ? _k : axisLabelsDefaults.maxWidth,
                 html: labelsHtml,
             },
             lineColor: get(axisItem, 'lineColor'),
@@ -140,11 +140,11 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
                 height: titleSize.maxHeight * estimatedTitleRows.length,
                 align: get(axisItem, 'title.align', yAxisTitleDefaults.align),
                 maxRowCount: titleMaxRowsCount,
-                html: (_l = (_k = axisItem.title) === null || _k === void 0 ? void 0 : _k.html) !== null && _l !== void 0 ? _l : false,
+                html: (_m = (_l = axisItem.title) === null || _l === void 0 ? void 0 : _l.html) !== null && _m !== void 0 ? _m : false,
                 maxWidth: titleMaxWidth !== null && titleMaxWidth !== void 0 ? titleMaxWidth : Infinity,
                 rotation: titleRotation,
             },
-            min: (_m = get(axisItem, 'min')) !== null && _m !== void 0 ? _m : getDefaultMinYAxisValue(axisSeriesData),
+            min: (_o = get(axisItem, 'min')) !== null && _o !== void 0 ? _o : getDefaultMinYAxisValue(axisSeriesData),
             max: get(axisItem, 'max'),
             startOnTick: get(axisItem, 'startOnTick'),
             endOnTick: get(axisItem, 'endOnTick'),
@@ -153,15 +153,16 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
                 enabled: gridEnabled,
             },
             ticks: {
-                pixelInterval: ((_o = axisItem.ticks) === null || _o === void 0 ? void 0 : _o.interval)
+                pixelInterval: ((_p = axisItem.ticks) === null || _p === void 0 ? void 0 : _p.interval)
                     ? calculateNumericProperty({
                         base: height,
-                        value: (_p = axisItem.ticks) === null || _p === void 0 ? void 0 : _p.interval,
+                        value: (_q = axisItem.ticks) === null || _q === void 0 ? void 0 : _q.interval,
                     })
-                    : (_q = axisItem.ticks) === null || _q === void 0 ? void 0 : _q.pixelInterval,
+                    : (_r = axisItem.ticks) === null || _r === void 0 ? void 0 : _r.pixelInterval,
             },
             tickMarks: {
-                enabled: get(axisItem, 'tickMarks.enabled', axisTickMarksDefaults.enabled),
+                enabled: isAxisVisible &&
+                    get(axisItem, 'tickMarks.enabled', axisTickMarksDefaults.enabled),
                 length: get(axisItem, 'tickMarks.length', axisTickMarksDefaults.length),
             },
             position: axisPosition,

package/dist/esm/types/chart/axis.d.ts

@@ -97,6 +97,9 @@ export interface ChartAxisTitle {
 }
 export interface ChartAxisTickMarks {
     /** Enable or disable the tick marks on the axis.
+     *
+     * Note: tick marks are always hidden when the axis `visible` is set to `false`.
+     *
      * @default false
      */
     enabled?: boolean;
@@ -172,9 +175,12 @@ export interface ChartAxis {
     plotLines?: AxisPlotLine[];
     /** An array of colored bands stretching across the plot area marking an interval on the axis. */
     plotBands?: AxisPlotBand[];
-    /** Small perpendicular marks on the axis line at each tick position. */
+    /** Small perpendicular marks on the axis line at each tick position.
+     *
+     * Hidden when the axis `visible` is set to `false`.
+     */
     tickMarks?: ChartAxisTickMarks;
-    /** Whether axis, including axis title, line, ticks and labels, should be visible. */
+    /** Whether axis, including axis title, line, tick marks, and labels, should be visible. */
     visible?: boolean;
     /** Setting the order of the axis values. It is not applied by default.
      * the "reverse" value is needed to use the reverse order without sorting

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "1.38.1",
+  "version": "1.38.2",
   "description": "A flexible JavaScript library for data visualization and chart rendering using React",
   "license": "MIT",
   "main": "dist/cjs/index.js",