@gravity-ui/charts 1.25.0 → 1.26.1

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Dispatch } from 'd3';
-import type { RangeSliderState, ZoomState } from '../../hooks';
+import type { PreparedLegend, RangeSliderState, ZoomState } from '../../hooks';
 import type { ChartInnerProps } from './types';
 type Props = ChartInnerProps & {
     clipPathId: string;
@@ -35,7 +35,7 @@ export declare function useChartInnerProps(props: Props): {
     } | undefined;
     legendItems: never[] | import("../../hooks").LegendItem[][];
     preparedChart: import("../../hooks").PreparedChart;
-    preparedLegend: import("../../hooks").PreparedLegend | null;
+    preparedLegend: PreparedLegend | null;
     preparedSeries: import("../../hooks").PreparedSeries[];
     preparedSeriesOptions: import("../../constants").SeriesOptionsDefaults;
     preparedSplit: import("../../hooks").PreparedSplit;

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

@@ -9,6 +9,30 @@ import { hasAtLeastOneSeriesDataPerPlot } from './utils';
 const CLIP_PATH_BY_SERIES_TYPE = {
     [SERIES_TYPE.Scatter]: false,
 };
+function getBoundsOffsetTop(args) {
+    const { chartMarginTop, preparedLegend } = args;
+    return (chartMarginTop +
+        ((preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && preparedLegend.position === 'top'
+            ? preparedLegend.height + preparedLegend.margin
+            : 0));
+}
+function getBoundsOffsetLeft(args) {
+    const { chartMarginLeft, preparedLegend, yAxis, getYAxisWidth: getAxisWidth } = args;
+    const legendOffset = (preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && preparedLegend.position === 'left'
+        ? preparedLegend.width + preparedLegend.margin
+        : 0;
+    const leftAxisWidth = yAxis.reduce((acc, axis) => {
+        if (axis.position !== 'left') {
+            return acc;
+        }
+        const axisWidth = getAxisWidth(axis);
+        if (acc < axisWidth) {
+            acc = axisWidth;
+        }
+        return acc;
+    }, 0);
+    return chartMarginLeft + legendOffset + leftAxisWidth;
+}
 export function useChartInnerProps(props) {
     var _a;
     const { clipPathId, data, dispatcher, height, htmlLayout, plotNode, rangeSliderState, svgContainer, width, updateZoomState, zoomState, } = props;
@@ -129,22 +153,17 @@ export function useChartInnerProps(props) {
         yAxis,
         yScale,
     });
-    const boundsOffsetTop = chart.margin.top +
-        ((preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && preparedLegend.position === 'top'
-            ? preparedLegend.height + preparedLegend.margin
-            : 0);
+    const boundsOffsetTop = getBoundsOffsetTop({
+        chartMarginTop: chart.margin.top,
+        preparedLegend,
+    });
     // We need to calculate the width of each left axis because the first axis can be hidden
-    const boundsOffsetLeft = chart.margin.left +
-        yAxis.reduce((acc, axis) => {
-            if (axis.position !== 'left') {
-                return acc;
-            }
-            const axisWidth = getYAxisWidth(axis);
-            if (acc < axisWidth) {
-                acc = axisWidth;
-            }
-            return acc;
-        }, 0);
+    const boundsOffsetLeft = getBoundsOffsetLeft({
+        chartMarginLeft: chart.margin.left,
+        preparedLegend,
+        yAxis,
+        getYAxisWidth,
+    });
     const { x } = (_a = svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) !== null && _a !== void 0 ? _a : {};
     return {
         allPreparedSeries,

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

@@ -6,16 +6,19 @@ import { block, createGradientRect, getContinuesColorFn, getLabelsSize, getLineD
 import { axisBottom } from '../../utils/chart/axis-generators';
 import './styles.css';
 const b = block('legend');
-const getLegendPosition = (args) => {
-    const { align, offsetLeft = 0, width, contentWidth } = args;
-    const top = 0;
-    if (align === 'left') {
-        return { top, left: offsetLeft };
-    }
+const getLegendItemLeftPosition = (args) => {
+    const { align, width, contentWidth } = args;
     if (align === 'right') {
-        return { top, left: offsetLeft + width - contentWidth };
+        return width - contentWidth;
+    }
+    if (align === 'left') {
+        return 0;
     }
-    return { top, left: offsetLeft + width / 2 - contentWidth / 2 };
+    return width / 2 - contentWidth / 2;
+};
+const getLegendPosition = (args) => {
+    const { offsetLeft, offsetTop, contentWidth, width } = args;
+    return { top: offsetTop, left: offsetLeft + width / 2 - contentWidth / 2 };
 };
 const appendPaginator = (args) => {
     const { container, pageIndex, legend, transform, pages, onArrowClick } = args;
@@ -157,6 +160,8 @@ export const Legend = (props) => {
                 ? htmlElement.append('div').attr('data-legend', 1).style('position', 'absolute')
                 : null;
             let legendWidth = 0;
+            let legendLeft = 0;
+            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;
@@ -249,13 +254,11 @@ export const Legend = (props) => {
                     let left = 0;
                     switch (legend.justifyContent) {
                         case 'center': {
-                            const legendLinePostion = getLegendPosition({
+                            left = getLegendItemLeftPosition({
                                 align: legend.align,
                                 width: config.maxWidth,
                                 contentWidth,
-                                offsetLeft: config.offset.left,
                             });
-                            left = legendLinePostion.left;
                             legendWidth = config.maxWidth;
                             break;
                         }
@@ -280,8 +283,39 @@ export const Legend = (props) => {
                         onArrowClick: setPageIndex,
                     });
                 }
+                const { left, top } = getLegendPosition({
+                    width: config.maxWidth,
+                    contentWidth: legendWidth,
+                    offsetLeft: config.offset.left,
+                    offsetTop: config.offset.top,
+                });
+                legendLeft = left;
+                legendTop = top;
             }
             else {
+                let left = 0;
+                switch (legend.align) {
+                    case 'right': {
+                        left = config.offset.left + config.maxWidth - legend.width;
+                        break;
+                    }
+                    case 'left': {
+                        left = config.offset.left;
+                        break;
+                    }
+                    case 'center': {
+                        left = config.offset.left + config.maxWidth / 2 - legend.width / 2;
+                        break;
+                    }
+                }
+                const { top } = getLegendPosition({
+                    width: config.maxWidth,
+                    contentWidth: legendWidth,
+                    offsetLeft: config.offset.left,
+                    offsetTop: config.offset.top,
+                });
+                legendLeft = left;
+                legendTop = top;
                 // gradient rect
                 const domain = (_f = legend.colorScale.domain) !== null && _f !== void 0 ? _f : [];
                 const rectHeight = CONTINUOUS_LEGEND_SIZE.height;
@@ -361,15 +395,10 @@ export const Legend = (props) => {
             else {
                 svgElement.selectAll(`.${legendTitleClassname}`).remove();
             }
-            const { left } = getLegendPosition({
-                align: legend.align,
-                width: config.maxWidth,
-                contentWidth: legendWidth,
-            });
             svgElement
-                .attr('transform', `translate(${[left, config.offset.top].join(',')})`)
+                .attr('transform', `translate(${[legendLeft, legendTop].join(',')})`)
                 .style('opacity', 1);
-            htmlContainer === null || htmlContainer === void 0 ? void 0 : htmlContainer.style('transform', `translate(${left}px, ${config.offset.top}px)`);
+            htmlContainer === null || htmlContainer === void 0 ? void 0 : htmlContainer.style('transform', `translate(${legendLeft}px, ${legendTop}px)`);
         }
         prepareLegend();
     }, [chartSeries, onItemClick, onUpdate, legend, items, config, pageIndex, htmlLayout]);

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

@@ -30,6 +30,18 @@ const getTopOffset = ({ preparedLegend }) => {
     }
     return 0;
 };
+const getRightOffset = ({ preparedLegend }) => {
+    if ((preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && preparedLegend.position === 'right') {
+        return preparedLegend.width + preparedLegend.margin;
+    }
+    return 0;
+};
+const getLeftOffset = ({ preparedLegend }) => {
+    if ((preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && preparedLegend.position === 'left') {
+        return preparedLegend.width + preparedLegend.margin;
+    }
+    return 0;
+};
 export const useChartDimensions = (args) => {
     const { height, margin, preparedLegend, preparedSeries, preparedXAxis, preparedYAxis, width } = args;
     return React.useMemo(() => {
@@ -41,7 +53,10 @@ export const useChartDimensions = (args) => {
             preparedXAxis,
         });
         const topOffset = getTopOffset({ preparedLegend });
+        const rightOffset = getRightOffset({ preparedLegend });
+        const leftOffset = getLeftOffset({ preparedLegend });
         const boundsHeight = height - margin.top - margin.bottom - bottomOffset - topOffset;
-        return { boundsWidth, boundsHeight };
+        const adjustedBoundsWidth = boundsWidth - rightOffset - leftOffset;
+        return { boundsWidth: adjustedBoundsWidth, boundsHeight };
     }, [height, margin, preparedLegend, preparedSeries, preparedXAxis, preparedYAxis, width]);
 };

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

@@ -12,7 +12,10 @@ export async function getPreparedLegend(args) {
     const defaultItemStyle = clone(legendDefaults.itemStyle);
     const itemStyle = get(legend, 'itemStyle');
     const computedItemStyle = merge(defaultItemStyle, itemStyle);
-    const lineHeight = (await getLabelsSize({ labels: ['Tmp'], style: computedItemStyle })).maxHeight;
+    const { maxHeight: lineHeight, maxWidth: lineWidth } = await getLabelsSize({
+        labels: ['Tmp'],
+        style: computedItemStyle,
+    });
     const legendType = get(legend, 'type', 'discrete');
     const isTitleEnabled = Boolean((_a = legend === null || legend === void 0 ? void 0 : legend.title) === null || _a === void 0 ? void 0 : _a.text);
     const titleMargin = isTitleEnabled ? get(legend, 'title.margin', 4) : 0;
@@ -34,9 +37,11 @@ export async function getPreparedLegend(args) {
         stops: [],
     };
     let height = 0;
+    let legendWidth = 0;
     if (enabled) {
         height += titleHeight + titleMargin;
         if (legendType === 'continuous') {
+            legendWidth = get(legend, 'width', CONTINUOUS_LEGEND_SIZE.width);
             height += CONTINUOUS_LEGEND_SIZE.height;
             height += ticks.labelsLineHeight + ticks.labelsMargin;
             colorScale.colors = (_c = (_b = legend === null || legend === void 0 ? void 0 : legend.colorScale) === null || _b === void 0 ? void 0 : _b.colors) !== null && _c !== void 0 ? _c : [];
@@ -47,9 +52,9 @@ export async function getPreparedLegend(args) {
         }
         else {
             height += lineHeight;
+            legendWidth = get(legend, 'width', lineWidth);
         }
     }
-    const legendWidth = get(legend, 'width', CONTINUOUS_LEGEND_SIZE.width);
     return {
         align: get(legend, 'align', legendDefaults.align),
         justifyContent: get(legend, 'justifyContent', legendDefaults.justifyContent),
@@ -168,10 +173,61 @@ function getPagination(args) {
     });
     return { pages };
 }
+function getLegendOffset(args) {
+    const { position, chartWidth, chartHeight, chartMargin, legendWidth, legendHeight } = args;
+    switch (position) {
+        case 'top':
+            return {
+                top: chartMargin.top,
+                left: chartMargin.left,
+            };
+        case 'right':
+            return {
+                top: chartMargin.top,
+                left: chartWidth - chartMargin.right - legendWidth,
+            };
+        case 'left':
+            return {
+                top: chartMargin.top,
+                left: chartMargin.left,
+            };
+        case 'bottom':
+        default:
+            return {
+                top: chartHeight - chartMargin.bottom - legendHeight,
+                left: chartMargin.left,
+            };
+    }
+}
+function getMaxLegendWidth(args) {
+    const { chartWidth, chartMargin, preparedLegend, isVerticalPosition } = args;
+    if (isVerticalPosition) {
+        return (chartWidth - chartMargin.right - chartMargin.left - preparedLegend.margin) / 2;
+    }
+    return chartWidth - chartMargin.right - chartMargin.left;
+}
+function getMaxLegendHeight(args) {
+    const { chartHeight, chartMargin, preparedLegend, isVerticalPosition } = args;
+    if (isVerticalPosition) {
+        return chartHeight - chartMargin.top - chartMargin.bottom;
+    }
+    return (chartHeight - chartMargin.top - chartMargin.bottom - preparedLegend.margin) / 2;
+}
 export function getLegendComponents(args) {
     const { chartWidth, chartHeight, chartMargin, series, preparedLegend } = args;
-    const maxLegendWidth = chartWidth - chartMargin.right - chartMargin.left;
-    const maxLegendHeight = (chartHeight - chartMargin.top - chartMargin.bottom - preparedLegend.margin) / 2;
+    const isVerticalPosition = preparedLegend.position === 'right' || preparedLegend.position === 'left';
+    const maxLegendWidth = getMaxLegendWidth({
+        chartWidth,
+        chartMargin,
+        preparedLegend,
+        isVerticalPosition,
+    });
+    const maxLegendHeight = getMaxLegendHeight({
+        chartHeight,
+        chartMargin,
+        preparedLegend,
+        isVerticalPosition,
+    });
     const flattenLegendItems = getFlattenLegendItems(series, preparedLegend);
     const items = getGroupedLegendItems({
         maxLegendWidth,
@@ -197,13 +253,15 @@ export function getLegendComponents(args) {
             });
         }
         preparedLegend.height = legendHeight;
+        preparedLegend.width = Math.max(maxLegendWidth, preparedLegend.width);
     }
-    const top = preparedLegend.position === 'top'
-        ? chartMargin.top
-        : chartHeight - chartMargin.bottom - preparedLegend.height;
-    const offset = {
-        left: chartMargin.left,
-        top,
-    };
+    const offset = getLegendOffset({
+        position: preparedLegend.position,
+        chartWidth,
+        chartHeight,
+        chartMargin,
+        legendWidth: preparedLegend.width,
+        legendHeight: preparedLegend.height,
+    });
     return { legendConfig: { offset, pagination, maxWidth: maxLegendWidth }, legendItems: items };
 }

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

@@ -66,7 +66,7 @@ export interface ChartLegend extends ChartLegendItem {
      *
      * @default 'bottom'
      * */
-    position?: 'top' | 'bottom';
+    position?: 'top' | 'bottom' | 'left' | 'right';
 }
 export interface BaseLegendSymbol {
     /**

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Dispatch } from 'd3';
-import type { RangeSliderState, ZoomState } from '../../hooks';
+import type { PreparedLegend, RangeSliderState, ZoomState } from '../../hooks';
 import type { ChartInnerProps } from './types';
 type Props = ChartInnerProps & {
     clipPathId: string;
@@ -35,7 +35,7 @@ export declare function useChartInnerProps(props: Props): {
     } | undefined;
     legendItems: never[] | import("../../hooks").LegendItem[][];
     preparedChart: import("../../hooks").PreparedChart;
-    preparedLegend: import("../../hooks").PreparedLegend | null;
+    preparedLegend: PreparedLegend | null;
     preparedSeries: import("../../hooks").PreparedSeries[];
     preparedSeriesOptions: import("../../constants").SeriesOptionsDefaults;
     preparedSplit: import("../../hooks").PreparedSplit;

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

@@ -9,6 +9,30 @@ import { hasAtLeastOneSeriesDataPerPlot } from './utils';
 const CLIP_PATH_BY_SERIES_TYPE = {
     [SERIES_TYPE.Scatter]: false,
 };
+function getBoundsOffsetTop(args) {
+    const { chartMarginTop, preparedLegend } = args;
+    return (chartMarginTop +
+        ((preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && preparedLegend.position === 'top'
+            ? preparedLegend.height + preparedLegend.margin
+            : 0));
+}
+function getBoundsOffsetLeft(args) {
+    const { chartMarginLeft, preparedLegend, yAxis, getYAxisWidth: getAxisWidth } = args;
+    const legendOffset = (preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && preparedLegend.position === 'left'
+        ? preparedLegend.width + preparedLegend.margin
+        : 0;
+    const leftAxisWidth = yAxis.reduce((acc, axis) => {
+        if (axis.position !== 'left') {
+            return acc;
+        }
+        const axisWidth = getAxisWidth(axis);
+        if (acc < axisWidth) {
+            acc = axisWidth;
+        }
+        return acc;
+    }, 0);
+    return chartMarginLeft + legendOffset + leftAxisWidth;
+}
 export function useChartInnerProps(props) {
     var _a;
     const { clipPathId, data, dispatcher, height, htmlLayout, plotNode, rangeSliderState, svgContainer, width, updateZoomState, zoomState, } = props;
@@ -129,22 +153,17 @@ export function useChartInnerProps(props) {
         yAxis,
         yScale,
     });
-    const boundsOffsetTop = chart.margin.top +
-        ((preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && preparedLegend.position === 'top'
-            ? preparedLegend.height + preparedLegend.margin
-            : 0);
+    const boundsOffsetTop = getBoundsOffsetTop({
+        chartMarginTop: chart.margin.top,
+        preparedLegend,
+    });
     // We need to calculate the width of each left axis because the first axis can be hidden
-    const boundsOffsetLeft = chart.margin.left +
-        yAxis.reduce((acc, axis) => {
-            if (axis.position !== 'left') {
-                return acc;
-            }
-            const axisWidth = getYAxisWidth(axis);
-            if (acc < axisWidth) {
-                acc = axisWidth;
-            }
-            return acc;
-        }, 0);
+    const boundsOffsetLeft = getBoundsOffsetLeft({
+        chartMarginLeft: chart.margin.left,
+        preparedLegend,
+        yAxis,
+        getYAxisWidth,
+    });
     const { x } = (_a = svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) !== null && _a !== void 0 ? _a : {};
     return {
         allPreparedSeries,

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

@@ -6,16 +6,19 @@ import { block, createGradientRect, getContinuesColorFn, getLabelsSize, getLineD
 import { axisBottom } from '../../utils/chart/axis-generators';
 import './styles.css';
 const b = block('legend');
-const getLegendPosition = (args) => {
-    const { align, offsetLeft = 0, width, contentWidth } = args;
-    const top = 0;
-    if (align === 'left') {
-        return { top, left: offsetLeft };
-    }
+const getLegendItemLeftPosition = (args) => {
+    const { align, width, contentWidth } = args;
     if (align === 'right') {
-        return { top, left: offsetLeft + width - contentWidth };
+        return width - contentWidth;
+    }
+    if (align === 'left') {
+        return 0;
     }
-    return { top, left: offsetLeft + width / 2 - contentWidth / 2 };
+    return width / 2 - contentWidth / 2;
+};
+const getLegendPosition = (args) => {
+    const { offsetLeft, offsetTop, contentWidth, width } = args;
+    return { top: offsetTop, left: offsetLeft + width / 2 - contentWidth / 2 };
 };
 const appendPaginator = (args) => {
     const { container, pageIndex, legend, transform, pages, onArrowClick } = args;
@@ -157,6 +160,8 @@ export const Legend = (props) => {
                 ? htmlElement.append('div').attr('data-legend', 1).style('position', 'absolute')
                 : null;
             let legendWidth = 0;
+            let legendLeft = 0;
+            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;
@@ -249,13 +254,11 @@ export const Legend = (props) => {
                     let left = 0;
                     switch (legend.justifyContent) {
                         case 'center': {
-                            const legendLinePostion = getLegendPosition({
+                            left = getLegendItemLeftPosition({
                                 align: legend.align,
                                 width: config.maxWidth,
                                 contentWidth,
-                                offsetLeft: config.offset.left,
                             });
-                            left = legendLinePostion.left;
                             legendWidth = config.maxWidth;
                             break;
                         }
@@ -280,8 +283,39 @@ export const Legend = (props) => {
                         onArrowClick: setPageIndex,
                     });
                 }
+                const { left, top } = getLegendPosition({
+                    width: config.maxWidth,
+                    contentWidth: legendWidth,
+                    offsetLeft: config.offset.left,
+                    offsetTop: config.offset.top,
+                });
+                legendLeft = left;
+                legendTop = top;
             }
             else {
+                let left = 0;
+                switch (legend.align) {
+                    case 'right': {
+                        left = config.offset.left + config.maxWidth - legend.width;
+                        break;
+                    }
+                    case 'left': {
+                        left = config.offset.left;
+                        break;
+                    }
+                    case 'center': {
+                        left = config.offset.left + config.maxWidth / 2 - legend.width / 2;
+                        break;
+                    }
+                }
+                const { top } = getLegendPosition({
+                    width: config.maxWidth,
+                    contentWidth: legendWidth,
+                    offsetLeft: config.offset.left,
+                    offsetTop: config.offset.top,
+                });
+                legendLeft = left;
+                legendTop = top;
                 // gradient rect
                 const domain = (_f = legend.colorScale.domain) !== null && _f !== void 0 ? _f : [];
                 const rectHeight = CONTINUOUS_LEGEND_SIZE.height;
@@ -361,15 +395,10 @@ export const Legend = (props) => {
             else {
                 svgElement.selectAll(`.${legendTitleClassname}`).remove();
             }
-            const { left } = getLegendPosition({
-                align: legend.align,
-                width: config.maxWidth,
-                contentWidth: legendWidth,
-            });
             svgElement
-                .attr('transform', `translate(${[left, config.offset.top].join(',')})`)
+                .attr('transform', `translate(${[legendLeft, legendTop].join(',')})`)
                 .style('opacity', 1);
-            htmlContainer === null || htmlContainer === void 0 ? void 0 : htmlContainer.style('transform', `translate(${left}px, ${config.offset.top}px)`);
+            htmlContainer === null || htmlContainer === void 0 ? void 0 : htmlContainer.style('transform', `translate(${legendLeft}px, ${legendTop}px)`);
         }
         prepareLegend();
     }, [chartSeries, onItemClick, onUpdate, legend, items, config, pageIndex, htmlLayout]);

package/dist/esm/hooks/useChartDimensions/index.js

@@ -30,6 +30,18 @@ const getTopOffset = ({ preparedLegend }) => {
     }
     return 0;
 };
+const getRightOffset = ({ preparedLegend }) => {
+    if ((preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && preparedLegend.position === 'right') {
+        return preparedLegend.width + preparedLegend.margin;
+    }
+    return 0;
+};
+const getLeftOffset = ({ preparedLegend }) => {
+    if ((preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && preparedLegend.position === 'left') {
+        return preparedLegend.width + preparedLegend.margin;
+    }
+    return 0;
+};
 export const useChartDimensions = (args) => {
     const { height, margin, preparedLegend, preparedSeries, preparedXAxis, preparedYAxis, width } = args;
     return React.useMemo(() => {
@@ -41,7 +53,10 @@ export const useChartDimensions = (args) => {
             preparedXAxis,
         });
         const topOffset = getTopOffset({ preparedLegend });
+        const rightOffset = getRightOffset({ preparedLegend });
+        const leftOffset = getLeftOffset({ preparedLegend });
         const boundsHeight = height - margin.top - margin.bottom - bottomOffset - topOffset;
-        return { boundsWidth, boundsHeight };
+        const adjustedBoundsWidth = boundsWidth - rightOffset - leftOffset;
+        return { boundsWidth: adjustedBoundsWidth, boundsHeight };
     }, [height, margin, preparedLegend, preparedSeries, preparedXAxis, preparedYAxis, width]);
 };

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

@@ -12,7 +12,10 @@ export async function getPreparedLegend(args) {
     const defaultItemStyle = clone(legendDefaults.itemStyle);
     const itemStyle = get(legend, 'itemStyle');
     const computedItemStyle = merge(defaultItemStyle, itemStyle);
-    const lineHeight = (await getLabelsSize({ labels: ['Tmp'], style: computedItemStyle })).maxHeight;
+    const { maxHeight: lineHeight, maxWidth: lineWidth } = await getLabelsSize({
+        labels: ['Tmp'],
+        style: computedItemStyle,
+    });
     const legendType = get(legend, 'type', 'discrete');
     const isTitleEnabled = Boolean((_a = legend === null || legend === void 0 ? void 0 : legend.title) === null || _a === void 0 ? void 0 : _a.text);
     const titleMargin = isTitleEnabled ? get(legend, 'title.margin', 4) : 0;
@@ -34,9 +37,11 @@ export async function getPreparedLegend(args) {
         stops: [],
     };
     let height = 0;
+    let legendWidth = 0;
     if (enabled) {
         height += titleHeight + titleMargin;
         if (legendType === 'continuous') {
+            legendWidth = get(legend, 'width', CONTINUOUS_LEGEND_SIZE.width);
             height += CONTINUOUS_LEGEND_SIZE.height;
             height += ticks.labelsLineHeight + ticks.labelsMargin;
             colorScale.colors = (_c = (_b = legend === null || legend === void 0 ? void 0 : legend.colorScale) === null || _b === void 0 ? void 0 : _b.colors) !== null && _c !== void 0 ? _c : [];
@@ -47,9 +52,9 @@ export async function getPreparedLegend(args) {
         }
         else {
             height += lineHeight;
+            legendWidth = get(legend, 'width', lineWidth);
         }
     }
-    const legendWidth = get(legend, 'width', CONTINUOUS_LEGEND_SIZE.width);
     return {
         align: get(legend, 'align', legendDefaults.align),
         justifyContent: get(legend, 'justifyContent', legendDefaults.justifyContent),
@@ -168,10 +173,61 @@ function getPagination(args) {
     });
     return { pages };
 }
+function getLegendOffset(args) {
+    const { position, chartWidth, chartHeight, chartMargin, legendWidth, legendHeight } = args;
+    switch (position) {
+        case 'top':
+            return {
+                top: chartMargin.top,
+                left: chartMargin.left,
+            };
+        case 'right':
+            return {
+                top: chartMargin.top,
+                left: chartWidth - chartMargin.right - legendWidth,
+            };
+        case 'left':
+            return {
+                top: chartMargin.top,
+                left: chartMargin.left,
+            };
+        case 'bottom':
+        default:
+            return {
+                top: chartHeight - chartMargin.bottom - legendHeight,
+                left: chartMargin.left,
+            };
+    }
+}
+function getMaxLegendWidth(args) {
+    const { chartWidth, chartMargin, preparedLegend, isVerticalPosition } = args;
+    if (isVerticalPosition) {
+        return (chartWidth - chartMargin.right - chartMargin.left - preparedLegend.margin) / 2;
+    }
+    return chartWidth - chartMargin.right - chartMargin.left;
+}
+function getMaxLegendHeight(args) {
+    const { chartHeight, chartMargin, preparedLegend, isVerticalPosition } = args;
+    if (isVerticalPosition) {
+        return chartHeight - chartMargin.top - chartMargin.bottom;
+    }
+    return (chartHeight - chartMargin.top - chartMargin.bottom - preparedLegend.margin) / 2;
+}
 export function getLegendComponents(args) {
     const { chartWidth, chartHeight, chartMargin, series, preparedLegend } = args;
-    const maxLegendWidth = chartWidth - chartMargin.right - chartMargin.left;
-    const maxLegendHeight = (chartHeight - chartMargin.top - chartMargin.bottom - preparedLegend.margin) / 2;
+    const isVerticalPosition = preparedLegend.position === 'right' || preparedLegend.position === 'left';
+    const maxLegendWidth = getMaxLegendWidth({
+        chartWidth,
+        chartMargin,
+        preparedLegend,
+        isVerticalPosition,
+    });
+    const maxLegendHeight = getMaxLegendHeight({
+        chartHeight,
+        chartMargin,
+        preparedLegend,
+        isVerticalPosition,
+    });
     const flattenLegendItems = getFlattenLegendItems(series, preparedLegend);
     const items = getGroupedLegendItems({
         maxLegendWidth,
@@ -197,13 +253,15 @@ export function getLegendComponents(args) {
             });
         }
         preparedLegend.height = legendHeight;
+        preparedLegend.width = Math.max(maxLegendWidth, preparedLegend.width);
     }
-    const top = preparedLegend.position === 'top'
-        ? chartMargin.top
-        : chartHeight - chartMargin.bottom - preparedLegend.height;
-    const offset = {
-        left: chartMargin.left,
-        top,
-    };
+    const offset = getLegendOffset({
+        position: preparedLegend.position,
+        chartWidth,
+        chartHeight,
+        chartMargin,
+        legendWidth: preparedLegend.width,
+        legendHeight: preparedLegend.height,
+    });
     return { legendConfig: { offset, pagination, maxWidth: maxLegendWidth }, legendItems: items };
 }

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

@@ -66,7 +66,7 @@ export interface ChartLegend extends ChartLegendItem {
      *
      * @default 'bottom'
      * */
-    position?: 'top' | 'bottom';
+    position?: 'top' | 'bottom' | 'left' | 'right';
 }
 export interface BaseLegendSymbol {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "1.25.0",
+  "version": "1.26.1",
   "description": "React component used to render charts",
   "license": "MIT",
   "main": "dist/cjs/index.js",