@gravity-ui/charts 1.37.1 → 1.38.0

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

@@ -1,10 +1,9 @@
-import { select } from 'd3';
 import { groupBy } from 'lodash';
 import clone from 'lodash/clone';
 import get from 'lodash/get';
 import merge from 'lodash/merge';
 import { CONTINUOUS_LEGEND_SIZE, legendDefaults } from '../../constants';
-import { getDefaultColorStops, getDomainForContinuousColorScale, getLabelsSize } from '../../utils';
+import { getDefaultColorStops, getDomainForContinuousColorScale, getLabelsSize, getTextSizeFn, getTextWithElipsis, } from '../../utils';
 export async function getPreparedLegend(args) {
     var _a, _b, _c, _d, _e, _f, _g;
     const { legend, series } = args;
@@ -87,68 +86,81 @@ function getFlattenLegendItems(series, preparedLegend) {
     return Object.values(grouped).reduce((acc, items) => {
         const s = items.find((item) => item.legend.enabled);
         if (s) {
-            acc.push(Object.assign(Object.assign({}, s), { id: s.legend.groupId, name: s.legend.itemText, height: preparedLegend.lineHeight, symbol: s.legend.symbol }));
+            acc.push(Object.assign(Object.assign({}, s), { id: s.legend.groupId, name: s.legend.itemText, text: s.legend.itemText, height: preparedLegend.lineHeight, symbol: s.legend.symbol }));
         }
         return acc;
     }, []);
 }
-function getGroupedLegendItems(args) {
+async function getGroupedLegendItems(args) {
     const { maxLegendWidth, items, preparedLegend } = args;
     const result = [[]];
-    const bodySelection = select(document.body);
     let textWidthsInLine = [0];
     let lineIndex = 0;
-    items.forEach((item) => {
-        const itemSelection = preparedLegend.html
-            ? bodySelection
-                .append('div')
-                .html(item.name)
-                .style('position', 'absolute')
-                .style('display', 'inline-block')
-                .style('white-space', 'nowrap')
-            : bodySelection.append('text').text(item.name).style('white-space', 'nowrap');
-        itemSelection
-            .style('font-size', preparedLegend.itemStyle.fontSize)
-            .each(function () {
-            const resultItem = clone(item);
-            const { height, width: textWidth } = this.getBoundingClientRect();
-            resultItem.height = height;
-            if (textWidth >
-                maxLegendWidth - resultItem.symbol.width - resultItem.symbol.padding) {
+    const getLegendItemTextSize = getTextSizeFn({ style: preparedLegend.itemStyle });
+    for (let i = 0; i < items.length; i++) {
+        const item = items[i];
+        const resultItem = clone(item);
+        resultItem.text = item.name;
+        const maxTextWidth = maxLegendWidth - resultItem.symbol.width - resultItem.symbol.padding;
+        let textHeight = 0;
+        let textWidth = 0;
+        if (preparedLegend.html) {
+            const textSize = await getLabelsSize({
+                labels: [resultItem.text],
+                html: true,
+                style: preparedLegend.itemStyle,
+            });
+            textHeight = textSize.maxHeight;
+            textWidth = textSize.maxWidth;
+        }
+        else {
+            const textSize = await getLegendItemTextSize(resultItem.text);
+            textHeight = textSize.height;
+            textWidth = textSize.width;
+        }
+        resultItem.height = textHeight;
+        if (textWidth > maxTextWidth) {
+            if (preparedLegend.html) {
                 resultItem.overflowed = true;
-                resultItem.textWidth =
-                    maxLegendWidth - resultItem.symbol.width - resultItem.symbol.padding;
+                resultItem.textWidth = maxTextWidth;
             }
             else {
-                resultItem.textWidth = textWidth;
-            }
-            textWidthsInLine.push(textWidth);
-            const textsWidth = textWidthsInLine.reduce((acc, width) => acc + width, 0);
-            if (!result[lineIndex]) {
-                result[lineIndex] = [];
+                resultItem.text = await getTextWithElipsis({
+                    text: resultItem.text,
+                    getTextWidth: async (s) => (await getLegendItemTextSize(s)).width,
+                    maxWidth: maxTextWidth,
+                });
+                resultItem.textWidth = (await getLegendItemTextSize(resultItem.text)).width;
             }
-            result[lineIndex].push(resultItem);
-            const symbolsWidth = result[lineIndex].reduce((acc, { symbol }) => {
-                return acc + symbol.width + symbol.padding;
-            }, 0);
-            const distancesWidth = (result[lineIndex].length - 1) * preparedLegend.itemDistance;
-            const isOverflowedAsOnlyItemInLine = resultItem.overflowed && result[lineIndex].length === 1;
-            const isCurrentLineOverMaxWidth = maxLegendWidth < textsWidth + symbolsWidth + distancesWidth;
-            if (isOverflowedAsOnlyItemInLine) {
-                lineIndex += 1;
-                textWidthsInLine = [];
-            }
-            else if (isCurrentLineOverMaxWidth) {
-                result[lineIndex].pop();
-                lineIndex += 1;
-                textWidthsInLine = [textWidth];
-                const nextLineIndex = lineIndex;
-                result[nextLineIndex] = [];
-                result[nextLineIndex].push(resultItem);
-            }
-        })
-            .remove();
-    });
+        }
+        else {
+            resultItem.textWidth = textWidth;
+        }
+        textWidthsInLine.push(textWidth);
+        const textsWidth = textWidthsInLine.reduce((acc, width) => acc + width, 0);
+        if (!result[lineIndex]) {
+            result[lineIndex] = [];
+        }
+        result[lineIndex].push(resultItem);
+        const symbolsWidth = result[lineIndex].reduce((acc, { symbol }) => {
+            return acc + symbol.width + symbol.padding;
+        }, 0);
+        const distancesWidth = (result[lineIndex].length - 1) * preparedLegend.itemDistance;
+        const isOverflowedAsOnlyItemInLine = resultItem.overflowed && result[lineIndex].length === 1;
+        const isCurrentLineOverMaxWidth = maxLegendWidth < textsWidth + symbolsWidth + distancesWidth;
+        if (isOverflowedAsOnlyItemInLine) {
+            lineIndex += 1;
+            textWidthsInLine = [];
+        }
+        else if (isCurrentLineOverMaxWidth) {
+            result[lineIndex].pop();
+            lineIndex += 1;
+            textWidthsInLine = [textWidth];
+            const nextLineIndex = lineIndex;
+            result[nextLineIndex] = [];
+            result[nextLineIndex].push(resultItem);
+        }
+    }
     return result;
 }
 function getPagination(args) {
@@ -227,7 +239,7 @@ function getMaxLegendHeight(args) {
     }
     return (chartHeight - chartMargin.top - chartMargin.bottom - preparedLegend.margin) / 2;
 }
-export function getLegendComponents(args) {
+export async function getLegendComponents(args) {
     const { chartWidth, chartHeight, chartMargin, series, preparedLegend } = args;
     const isVerticalPosition = preparedLegend.position === 'right' || preparedLegend.position === 'left';
     const maxLegendWidth = getMaxLegendWidth({
@@ -243,7 +255,7 @@ export function getLegendComponents(args) {
         isVerticalPosition,
     });
     const flattenLegendItems = getFlattenLegendItems(series, preparedLegend);
-    const items = getGroupedLegendItems({
+    const items = await getGroupedLegendItems({
         maxLegendWidth,
         items: flattenLegendItems,
         preparedLegend,
@@ -278,5 +290,14 @@ export function getLegendComponents(args) {
         legendWidth: preparedLegend.width,
         legendHeight: preparedLegend.height,
     });
-    return { legendConfig: { offset, pagination, maxWidth: maxLegendWidth }, legendItems: items };
+    return {
+        legendConfig: {
+            offset,
+            pagination,
+            maxWidth: maxLegendWidth,
+            height: preparedLegend.height,
+            width: preparedLegend.width,
+        },
+        legendItems: items,
+    };
 }

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

@@ -44,25 +44,13 @@ export type LegendItem = {
     color: string;
     height: number;
     name: string;
+    text: string;
     symbol: PreparedLegendSymbol;
     textWidth: number;
     dashStyle?: DashStyle;
     overflowed?: boolean;
     visible?: boolean;
 };
-export type LegendConfig = {
-    offset: {
-        left: number;
-        top: number;
-    };
-    maxWidth: number;
-    pagination?: {
-        pages: {
-            start: number;
-            end: number;
-        }[];
-    };
-};
 export type PreparedHaloOptions = {
     enabled: boolean;
     opacity: number;

package/dist/cjs/index.d.ts

@@ -1,3 +1,4 @@
 export { CustomShapeRenderer, getFormattedValue } from './utils';
+export { getDefaultTooltipHeaderFormat } from './hooks/useChartOptions/tooltip';
 export * from './components';
 export * from './types';

package/dist/cjs/index.js

@@ -1,3 +1,4 @@
 export { CustomShapeRenderer, getFormattedValue } from './utils';
+export { getDefaultTooltipHeaderFormat } from './hooks/useChartOptions/tooltip';
 export * from './components';
 export * from './types';

package/dist/cjs/types/chart-ui.d.ts

@@ -27,3 +27,18 @@ export interface HtmlItem {
 export interface ShapeDataWithHtmlItems {
     htmlElements: HtmlItem[];
 }
+export type LegendConfig = {
+    offset: {
+        left: number;
+        top: number;
+    };
+    pagination?: {
+        pages: {
+            start: number;
+            end: number;
+        }[];
+    };
+    maxWidth: number;
+    height: number;
+    width: number;
+};

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

@@ -107,8 +107,10 @@ export const getDomainDataYBySeries = (series) => {
                 let yValue = 0;
                 const points = seriesList.map((s) => s.data).flat();
                 sortBy(points, (p) => p.index).forEach((d) => {
-                    yValue += Number(d.y) || 0;
-                    acc.push(yValue);
+                    if (!d.total) {
+                        yValue += Number(d.y) || 0;
+                        acc.push(yValue);
+                    }
                 });
                 break;
             }

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

@@ -176,9 +176,6 @@ function unescapeHtml(str) {
         return result.replace(value, key);
     }, str);
 }
-function getCssStyle(prop, el = document.body) {
-    return window.getComputedStyle(el, null).getPropertyValue(prop);
-}
 let measureCanvas = null;
 export function getTextSizeFn({ style }) {
     var _a;
@@ -188,9 +185,10 @@ export function getTextSizeFn({ style }) {
         throw new Error("Couldn't get canvas context");
     }
     const element = (_a = document.getElementsByClassName(b())[0]) !== null && _a !== void 0 ? _a : document.body;
-    const defaultFontFamily = getCssStyle('font-family', element);
-    const defaultFontSize = getCssStyle('font-size', element);
-    const defaultFontWeight = getCssStyle('font-weight', element);
+    const computedStyle = window.getComputedStyle(element, null);
+    const defaultFontFamily = computedStyle.getPropertyValue('font-family');
+    const defaultFontSize = computedStyle.getPropertyValue('font-size');
+    const defaultFontWeight = computedStyle.getPropertyValue('font-weight');
     return async (str) => {
         var _a, _b;
         await document.fonts.ready;

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

@@ -66,7 +66,8 @@ export const ChartInner = (props) => {
     const { allPreparedSeries, boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, isOutsideBounds, legendConfig, legendItems, preparedLegend, preparedSeries, preparedSeriesOptions, preparedSplit, prevHeight, prevWidth, shapes, shapesData, shapesReady, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
         dispatcher,
         htmlLayout, plotNode: plotRef.current, preparedChart,
-        rangeSliderState, svgContainer: svgRef.current, updateZoomState,
+        rangeSliderState,
+        updateZoomState,
         zoomState }));
     const debouncedBoundsWidth = useDebouncedValue({
         value: boundsWidth,
@@ -248,7 +249,7 @@ export const ChartInner = (props) => {
             React.createElement("g", { ref: plotBeforeRef }),
             shapes,
             React.createElement("g", { ref: plotAfterRef })),
-        ((_e = xAxis === null || xAxis === void 0 ? void 0 : xAxis.rangeSlider) === null || _e === void 0 ? void 0 : _e.enabled) && (React.createElement(RangeSlider, { boundsOffsetLeft: debouncedOffsetLeft, boundsWidth: debouncedBoundsWidth, height: height, htmlLayout: htmlLayout, onUpdate: updateRangeSliderState, preparedChart: preparedChart, preparedLegend: preparedLegend, preparedSeries: debouncedAllPreparedSeries, preparedSeriesOptions: preparedSeriesOptions, preparedRangeSlider: xAxis.rangeSlider, rangeSliderState: rangeSliderState, ref: rangeSliderRef, width: width, xAxis: data.xAxis, yAxis: data.yAxis })),
+        ((_e = xAxis === null || xAxis === void 0 ? void 0 : xAxis.rangeSlider) === null || _e === void 0 ? void 0 : _e.enabled) && (React.createElement(RangeSlider, { boundsOffsetLeft: debouncedOffsetLeft, boundsWidth: debouncedBoundsWidth, height: height, htmlLayout: htmlLayout, onUpdate: updateRangeSliderState, preparedChart: preparedChart, preparedLegend: preparedLegend, preparedSeries: debouncedAllPreparedSeries, preparedSeriesOptions: preparedSeriesOptions, preparedRangeSlider: xAxis.rangeSlider, rangeSliderState: rangeSliderState, ref: rangeSliderRef, width: width, xAxis: data.xAxis, yAxis: data.yAxis, legendConfig: legendConfig })),
         (preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && legendConfig && (React.createElement(Legend, { chartSeries: preparedSeries, legend: preparedLegend, items: legendItems, config: legendConfig, onItemClick: handleLegendItemClick, onUpdate: unpinTooltip, htmlLayout: htmlLayout }))));
     return (React.createElement("div", { className: b() },
         React.createElement("svg", { ref: svgRef, width: width, height: height, 

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { Dispatch } from 'd3';
-import type { PreparedChart, PreparedLegend, RangeSliderState, ZoomState } from '../../hooks';
+import type { LegendItem, PreparedChart, PreparedLegend, PreparedSeries, RangeSliderState, ZoomState } from '../../hooks';
+import type { LegendConfig } from '../../types';
 import type { ChartInnerProps } from './types';
 type Props = ChartInnerProps & {
     clipPathId: string;
@@ -8,35 +9,33 @@ type Props = ChartInnerProps & {
     htmlLayout: HTMLElement | null;
     plotNode: SVGGElement | null;
     preparedChart: PreparedChart;
-    svgContainer: SVGGElement | null;
     updateZoomState: (nextZoomState: Partial<ZoomState>) => void;
     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: import("../../hooks").PreparedSeries[];
+    allPreparedSeries: PreparedSeries[];
     boundsHeight: number;
     boundsOffsetLeft: number;
     boundsOffsetTop: number;
     boundsWidth: number;
     handleLegendItemClick: import("../../hooks").OnLegendItemClick;
     isOutsideBounds: (x: number, y: number) => boolean;
-    legendConfig: {
-        offset: {
-            left: number;
-            top: number;
-        };
-        pagination: {
-            pages: {
-                start: number;
-                end: number;
-            }[];
-        } | undefined;
-        maxWidth: number;
-    } | undefined;
-    legendItems: never[] | import("../../hooks").LegendItem[][];
+    legendConfig: LegendConfig | undefined;
+    legendItems: LegendItem[][];
     preparedLegend: PreparedLegend | null;
-    preparedSeries: import("../../hooks").PreparedSeries[];
+    preparedSeries: PreparedSeries[];
     preparedSeriesOptions: import("../../constants").SeriesOptionsDefaults;
     preparedSplit: import("../../hooks").PreparedSplit;
     prevHeight: number | undefined;
@@ -44,7 +43,6 @@ export declare function useChartInnerProps(props: Props): {
     shapes: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
     shapesData: import("../../hooks").ShapeData[];
     shapesReady: boolean;
-    svgXPos: number | undefined;
     xAxis: import("../../hooks").PreparedXAxis | null;
     xScale: import("../../hooks").ChartScale | undefined;
     yAxis: (Omit<import("../..").ChartAxis, "type" | "labels" | "plotLines" | "plotBands"> & {

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

@@ -1,4 +1,5 @@
 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';
@@ -9,17 +10,18 @@ import { hasAtLeastOneSeriesDataPerPlot } from './utils';
 const CLIP_PATH_BY_SERIES_TYPE = {
     [SERIES_TYPE.Scatter]: false,
 };
-function getBoundsOffsetTop(args) {
-    const { chartMarginTop, preparedLegend } = args;
+function getBoundsOffsetTop({ chartMarginTop, preparedLegend, legendConfig, }) {
+    var _a;
     return (chartMarginTop +
         ((preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && preparedLegend.position === 'top'
-            ? preparedLegend.height + preparedLegend.margin
+            ? ((_a = legendConfig === null || legendConfig === void 0 ? void 0 : legendConfig.height) !== null && _a !== void 0 ? _a : 0) + preparedLegend.margin
             : 0));
 }
 function getBoundsOffsetLeft(args) {
-    const { chartMarginLeft, preparedLegend, yAxis, getYAxisWidth: getAxisWidth } = args;
+    var _a;
+    const { chartMarginLeft, preparedLegend, yAxis, getYAxisWidth: getAxisWidth, legendConfig, } = args;
     const legendOffset = (preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && preparedLegend.position === 'left'
-        ? preparedLegend.width + preparedLegend.margin
+        ? ((_a = legendConfig === null || legendConfig === void 0 ? void 0 : legendConfig.width) !== null && _a !== void 0 ? _a : 0) + preparedLegend.margin
         : 0;
     const leftAxisWidth = yAxis.reduce((acc, axis) => {
         if (axis.position !== 'left') {
@@ -33,9 +35,47 @@ 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) {
-    var _a;
-    const { clipPathId, data, dispatcher, height, htmlLayout, plotNode, preparedChart, rangeSliderState, svgContainer, width, updateZoomState, zoomState, } = props;
+    const { clipPathId, data, dispatcher, height, htmlLayout, plotNode, preparedChart, rangeSliderState, width, updateZoomState, zoomState, } = props;
     const prevWidth = usePrevious(width);
     const prevHeight = usePrevious(height);
     const colors = React.useMemo(() => {
@@ -76,21 +116,17 @@ export function useChartInnerProps(props) {
             zoomState: effectiveZoomState,
         });
     }, [allPreparedSeries, normalizedXAxis, normalizedYAxis, effectiveZoomState]);
-    const { legendConfig, legendItems } = React.useMemo(() => {
-        if (!preparedLegend) {
-            return { legendConfig: undefined, legendItems: [] };
-        }
-        return getLegendComponents({
-            chartWidth: width,
-            chartHeight: height,
-            chartMargin: preparedChart.margin,
-            series: preparedSeries,
-            preparedLegend,
-        });
-    }, [width, height, preparedChart.margin, preparedSeries, preparedLegend]);
+    const { legendConfig, legendItems } = useLegend({
+        width,
+        height,
+        preparedChart,
+        preparedSeries,
+        preparedLegend,
+    });
     const { xAxis, yAxis, setAxes } = useAxis({
         height,
         preparedChart,
+        legendConfig,
         preparedLegend,
         preparedSeries,
         preparedSeriesOptions,
@@ -106,6 +142,7 @@ export function useChartInnerProps(props) {
         preparedYAxis: yAxis,
         preparedXAxis: xAxis,
         width,
+        legendConfig,
     });
     const preparedSplit = useSplit({ split: data.split, boundsHeight, chartWidth: width });
     const { xScale, yScale } = useAxisScales({
@@ -166,6 +203,7 @@ export function useChartInnerProps(props) {
     const boundsOffsetTop = getBoundsOffsetTop({
         chartMarginTop: preparedChart.margin.top,
         preparedLegend,
+        legendConfig,
     });
     // We need to calculate the width of each left axis because the first axis can be hidden
     const boundsOffsetLeft = getBoundsOffsetLeft({
@@ -173,8 +211,8 @@ export function useChartInnerProps(props) {
         preparedLegend,
         yAxis,
         getYAxisWidth,
+        legendConfig,
     });
-    const { x } = (_a = svgContainer === null || svgContainer === void 0 ? void 0 : svgContainer.getBoundingClientRect()) !== null && _a !== void 0 ? _a : {};
     return {
         allPreparedSeries,
         boundsHeight,
@@ -194,7 +232,6 @@ export function useChartInnerProps(props) {
         shapes,
         shapesData,
         shapesReady,
-        svgXPos: x,
         xAxis,
         xScale,
         yAxis,

package/dist/esm/components/Legend/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import type { LegendConfig, LegendItem, OnLegendItemClick, PreparedLegend, PreparedSeries } from '../../hooks';
+import type { LegendItem, OnLegendItemClick, PreparedLegend, PreparedSeries } from '../../hooks';
+import type { LegendConfig } from '../../types';
 import './styles.css';
 type Props = {
     chartSeries: PreparedSeries[];

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { scaleLinear, select, symbol } from 'd3';
 import { CONTINUOUS_LEGEND_SIZE } from '../../constants';
 import { formatNumber } from '../../libs';
-import { block, createGradientRect, getContinuesColorFn, getLabelsSize, getSymbol, getUniqId, handleOverflowingText, } from '../../utils';
+import { block, createGradientRect, getContinuesColorFn, getLabelsSize, getSymbol, getUniqId, } from '../../utils';
 import { axisBottom } from '../../utils/chart/axis-generators';
 import { appendLinePathElement } from '../utils';
 import './styles.css';
@@ -163,7 +163,6 @@ export const Legend = (props) => {
                     : items;
                 const legendLineHeights = [];
                 pageItems.forEach((line) => {
-                    var _a;
                     const legendLine = svgElement.append('g').attr('class', b('line'));
                     const htmlLegendLine = htmlContainer === null || htmlContainer === void 0 ? void 0 : htmlContainer.append('div').style('position', 'absolute');
                     const legendItemTemplate = legendLine
@@ -214,9 +213,8 @@ export const Legend = (props) => {
                             .on('click', function (e, d) {
                             onItemClick({ id: d.id, name: d.name, metaKey: e.metaKey });
                             onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate();
-                        })[legend.html ? 'html' : 'text'](function (d) {
-                            return d.name;
-                        });
+                        })
+                            .html((d) => d.text);
                     }
                     else {
                         legendItemTemplate
@@ -231,19 +229,22 @@ export const Legend = (props) => {
                             const mods = { selected: d.visible, unselected: !d.visible };
                             return b('item-text', mods);
                         })
-                            .html(function (d) {
-                            return ('name' in d && d.name);
-                        })
-                            .style('font-size', legend.itemStyle.fontSize)
-                            .each((d, index, nodes) => {
-                            if (d.overflowed) {
-                                handleOverflowingText(nodes[index], d.textWidth);
+                            .html((d) => d.text)
+                            .style('font-size', legend.itemStyle.fontSize);
+                    }
+                    let contentWidth = 0;
+                    if (legend.html) {
+                        contentWidth = getXPosition(line.length) - legend.itemDistance;
+                    }
+                    else {
+                        contentWidth = line.reduce((sum, l, index) => {
+                            sum += l.textWidth + l.symbol.width + l.symbol.padding;
+                            if (index > 0) {
+                                sum += legend.itemDistance;
                             }
-                        });
+                            return sum;
+                        }, 0);
                     }
-                    const contentWidth = (legend.html
-                        ? getXPosition(line.length) - legend.itemDistance
-                        : (_a = legendLine.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
                     let left = 0;
                     switch (legend.justifyContent) {
                         case 'center': {

package/dist/esm/hooks/useAxis/index.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
-import type { ChartXAxis, ChartYAxis } from '../../types';
+import type { ChartXAxis, ChartYAxis, LegendConfig } from '../../types';
 import type { PreparedChart } from '../useChartOptions/types';
 import type { PreparedLegend, PreparedSeries, PreparedSeriesOptions } from '../useSeries/types';
 import type { AxesState } from './types';
 interface UseAxesProps {
     height: number;
     preparedChart: PreparedChart;
+    legendConfig: LegendConfig | undefined;
     preparedLegend: PreparedLegend | null;
     preparedSeries: PreparedSeries[];
     preparedSeriesOptions: PreparedSeriesOptions;

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

@@ -4,15 +4,20 @@ import { getWidthOccupiedByYAxis } from '../useChartDimensions/utils';
 import { getPreparedXAxis } from './x-axis';
 import { getPreparedYAxis } from './y-axis';
 export function useAxis(props) {
-    const { boundsHeight, height, preparedChart, preparedLegend, preparedSeries, preparedSeriesOptions, width, xAxis, yAxis, } = props;
+    const { boundsHeight, height, preparedChart, legendConfig, preparedLegend, preparedSeries, preparedSeriesOptions, width, xAxis, yAxis, } = props;
     const [axesState, setAxes] = React.useState({ xAxis: null, yAxis: [] });
     const axesStateRunRef = React.useRef(0);
     const prevAxesStateValue = React.useRef(axesState);
     const axesStateReady = React.useRef(false);
     React.useEffect(() => {
+        const shouldWaitForLegendReady = !preparedLegend || ((preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.enabled) && !legendConfig);
+        if (shouldWaitForLegendReady) {
+            return;
+        }
         axesStateRunRef.current++;
         axesStateReady.current = false;
         (async function () {
+            var _a, _b;
             const currentRun = axesStateRunRef.current;
             const seriesData = preparedSeries.filter((s) => s.visible);
             const estimatedPreparedYAxis = await getPreparedYAxis({
@@ -41,7 +46,8 @@ export function useAxis(props) {
                             (preparedXAxis.rangeSlider.enabled
                                 ? preparedXAxis.rangeSlider.height + preparedXAxis.rangeSlider.margin
                                 : 0) +
-                            (preparedLegend ? preparedLegend.height + preparedLegend.margin : 0) +
+                            ((_a = legendConfig === null || legendConfig === void 0 ? void 0 : legendConfig.height) !== null && _a !== void 0 ? _a : 0) +
+                            ((_b = preparedLegend === null || preparedLegend === void 0 ? void 0 : preparedLegend.margin) !== null && _b !== void 0 ? _b : 0) +
                             preparedChart.margin.top +
                             preparedChart.margin.bottom);
             }
@@ -65,6 +71,7 @@ export function useAxis(props) {
         boundsHeight,
         height,
         preparedChart.margin,
+        legendConfig,
         preparedLegend,
         preparedSeries,
         preparedSeriesOptions,

package/dist/esm/hooks/useChartDimensions/index.d.ts

@@ -1,5 +1,5 @@
 import type { PreparedLegend, PreparedSeries, PreparedXAxis, PreparedYAxis } from '../../hooks';
-import type { ChartMargin } from '../../types';
+import type { ChartMargin, LegendConfig } from '../../types';
 export { getBoundsWidth } from './utils';
 type Args = {
     height: number;
@@ -9,6 +9,7 @@ type Args = {
     preparedXAxis: PreparedXAxis | null;
     preparedYAxis: PreparedYAxis[] | null;
     width: number;
+    legendConfig: LegendConfig | undefined;
 };
 export declare const useChartDimensions: (args: Args) => {
     boundsWidth: number;