@gravity-ui/charts 1.38.0 → 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/components/Legend/index.js

@@ -71,7 +71,7 @@ function renderLegendSymbol(args) {
     const getXPosition = (i) => {
         return line.slice(0, i).reduce((acc, legendItem) => {
             return (acc +
-                legendItem.symbol.width +
+                legendItem.symbol.bboxWidth +
                 legendItem.symbol.padding +
                 legendItem.textWidth +
                 legend.itemDistance);
@@ -82,13 +82,15 @@ function renderLegendSymbol(args) {
         const x = getXPosition(i);
         const className = b('item-symbol', { shape: d.symbol.shape, unselected: !d.visible });
         const color = d.visible ? d.color : '';
+        const symbolType = d.symbol.symbolType;
+        const scatterSymbol = getSymbol(symbolType);
         switch (d.symbol.shape) {
             case 'path': {
                 appendLinePathElement({
                     svgRootElement: element.node(),
                     x,
                     height: legendLineHeight,
-                    width: d.symbol.width,
+                    width: d.symbol.bboxWidth,
                     color,
                     className,
                     dashStyle: d.dashStyle,
@@ -102,7 +104,7 @@ function renderLegendSymbol(args) {
                     .append('rect')
                     .attr('x', x)
                     .attr('y', y)
-                    .attr('width', d.symbol.width)
+                    .attr('width', d.symbol.bboxWidth)
                     .attr('height', d.symbol.height)
                     .attr('rx', d.symbol.radius)
                     .attr('class', className)
@@ -110,18 +112,14 @@ function renderLegendSymbol(args) {
                 break;
             }
             case 'symbol': {
+                const symbolAreaSize = Math.pow(d.symbol.width, 2);
                 const y = legendLineHeight / 2;
+                const bboxWidth = d.symbol.bboxWidth;
                 element
                     .append('svg:path')
-                    .attr('d', () => {
-                    const scatterSymbol = getSymbol(d.symbol.symbolType);
-                    // D3 takes size as square pixels, so we need to make square pixels size by multiplying
-                    // https://d3js.org/d3-shape/symbol#symbol
-                    return symbol(scatterSymbol, d.symbol.width * d.symbol.width)();
-                })
-                    .attr('transform', (_d, _index, elements) => {
-                    var _a, _b;
-                    const translateX = x + ((_b = (_a = elements[0]) === null || _a === void 0 ? void 0 : _a.getBBox()) === null || _b === void 0 ? void 0 : _b.width) / 2;
+                    .attr('d', () => symbol(scatterSymbol, symbolAreaSize)())
+                    .attr('transform', () => {
+                    const translateX = x + bboxWidth / 2;
                     return 'translate(' + translateX + ',' + y + ')';
                 })
                     .attr('class', className)
@@ -140,7 +138,7 @@ export const Legend = (props) => {
     }, [config.maxWidth]);
     React.useEffect(() => {
         async function prepareLegend() {
-            var _a, _b, _c, _e, _f, _g, _h, _j;
+            var _a, _b, _c, _d, _e, _f, _g, _h;
             if (!ref.current || !htmlLayout) {
                 return;
             }
@@ -157,7 +155,7 @@ export const Legend = (props) => {
             let legendTop = 0;
             if (legend.type === 'discrete') {
                 const start = (_b = (_a = config.pagination) === null || _a === void 0 ? void 0 : _a.pages[pageIndex]) === null || _b === void 0 ? void 0 : _b.start;
-                const end = (_e = (_c = config.pagination) === null || _c === void 0 ? void 0 : _c.pages[pageIndex]) === null || _e === void 0 ? void 0 : _e.end;
+                const end = (_d = (_c = config.pagination) === null || _c === void 0 ? void 0 : _c.pages[pageIndex]) === null || _d === void 0 ? void 0 : _d.end;
                 const pageItems = typeof start === 'number' && typeof end === 'number'
                     ? items.slice(start, end)
                     : items;
@@ -178,7 +176,7 @@ export const Legend = (props) => {
                     const getXPosition = (i) => {
                         return line.slice(0, i).reduce((acc, legendItem) => {
                             return (acc +
-                                legendItem.symbol.width +
+                                legendItem.symbol.bboxWidth +
                                 legendItem.symbol.padding +
                                 legendItem.textWidth +
                                 legend.itemDistance);
@@ -202,7 +200,7 @@ export const Legend = (props) => {
                             return `${d.textWidth}px`;
                         })
                             .style('left', function (d, i) {
-                            return `${getXPosition(i) + d.symbol.width + d.symbol.padding}px`;
+                            return `${getXPosition(i) + d.symbol.bboxWidth + d.symbol.padding}px`;
                         })
                             .style('top', function (d) {
                             if (d.height < legendLineHeight) {
@@ -221,7 +219,7 @@ export const Legend = (props) => {
                             .append('text')
                             .attr('x', function (legendItem, i) {
                             return (getXPosition(i) +
-                                legendItem.symbol.width +
+                                legendItem.symbol.bboxWidth +
                                 legendItem.symbol.padding);
                         })
                             .attr('height', legend.height)
@@ -238,7 +236,7 @@ export const Legend = (props) => {
                     }
                     else {
                         contentWidth = line.reduce((sum, l, index) => {
-                            sum += l.textWidth + l.symbol.width + l.symbol.padding;
+                            sum += l.textWidth + l.symbol.bboxWidth + l.symbol.padding;
                             if (index > 0) {
                                 sum += legend.itemDistance;
                             }
@@ -311,7 +309,7 @@ export const Legend = (props) => {
                 legendLeft = left;
                 legendTop = top;
                 // gradient rect
-                const domain = (_f = legend.colorScale.domain) !== null && _f !== void 0 ? _f : [];
+                const domain = (_e = legend.colorScale.domain) !== null && _e !== void 0 ? _e : [];
                 const rectHeight = CONTINUOUS_LEGEND_SIZE.height;
                 svgElement.call(createGradientRect, {
                     y: legend.title.height + legend.title.margin,
@@ -380,9 +378,9 @@ export const Legend = (props) => {
                     .attr('class', legendTitleClassname)
                     .append('text')
                     .attr('dx', dx)
-                    .attr('font-weight', (_g = legend.title.style.fontWeight) !== null && _g !== void 0 ? _g : null)
-                    .attr('font-size', (_h = legend.title.style.fontSize) !== null && _h !== void 0 ? _h : null)
-                    .attr('fill', (_j = legend.title.style.fontColor) !== null && _j !== void 0 ? _j : null)
+                    .attr('font-weight', (_f = legend.title.style.fontWeight) !== null && _f !== void 0 ? _f : null)
+                    .attr('font-size', (_g = legend.title.style.fontSize) !== null && _g !== void 0 ? _g : null)
+                    .attr('fill', (_h = legend.title.style.fontColor) !== null && _h !== void 0 ? _h : null)
                     .style('dominant-baseline', 'text-before-edge')
                     .html(legend.title.text);
             }

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/hooks/useSeries/prepare-legend.js

@@ -101,7 +101,7 @@ async function getGroupedLegendItems(args) {
         const item = items[i];
         const resultItem = clone(item);
         resultItem.text = item.name;
-        const maxTextWidth = maxLegendWidth - resultItem.symbol.width - resultItem.symbol.padding;
+        const maxTextWidth = maxLegendWidth - resultItem.symbol.bboxWidth - resultItem.symbol.padding;
         let textHeight = 0;
         let textWidth = 0;
         if (preparedLegend.html) {
@@ -143,7 +143,7 @@ async function getGroupedLegendItems(args) {
         }
         result[lineIndex].push(resultItem);
         const symbolsWidth = result[lineIndex].reduce((acc, { symbol }) => {
-            return acc + symbol.width + symbol.padding;
+            return acc + symbol.bboxWidth + symbol.padding;
         }, 0);
         const distancesWidth = (result[lineIndex].length - 1) * preparedLegend.itemDistance;
         const isOverflowedAsOnlyItemInLine = resultItem.overflowed && result[lineIndex].length === 1;

package/dist/cjs/hooks/useSeries/prepare-line.js

@@ -22,9 +22,11 @@ function prepareLineLegendSymbol(series, seriesOptions) {
     var _a;
     const symbolOptions = ((_a = series.legend) === null || _a === void 0 ? void 0 : _a.symbol) || {};
     const defaultLineWidth = get(seriesOptions, 'line.lineWidth', DEFAULT_LINE_WIDTH);
+    const width = (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.width) || DEFAULT_LEGEND_SYMBOL_SIZE;
     return {
         shape: 'path',
-        width: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.width) || DEFAULT_LEGEND_SYMBOL_SIZE,
+        width: width,
+        bboxWidth: width,
         padding: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.padding) || DEFAULT_LEGEND_SYMBOL_PADDING,
         strokeWidth: get(series, 'lineWidth', defaultLineWidth),
     };

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

@@ -11,7 +11,9 @@ export type SymbolLegendSymbol = {
     shape: 'symbol';
     symbolType: `${SymbolType}`;
 } & Required<SymbolLegendSymbolOptions>;
-export type PreparedLegendSymbol = RectLegendSymbol | PathLegendSymbol | SymbolLegendSymbol;
+export type PreparedLegendSymbol = (RectLegendSymbol | PathLegendSymbol | SymbolLegendSymbol) & {
+    bboxWidth: number;
+};
 export type PreparedLegend = Required<Omit<ChartLegend, 'title' | 'colorScale'>> & {
     height: number;
     lineHeight: number;

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

@@ -1,5 +1,6 @@
 import memoize from 'lodash/memoize';
 import { SymbolType } from '../../constants';
+import { getSymbolBBoxWidth } from '../../utils';
 import { getUniqId } from '../../utils/misc';
 import { DEFAULT_LEGEND_SYMBOL_PADDING, DEFAULT_LEGEND_SYMBOL_SIZE } from './constants';
 export const getActiveLegendItems = (series) => {
@@ -16,10 +17,13 @@ export const getAllLegendItems = (series) => {
 export function prepareLegendSymbol(series, symbolType) {
     var _a;
     const symbolOptions = ((_a = series.legend) === null || _a === void 0 ? void 0 : _a.symbol) || {};
+    const width = (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.width) || DEFAULT_LEGEND_SYMBOL_SIZE;
+    const type = symbolType || SymbolType.Circle;
     return {
         shape: 'symbol',
-        symbolType: symbolType || SymbolType.Circle,
-        width: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.width) || DEFAULT_LEGEND_SYMBOL_SIZE,
+        symbolType: type,
+        width,
+        bboxWidth: getSymbolBBoxWidth({ symbolSize: Math.pow(width, 2), symbolType: type }),
         padding: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.padding) || DEFAULT_LEGEND_SYMBOL_PADDING,
     };
 }

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/cjs/utils/chart/symbol.d.ts

@@ -1,3 +1,7 @@
 import { SymbolType } from '../../constants';
 export declare const getSymbolType: (index: number) => SymbolType;
 export declare const getSymbol: (symbolType: `${SymbolType}`) => import("d3-shape").SymbolType;
+export declare function getSymbolBBoxWidth({ symbolSize, symbolType, }: {
+    symbolSize: number;
+    symbolType: `${SymbolType}`;
+}): number;

package/dist/cjs/utils/chart/symbol.js

@@ -34,3 +34,18 @@ export const getSymbol = (symbolType) => {
             return symbolCircle;
     }
 };
+export function getSymbolBBoxWidth({ symbolSize, symbolType, }) {
+    switch (symbolType) {
+        case SymbolType.Diamond:
+            return Math.sqrt(symbolSize * 2);
+        case SymbolType.Circle:
+            return Math.sqrt(symbolSize / Math.PI) * 2;
+        case SymbolType.Square:
+            return Math.sqrt(symbolSize);
+        case SymbolType.Triangle:
+        case SymbolType.TriangleDown:
+            return Math.sqrt((4 * symbolSize * Math.sqrt(3)) / 3);
+        default:
+            return 0;
+    }
+}

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/components/Legend/index.js

@@ -71,7 +71,7 @@ function renderLegendSymbol(args) {
     const getXPosition = (i) => {
         return line.slice(0, i).reduce((acc, legendItem) => {
             return (acc +
-                legendItem.symbol.width +
+                legendItem.symbol.bboxWidth +
                 legendItem.symbol.padding +
                 legendItem.textWidth +
                 legend.itemDistance);
@@ -82,13 +82,15 @@ function renderLegendSymbol(args) {
         const x = getXPosition(i);
         const className = b('item-symbol', { shape: d.symbol.shape, unselected: !d.visible });
         const color = d.visible ? d.color : '';
+        const symbolType = d.symbol.symbolType;
+        const scatterSymbol = getSymbol(symbolType);
         switch (d.symbol.shape) {
             case 'path': {
                 appendLinePathElement({
                     svgRootElement: element.node(),
                     x,
                     height: legendLineHeight,
-                    width: d.symbol.width,
+                    width: d.symbol.bboxWidth,
                     color,
                     className,
                     dashStyle: d.dashStyle,
@@ -102,7 +104,7 @@ function renderLegendSymbol(args) {
                     .append('rect')
                     .attr('x', x)
                     .attr('y', y)
-                    .attr('width', d.symbol.width)
+                    .attr('width', d.symbol.bboxWidth)
                     .attr('height', d.symbol.height)
                     .attr('rx', d.symbol.radius)
                     .attr('class', className)
@@ -110,18 +112,14 @@ function renderLegendSymbol(args) {
                 break;
             }
             case 'symbol': {
+                const symbolAreaSize = Math.pow(d.symbol.width, 2);
                 const y = legendLineHeight / 2;
+                const bboxWidth = d.symbol.bboxWidth;
                 element
                     .append('svg:path')
-                    .attr('d', () => {
-                    const scatterSymbol = getSymbol(d.symbol.symbolType);
-                    // D3 takes size as square pixels, so we need to make square pixels size by multiplying
-                    // https://d3js.org/d3-shape/symbol#symbol
-                    return symbol(scatterSymbol, d.symbol.width * d.symbol.width)();
-                })
-                    .attr('transform', (_d, _index, elements) => {
-                    var _a, _b;
-                    const translateX = x + ((_b = (_a = elements[0]) === null || _a === void 0 ? void 0 : _a.getBBox()) === null || _b === void 0 ? void 0 : _b.width) / 2;
+                    .attr('d', () => symbol(scatterSymbol, symbolAreaSize)())
+                    .attr('transform', () => {
+                    const translateX = x + bboxWidth / 2;
                     return 'translate(' + translateX + ',' + y + ')';
                 })
                     .attr('class', className)
@@ -140,7 +138,7 @@ export const Legend = (props) => {
     }, [config.maxWidth]);
     React.useEffect(() => {
         async function prepareLegend() {
-            var _a, _b, _c, _e, _f, _g, _h, _j;
+            var _a, _b, _c, _d, _e, _f, _g, _h;
             if (!ref.current || !htmlLayout) {
                 return;
             }
@@ -157,7 +155,7 @@ export const Legend = (props) => {
             let legendTop = 0;
             if (legend.type === 'discrete') {
                 const start = (_b = (_a = config.pagination) === null || _a === void 0 ? void 0 : _a.pages[pageIndex]) === null || _b === void 0 ? void 0 : _b.start;
-                const end = (_e = (_c = config.pagination) === null || _c === void 0 ? void 0 : _c.pages[pageIndex]) === null || _e === void 0 ? void 0 : _e.end;
+                const end = (_d = (_c = config.pagination) === null || _c === void 0 ? void 0 : _c.pages[pageIndex]) === null || _d === void 0 ? void 0 : _d.end;
                 const pageItems = typeof start === 'number' && typeof end === 'number'
                     ? items.slice(start, end)
                     : items;
@@ -178,7 +176,7 @@ export const Legend = (props) => {
                     const getXPosition = (i) => {
                         return line.slice(0, i).reduce((acc, legendItem) => {
                             return (acc +
-                                legendItem.symbol.width +
+                                legendItem.symbol.bboxWidth +
                                 legendItem.symbol.padding +
                                 legendItem.textWidth +
                                 legend.itemDistance);
@@ -202,7 +200,7 @@ export const Legend = (props) => {
                             return `${d.textWidth}px`;
                         })
                             .style('left', function (d, i) {
-                            return `${getXPosition(i) + d.symbol.width + d.symbol.padding}px`;
+                            return `${getXPosition(i) + d.symbol.bboxWidth + d.symbol.padding}px`;
                         })
                             .style('top', function (d) {
                             if (d.height < legendLineHeight) {
@@ -221,7 +219,7 @@ export const Legend = (props) => {
                             .append('text')
                             .attr('x', function (legendItem, i) {
                             return (getXPosition(i) +
-                                legendItem.symbol.width +
+                                legendItem.symbol.bboxWidth +
                                 legendItem.symbol.padding);
                         })
                             .attr('height', legend.height)
@@ -238,7 +236,7 @@ export const Legend = (props) => {
                     }
                     else {
                         contentWidth = line.reduce((sum, l, index) => {
-                            sum += l.textWidth + l.symbol.width + l.symbol.padding;
+                            sum += l.textWidth + l.symbol.bboxWidth + l.symbol.padding;
                             if (index > 0) {
                                 sum += legend.itemDistance;
                             }
@@ -311,7 +309,7 @@ export const Legend = (props) => {
                 legendLeft = left;
                 legendTop = top;
                 // gradient rect
-                const domain = (_f = legend.colorScale.domain) !== null && _f !== void 0 ? _f : [];
+                const domain = (_e = legend.colorScale.domain) !== null && _e !== void 0 ? _e : [];
                 const rectHeight = CONTINUOUS_LEGEND_SIZE.height;
                 svgElement.call(createGradientRect, {
                     y: legend.title.height + legend.title.margin,
@@ -380,9 +378,9 @@ export const Legend = (props) => {
                     .attr('class', legendTitleClassname)
                     .append('text')
                     .attr('dx', dx)
-                    .attr('font-weight', (_g = legend.title.style.fontWeight) !== null && _g !== void 0 ? _g : null)
-                    .attr('font-size', (_h = legend.title.style.fontSize) !== null && _h !== void 0 ? _h : null)
-                    .attr('fill', (_j = legend.title.style.fontColor) !== null && _j !== void 0 ? _j : null)
+                    .attr('font-weight', (_f = legend.title.style.fontWeight) !== null && _f !== void 0 ? _f : null)
+                    .attr('font-size', (_g = legend.title.style.fontSize) !== null && _g !== void 0 ? _g : null)
+                    .attr('fill', (_h = legend.title.style.fontColor) !== null && _h !== void 0 ? _h : null)
                     .style('dominant-baseline', 'text-before-edge')
                     .html(legend.title.text);
             }

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/hooks/useSeries/prepare-legend.js

@@ -101,7 +101,7 @@ async function getGroupedLegendItems(args) {
         const item = items[i];
         const resultItem = clone(item);
         resultItem.text = item.name;
-        const maxTextWidth = maxLegendWidth - resultItem.symbol.width - resultItem.symbol.padding;
+        const maxTextWidth = maxLegendWidth - resultItem.symbol.bboxWidth - resultItem.symbol.padding;
         let textHeight = 0;
         let textWidth = 0;
         if (preparedLegend.html) {
@@ -143,7 +143,7 @@ async function getGroupedLegendItems(args) {
         }
         result[lineIndex].push(resultItem);
         const symbolsWidth = result[lineIndex].reduce((acc, { symbol }) => {
-            return acc + symbol.width + symbol.padding;
+            return acc + symbol.bboxWidth + symbol.padding;
         }, 0);
         const distancesWidth = (result[lineIndex].length - 1) * preparedLegend.itemDistance;
         const isOverflowedAsOnlyItemInLine = resultItem.overflowed && result[lineIndex].length === 1;

package/dist/esm/hooks/useSeries/prepare-line.js

@@ -22,9 +22,11 @@ function prepareLineLegendSymbol(series, seriesOptions) {
     var _a;
     const symbolOptions = ((_a = series.legend) === null || _a === void 0 ? void 0 : _a.symbol) || {};
     const defaultLineWidth = get(seriesOptions, 'line.lineWidth', DEFAULT_LINE_WIDTH);
+    const width = (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.width) || DEFAULT_LEGEND_SYMBOL_SIZE;
     return {
         shape: 'path',
-        width: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.width) || DEFAULT_LEGEND_SYMBOL_SIZE,
+        width: width,
+        bboxWidth: width,
         padding: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.padding) || DEFAULT_LEGEND_SYMBOL_PADDING,
         strokeWidth: get(series, 'lineWidth', defaultLineWidth),
     };

package/dist/esm/hooks/useSeries/types.d.ts

@@ -11,7 +11,9 @@ export type SymbolLegendSymbol = {
     shape: 'symbol';
     symbolType: `${SymbolType}`;
 } & Required<SymbolLegendSymbolOptions>;
-export type PreparedLegendSymbol = RectLegendSymbol | PathLegendSymbol | SymbolLegendSymbol;
+export type PreparedLegendSymbol = (RectLegendSymbol | PathLegendSymbol | SymbolLegendSymbol) & {
+    bboxWidth: number;
+};
 export type PreparedLegend = Required<Omit<ChartLegend, 'title' | 'colorScale'>> & {
     height: number;
     lineHeight: number;

package/dist/esm/hooks/useSeries/utils.js

@@ -1,5 +1,6 @@
 import memoize from 'lodash/memoize';
 import { SymbolType } from '../../constants';
+import { getSymbolBBoxWidth } from '../../utils';
 import { getUniqId } from '../../utils/misc';
 import { DEFAULT_LEGEND_SYMBOL_PADDING, DEFAULT_LEGEND_SYMBOL_SIZE } from './constants';
 export const getActiveLegendItems = (series) => {
@@ -16,10 +17,13 @@ export const getAllLegendItems = (series) => {
 export function prepareLegendSymbol(series, symbolType) {
     var _a;
     const symbolOptions = ((_a = series.legend) === null || _a === void 0 ? void 0 : _a.symbol) || {};
+    const width = (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.width) || DEFAULT_LEGEND_SYMBOL_SIZE;
+    const type = symbolType || SymbolType.Circle;
     return {
         shape: 'symbol',
-        symbolType: symbolType || SymbolType.Circle,
-        width: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.width) || DEFAULT_LEGEND_SYMBOL_SIZE,
+        symbolType: type,
+        width,
+        bboxWidth: getSymbolBBoxWidth({ symbolSize: Math.pow(width, 2), symbolType: type }),
         padding: (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.padding) || DEFAULT_LEGEND_SYMBOL_PADDING,
     };
 }

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/dist/esm/utils/chart/symbol.d.ts

@@ -1,3 +1,7 @@
 import { SymbolType } from '../../constants';
 export declare const getSymbolType: (index: number) => SymbolType;
 export declare const getSymbol: (symbolType: `${SymbolType}`) => import("d3-shape").SymbolType;
+export declare function getSymbolBBoxWidth({ symbolSize, symbolType, }: {
+    symbolSize: number;
+    symbolType: `${SymbolType}`;
+}): number;

package/dist/esm/utils/chart/symbol.js

@@ -34,3 +34,18 @@ export const getSymbol = (symbolType) => {
             return symbolCircle;
     }
 };
+export function getSymbolBBoxWidth({ symbolSize, symbolType, }) {
+    switch (symbolType) {
+        case SymbolType.Diamond:
+            return Math.sqrt(symbolSize * 2);
+        case SymbolType.Circle:
+            return Math.sqrt(symbolSize / Math.PI) * 2;
+        case SymbolType.Square:
+            return Math.sqrt(symbolSize);
+        case SymbolType.Triangle:
+        case SymbolType.TriangleDown:
+            return Math.sqrt((4 * symbolSize * Math.sqrt(3)) / 3);
+        default:
+            return 0;
+    }
+}

package/package.json

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