@gravity-ui/charts 1.42.3 → 1.43.0

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

@@ -20,7 +20,7 @@ import { useChartInnerHandlers } from './useChartInnerHandlers';
 import { useChartInnerProps } from './useChartInnerProps';
 import { useChartInnerState } from './useChartInnerState';
 import { useDefaultState } from './useDefaultState';
-import { getPreparedChart, getPreparedTitle, getPreparedTooltip, getResetZoomButtonStyle, useAsyncState, useDebouncedValue, } from './utils';
+import { getPreparedTooltip, getResetZoomButtonStyle, useAsyncState, useDebouncedValue, } from './utils';
 import './styles.css';
 const b = block('chart');
 const DEBOUNCED_VALUE_DELAY = 10;
@@ -36,16 +36,6 @@ export const ChartInner = (props) => {
     const rangeSliderRef = React.useRef(null);
     const dispatcher = React.useMemo(() => getDispatcher(), []);
     const clipPathId = useUniqId();
-    const preparedTitle = React.useMemo(() => {
-        return getPreparedTitle({ title: data.title });
-    }, [data.title]);
-    const preparedChart = React.useMemo(() => {
-        return getPreparedChart({
-            chart: data.chart,
-            seriesData: data.series.data,
-            preparedTitle,
-        });
-    }, [data.chart, data.series.data, preparedTitle]);
     const preparedTooltip = React.useMemo(() => {
         return getPreparedTooltip({
             tooltip: data.tooltip,
@@ -62,10 +52,9 @@ export const ChartInner = (props) => {
         preparedRangeSlider,
         tooltip: preparedTooltip,
     });
-    const { activeLegendItems, allPreparedSeries, boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, legendConfig, legendItems, preparedLegend, preparedSeries, preparedSeriesOptions, preparedSplit, shapes, shapesData, shapesReady, xAxis, xScale, yAxis, yScale, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
+    const { activeLegendItems, allPreparedSeries, boundsHeight, boundsOffsetLeft, boundsOffsetTop, boundsWidth, handleLegendItemClick, legendConfig, legendItems, preparedLegend, preparedSeries, preparedSeriesOptions, preparedSplit, shapes, shapesData, shapesReady, xAxis, xScale, yAxis, yScale, preparedTitle, preparedChart, } = useChartInnerProps(Object.assign(Object.assign({}, props), { clipPathId,
         dispatcher,
-        htmlLayout, plotNode: plotRef.current, preparedChart,
-        rangeSliderState,
+        htmlLayout, plotNode: plotRef.current, rangeSliderState,
         updateZoomState,
         zoomState }));
     const prevWidth = usePrevious(width);
@@ -165,6 +154,13 @@ export const ChartInner = (props) => {
                     split: preparedSplit,
                     series: preparedSeries.filter((s) => s.visible),
                 });
+                axisData.plotShapes.forEach((shapeData, j) => {
+                    if (axis.plotShapes[j]) {
+                        axis.plotShapes[j].hitbox = shapeData.hitbox;
+                        axis.plotShapes[j].x = shapeData.x;
+                        axis.plotShapes[j].y = shapeData.y;
+                    }
+                });
                 items.push(axisData);
             }
         }
@@ -191,6 +187,15 @@ export const ChartInner = (props) => {
                 split: preparedSplit,
                 yAxis,
             });
+            axisData.forEach((data) => {
+                data.plotShapes.forEach((shapeData, i) => {
+                    if (axis.plotShapes[i]) {
+                        axis.plotShapes[i].hitbox = shapeData.hitbox;
+                        axis.plotShapes[i].x = shapeData.x;
+                        axis.plotShapes[i].y = shapeData.y;
+                    }
+                });
+            });
             items.push(...axisData);
         }
         return items;
@@ -269,6 +274,7 @@ export const ChartInner = (props) => {
             shapes,
             React.createElement("g", { ref: plotAfterRef })),
         ((_e = xAxis === null || xAxis === void 0 ? void 0 : xAxis.rangeSlider) === null || _e === void 0 ? void 0 : _e.enabled) &&
+            preparedChart &&
             preparedLegend &&
             debouncedAllPreparedSeries &&
             preparedSeriesOptions && (React.createElement(RangeSlider, { activeLegendItems: activeLegendItems !== null && activeLegendItems !== void 0 ? activeLegendItems : [], 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 })),
@@ -281,7 +287,7 @@ export const ChartInner = (props) => {
         React.createElement("div", { className: b('html-layer'), ref: setHtmlLayout, style: {
                 '--g-html-layout-transform': `translate(${boundsOffsetLeft}px, ${boundsOffsetTop}px)`,
             } }),
-        Object.keys(zoomState).length > 0 && preparedChart.zoom && (React.createElement(Button, { className: b('reset-zoom-button'), onClick: () => {
+        Object.keys(zoomState).length > 0 && (preparedChart === null || preparedChart === void 0 ? void 0 : preparedChart.zoom) && (React.createElement(Button, { className: b('reset-zoom-button'), onClick: () => {
                 var _a;
                 updateZoomState({});
                 (_a = rangeSliderRef.current) === null || _a === void 0 ? void 0 : _a.resetState();

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

@@ -29,7 +29,7 @@ export function useChartInnerHandlers(props) {
             boundsHeight,
             boundsWidth,
         });
-        const { plotLines, plotBands } = getHoveredPlots({
+        const { plotBands, plotLines, plotShapes } = getHoveredPlots({
             pointerX: x,
             pointerY: y,
             xAxis,
@@ -37,7 +37,7 @@ export function useChartInnerHandlers(props) {
             xScale,
             yScale,
         });
-        const hoveredPlotsArg = { lines: plotLines, bands: plotBands };
+        const hoveredPlotsArg = { bands: plotBands, lines: plotLines, shapes: plotShapes };
         dispatcher.call(EventType.HOVER_SHAPE, event.target, closest, [pointerX, pointerY], hoveredPlotsArg);
         dispatcher.call(EventType.POINTERMOVE_CHART, {}, {
             hovered: closest,
@@ -93,7 +93,7 @@ export function useChartInnerHandlers(props) {
         dispatcher.call(EventType.CLICK_CHART, undefined, { point: selected.data, series: selected.series }, event);
         const nextTooltipFixed = !tooltipPinned;
         if (!nextTooltipFixed) {
-            const { plotLines, plotBands } = getHoveredPlots({
+            const { plotBands, plotLines, plotShapes } = getHoveredPlots({
                 pointerX: x,
                 pointerY: y,
                 xAxis,
@@ -101,14 +101,15 @@ export function useChartInnerHandlers(props) {
                 xScale,
                 yScale,
             });
-            const hoveredPlotsArg = { lines: plotLines, bands: plotBands };
+            const hoveredPlotsArg = { bands: plotBands, lines: plotLines, shapes: plotShapes };
             dispatcher.call(EventType.HOVER_SHAPE, event.target, items, [pointerX, pointerY], hoveredPlotsArg);
             dispatcher.call(EventType.POINTERMOVE_CHART, {}, {
                 hovered: items,
                 xAxis,
                 yAxis: yAxis[0],
-                hoveredPlotLines: plotLines,
                 hoveredPlotBands: plotBands,
+                hoveredPlotLines: plotLines,
+                hoveredPlotShapes: plotShapes,
             }, event);
         }
         togglePinTooltip === null || togglePinTooltip === void 0 ? void 0 : togglePinTooltip(nextTooltipFixed, event);

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { Dispatch } from 'd3-dispatch';
 import type { ChartScale, LegendItem, OnLegendItemClick, PreparedLegend, PreparedSeries, PreparedSplit, PreparedXAxis, PreparedYAxis, RangeSliderState, ShapeData, ZoomState } from '../../hooks';
-import type { PreparedChart } from '../../hooks/types';
+import type { PreparedChart, PreparedTitle } from '../../hooks/types';
 import type { LegendConfig } from '../../types';
 import type { ChartInnerProps } from './types';
 type Props = ChartInnerProps & {
@@ -9,7 +9,6 @@ type Props = ChartInnerProps & {
     dispatcher: Dispatch<object>;
     htmlLayout: HTMLElement | null;
     plotNode: SVGGElement | null;
-    preparedChart: PreparedChart;
     updateZoomState: (nextZoomState: Partial<ZoomState>) => void;
     zoomState: Partial<ZoomState>;
     rangeSliderState?: RangeSliderState;
@@ -25,6 +24,8 @@ export declare function useChartInnerProps(props: Props): {
     shapesData: ShapeData[];
     shapesReady: boolean;
     handleLegendItemClick: OnLegendItemClick;
+    preparedTitle: PreparedTitle | undefined;
+    preparedChart: PreparedChart | undefined;
     allPreparedSeries?: PreparedSeries[] | undefined;
     legendConfig?: LegendConfig | undefined;
     legendItems?: LegendItem[][] | undefined;

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

@@ -6,7 +6,7 @@ import { getPreparedOptions } from '../../core/series/prepare-options';
 import { getChartDimensions, getEffectiveXRange, getSortedSeriesData, getYAxisWidth, getZoomedSeriesData, isAxisRelatedSeries, } from '../../core/utils';
 import { createScales, getAxes, getPreparedSeries, getShapes, getSplit, getVisibleSeries, useZoom, } from '../../hooks';
 import { getActiveLegendItems, getAllLegendItems } from '../../hooks/useSeries/utils';
-import { getNormalizedXAxis, getNormalizedYAxis, recalculateYAxisLabelsWidth } from './utils';
+import { getNormalizedXAxis, getNormalizedYAxis, getPreparedChart, getPreparedTitle, recalculateYAxisLabelsWidth, } from './utils';
 import { hasAtLeastOneSeriesDataPerPlot } from './utils/common';
 const CLIP_PATH_BY_SERIES_TYPE = {
     [SERIES_TYPE.Scatter]: false,
@@ -37,8 +37,8 @@ function getBoundsOffsetLeft(args) {
     return chartMarginLeft + legendOffset + leftAxisWidth;
 }
 export function useChartInnerProps(props) {
-    var _a, _b, _c, _d, _e, _f;
-    const { clipPathId, data, dispatcher, height, htmlLayout, plotNode, preparedChart, rangeSliderState, width, updateZoomState, zoomState, } = props;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const { clipPathId, data, dispatcher, height, htmlLayout, plotNode, rangeSliderState, width, updateZoomState, zoomState, } = props;
     const [selectedLegendItems, setSelectedLegendItems] = React.useState(null);
     const [chartState, setState] = React.useState(null);
     const prevStateValue = React.useRef(chartState);
@@ -50,6 +50,12 @@ export function useChartInnerProps(props) {
         (async function () {
             var _a, _b, _c;
             const chartDataChanged = !(previousChartData.current && isEqual(previousChartData.current, data));
+            const preparedTitle = await getPreparedTitle({ title: data.title, chartWidth: width });
+            const preparedChart = getPreparedChart({
+                chart: data.chart,
+                seriesData: data.series.data,
+                preparedTitle,
+            });
             const colors = (_a = data.colors) !== null && _a !== void 0 ? _a : DEFAULT_PALETTE;
             const normalizedSeriesData = getSortedSeriesData({
                 seriesData: data.series.data,
@@ -119,7 +125,7 @@ export function useChartInnerProps(props) {
             let yScale;
             let boundsWidth = 0;
             let boundsHeight = 0;
-            const calculateAxisBasedProps = () => {
+            const calculateAxisBasedProps = async () => {
                 const chartDimensions = getChartDimensions({
                     height,
                     margin: preparedChart.margin,
@@ -132,7 +138,11 @@ export function useChartInnerProps(props) {
                 });
                 boundsHeight = chartDimensions.boundsHeight;
                 boundsWidth = chartDimensions.boundsWidth;
-                preparedSplit = getSplit({ split: data.split, boundsHeight, chartWidth: width });
+                preparedSplit = await getSplit({
+                    split: data.split,
+                    boundsHeight,
+                    chartWidth: width,
+                });
                 if (preparedSeries.some(isAxisRelatedSeries)) {
                     ({ xScale, yScale } = createScales({
                         boundsWidth,
@@ -147,7 +157,7 @@ export function useChartInnerProps(props) {
                     }));
                 }
             };
-            calculateAxisBasedProps();
+            await calculateAxisBasedProps();
             const newYAxis = await recalculateYAxisLabelsWidth({
                 seriesData: preparedSeries,
                 yAxis,
@@ -155,7 +165,7 @@ export function useChartInnerProps(props) {
             });
             if (!isEqual(yAxis, newYAxis)) {
                 yAxis = newYAxis;
-                calculateAxisBasedProps();
+                await calculateAxisBasedProps();
             }
             const { shapes, shapesData } = await getShapes({
                 boundsWidth,
@@ -209,6 +219,8 @@ export function useChartInnerProps(props) {
                 yAxis,
                 yScale,
                 activeLegendItems,
+                preparedChart,
+                preparedTitle,
             };
             if (currentRunRef.current === currentRun) {
                 if (!isEqual(prevStateValue.current, newStateValue)) {
@@ -225,7 +237,6 @@ export function useChartInnerProps(props) {
         selectedLegendItems,
         zoomState,
         rangeSliderState,
-        preparedChart,
         dispatcher,
         htmlLayout,
         clipPathId,
@@ -277,15 +288,15 @@ export function useChartInnerProps(props) {
         plotContainerHeight: boundsHeight,
         plotContainerWidth: boundsWidth,
         preparedSplit: chartState === null || chartState === void 0 ? void 0 : chartState.preparedSplit,
-        preparedZoom: preparedChart.zoom,
+        preparedZoom: (_e = (_d = chartState === null || chartState === void 0 ? void 0 : chartState.preparedChart) === null || _d === void 0 ? void 0 : _d.zoom) !== null && _e !== void 0 ? _e : null,
         xAxis,
         xScale: chartState === null || chartState === void 0 ? void 0 : chartState.xScale,
         yAxis,
         yScale: chartState === null || chartState === void 0 ? void 0 : chartState.yScale,
     });
     // additional end
-    return Object.assign(Object.assign({}, chartState), { preparedSeries, boundsOffsetLeft: (_d = chartState === null || chartState === void 0 ? void 0 : chartState.boundsOffsetLeft) !== null && _d !== void 0 ? _d : 0, boundsOffsetTop: (_e = chartState === null || chartState === void 0 ? void 0 : chartState.boundsOffsetTop) !== null && _e !== void 0 ? _e : 0, boundsHeight,
+    return Object.assign(Object.assign({}, chartState), { preparedSeries, boundsOffsetLeft: (_f = chartState === null || chartState === void 0 ? void 0 : chartState.boundsOffsetLeft) !== null && _f !== void 0 ? _f : 0, boundsOffsetTop: (_g = chartState === null || chartState === void 0 ? void 0 : chartState.boundsOffsetTop) !== null && _g !== void 0 ? _g : 0, boundsHeight,
         boundsWidth,
         xAxis,
-        yAxis, shapesData: (_f = chartState === null || chartState === void 0 ? void 0 : chartState.shapesData) !== null && _f !== void 0 ? _f : [], shapesReady: Boolean(chartState), handleLegendItemClick });
+        yAxis, shapesData: (_h = chartState === null || chartState === void 0 ? void 0 : chartState.shapesData) !== null && _h !== void 0 ? _h : [], shapesReady: Boolean(chartState), handleLegendItemClick, preparedTitle: chartState === null || chartState === void 0 ? void 0 : chartState.preparedTitle, preparedChart: chartState === null || chartState === void 0 ? void 0 : chartState.preparedChart });
 }

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

@@ -29,7 +29,7 @@ export function useDefaultState(props) {
                 boundsHeight,
                 boundsWidth,
             });
-            const { plotLines, plotBands } = getHoveredPlots({
+            const { plotBands, plotLines, plotShapes } = getHoveredPlots({
                 pointerX: x,
                 pointerY: y,
                 xAxis,
@@ -37,7 +37,7 @@ export function useDefaultState(props) {
                 xScale,
                 yScale,
             });
-            const hoveredPlotsArg = { lines: plotLines, bands: plotBands };
+            const hoveredPlotsArg = { bands: plotBands, lines: plotLines, shapes: plotShapes };
             const svgPointerX = x + boundsOffsetLeft;
             const svgPointerY = y + boundsOffsetTop;
             dispatcher.call(EventType.HOVER_SHAPE, undefined, closest, [svgPointerX, svgPointerY], hoveredPlotsArg);
@@ -55,8 +55,9 @@ export function useDefaultState(props) {
                 hovered: closest,
                 xAxis,
                 yAxis: yAxis[0],
-                hoveredPlotLines: plotLines,
                 hoveredPlotBands: plotBands,
+                hoveredPlotLines: plotLines,
+                hoveredPlotShapes: plotShapes,
             }, syntheticEvent);
         });
     }, [

package/dist/cjs/components/ChartInner/utils/chart.js

@@ -4,7 +4,7 @@ const getMarginTop = (args) => {
     const { chart, preparedTitle } = args;
     let marginTop = get(chart, 'margin.top', 0);
     if (preparedTitle === null || preparedTitle === void 0 ? void 0 : preparedTitle.height) {
-        marginTop += preparedTitle.height;
+        marginTop += preparedTitle.height + preparedTitle.margin;
     }
     return marginTop;
 };

package/dist/cjs/components/ChartInner/utils/normalized-original-data.d.ts

@@ -22,6 +22,7 @@ export declare function getNormalizedXAxis(props: {
     maxPadding?: number;
     plotLines?: import("../../../types").AxisPlotLine[];
     plotBands?: import("../../../types").AxisPlotBand[];
+    plotShapes?: import("../../../types").AxisPlotShape[];
     tickMarks?: import("../../../types").ChartAxisTickMarks;
     visible?: boolean;
     order?: "sortAsc" | "sortDesc" | "reverse";

package/dist/cjs/components/ChartInner/utils/title.d.ts

@@ -1,5 +1,6 @@
 import type { PreparedTitle } from '../../../hooks/types';
 import type { ChartData } from '../../../types';
-export declare const getPreparedTitle: ({ title, }: {
+export declare const getPreparedTitle: ({ title, chartWidth, }: {
     title: ChartData["title"];
-}) => PreparedTitle | undefined;
+    chartWidth: number;
+}) => Promise<PreparedTitle | undefined>;

package/dist/cjs/components/ChartInner/utils/title.js

@@ -1,20 +1,78 @@
 import get from 'lodash/get';
-import { getHorizontalSvgTextHeight } from '../../../core/utils';
+import { getTextSizeFn, getTextWithElipsis, wrapText } from '../../../core/utils';
 const DEFAULT_TITLE_FONT_SIZE = '15px';
-const TITLE_PADDINGS = 8 * 2;
-export const getPreparedTitle = ({ title, }) => {
-    var _a, _b, _c, _d, _e, _f;
+const DEFAULT_TITLE_MARGIN = 10;
+export const getPreparedTitle = async ({ title, chartWidth, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const titleText = get(title, 'text');
     const titleStyle = {
         fontSize: (_b = (_a = title === null || title === void 0 ? void 0 : title.style) === null || _a === void 0 ? void 0 : _a.fontSize) !== null && _b !== void 0 ? _b : DEFAULT_TITLE_FONT_SIZE,
         fontWeight: (_d = (_c = title === null || title === void 0 ? void 0 : title.style) === null || _c === void 0 ? void 0 : _c.fontWeight) !== null && _d !== void 0 ? _d : 'var(--g-text-subheader-font-weight)',
         fontColor: (_f = (_e = title === null || title === void 0 ? void 0 : title.style) === null || _e === void 0 ? void 0 : _e.fontColor) !== null && _f !== void 0 ? _f : 'var(--g-color-text-primary)',
     };
-    const titleHeight = titleText
-        ? getHorizontalSvgTextHeight({ text: titleText, style: titleStyle }) + TITLE_PADDINGS
-        : 0;
-    const preparedTitle = titleText
-        ? { text: titleText, style: titleStyle, height: titleHeight, qa: title === null || title === void 0 ? void 0 : title.qa }
-        : undefined;
-    return preparedTitle;
+    if (!titleText) {
+        return undefined;
+    }
+    const getTitleTextSize = getTextSizeFn({ style: titleStyle });
+    const maxRowCount = (_g = title === null || title === void 0 ? void 0 : title.maxRowCount) !== null && _g !== void 0 ? _g : 1;
+    const contentRows = [];
+    if (maxRowCount > 1) {
+        let titleTextRows = await wrapText({
+            text: titleText,
+            style: titleStyle,
+            width: chartWidth,
+            getTextSize: getTitleTextSize,
+        });
+        titleTextRows = titleTextRows.reduce((acc, row, index) => {
+            if (index < maxRowCount) {
+                acc.push(row);
+            }
+            else {
+                acc[maxRowCount - 1].text += row.text;
+            }
+            return acc;
+        }, []);
+        for (let i = 0; i < titleTextRows.length; i++) {
+            const textRow = titleTextRows[i];
+            let textRowContent = textRow.text.trim();
+            if (i === titleTextRows.length - 1) {
+                textRowContent = await getTextWithElipsis({
+                    text: textRowContent,
+                    maxWidth: chartWidth,
+                    getTextWidth: async (s) => (await getTitleTextSize(s)).width,
+                });
+            }
+            const textRowSize = await getTitleTextSize(textRowContent);
+            contentRows.push({
+                text: textRowContent,
+                x: 0,
+                y: textRow.y + textRowSize.hangingOffset,
+                size: textRowSize,
+            });
+        }
+    }
+    else {
+        const truncatedText = await getTextWithElipsis({
+            text: titleText,
+            maxWidth: chartWidth,
+            getTextWidth: async (s) => (await getTitleTextSize(s)).width,
+        });
+        const textSize = await getTitleTextSize(truncatedText);
+        contentRows.push({
+            text: truncatedText,
+            x: 0,
+            y: textSize.hangingOffset,
+            size: textSize,
+        });
+    }
+    const totalTextHeight = contentRows.reduce((acc, row) => acc + row.size.height, 0);
+    const titleHeight = totalTextHeight;
+    return {
+        text: titleText,
+        style: titleStyle,
+        height: titleHeight,
+        margin: (_h = title === null || title === void 0 ? void 0 : title.margin) !== null && _h !== void 0 ? _h : DEFAULT_TITLE_MARGIN,
+        qa: title === null || title === void 0 ? void 0 : title.qa,
+        contentRows,
+    };
 };

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

@@ -3,7 +3,7 @@ import { scaleLinear } from 'd3-scale';
 import { select } from 'd3-selection';
 import { symbol } from 'd3-shape';
 import { CONTINUOUS_LEGEND_SIZE } from '../../core/constants';
-import { createGradientRect, getContinuesColorFn, getLabelsSize, getSymbol, getUniqId, } from '../../core/utils';
+import { createGradientRect, getContinuesColorFn, getSymbol, getTextSizeFn, getUniqId, } from '../../core/utils';
 import { axisBottom } from '../../core/utils/axis-generators';
 import { formatNumber } from '../../libs';
 import { block } from '../../utils';
@@ -116,15 +116,13 @@ function renderLegendSymbol(args) {
             }
             case 'symbol': {
                 const symbolAreaSize = Math.pow(d.symbol.width, 2);
-                const y = legendLineHeight / 2;
                 const bboxWidth = d.symbol.bboxWidth;
+                const translateX = x + bboxWidth / 2;
+                const translateY = legendLineHeight / 2;
                 element
                     .append('svg:path')
                     .attr('d', () => symbol(scatterSymbol, symbolAreaSize)())
-                    .attr('transform', () => {
-                    const translateX = x + bboxWidth / 2;
-                    return 'translate(' + translateX + ',' + y + ')';
-                })
+                    .attr('transform', 'translate(' + translateX + ',' + translateY + ')')
                     .attr('class', className)
                     .style('fill', color);
                 break;
@@ -234,6 +232,7 @@ export const Legend = (props) => {
                                 legendItem.symbol.bboxWidth +
                                 legendItem.symbol.padding);
                         })
+                            .attr('y', legend.hangingOffset)
                             .attr('height', legend.height)
                             .attr('class', function (d) {
                             const mods = { selected: d.visible, unselected: !d.visible };
@@ -364,10 +363,7 @@ export const Legend = (props) => {
             }
             const legendTitleClassname = b('title');
             if (legend.title.enable) {
-                const { maxWidth: titleWidth } = await getLabelsSize({
-                    labels: [legend.title.text],
-                    style: legend.title.style,
-                });
+                const { width: titleWidth } = await getTextSizeFn({ style: legend.title.style })(legend.title.text);
                 let dx = 0;
                 switch (legend.title.align) {
                     case 'center': {
@@ -390,10 +386,11 @@ export const Legend = (props) => {
                     .attr('class', legendTitleClassname)
                     .append('text')
                     .attr('dx', dx)
+                    .attr('y', legend.title.hangingOffset)
                     .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')
+                    .style('dominant-baseline', 'hanging')
                     .html(legend.title.text);
             }
             else {

package/dist/cjs/components/Legend/styles.css

@@ -19,7 +19,7 @@
 }
 .gcharts-legend__item-text {
   fill: var(--g-color-text-secondary);
-  dominant-baseline: text-before-edge;
+  dominant-baseline: hanging;
 }
 .gcharts-legend__item-text_unselected {
   fill: var(--g-color-text-hint);

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

@@ -1,11 +1,9 @@
 import React from 'react';
 export const Title = (props) => {
-    const { chartWidth, text, height, style, qa } = props;
-    return (React.createElement("text", { dx: chartWidth / 2, dy: height / 2, dominantBaseline: "middle", textAnchor: "middle", style: {
+    const { chartWidth, style, qa, contentRows } = props;
+    return (React.createElement("text", { dominantBaseline: "hanging", textAnchor: "middle", style: {
             fill: style === null || style === void 0 ? void 0 : style.fontColor,
             fontSize: style === null || style === void 0 ? void 0 : style.fontSize,
             fontWeight: style === null || style === void 0 ? void 0 : style.fontWeight,
-            lineHeight: `${height}px`,
-        }, "data-qa": qa },
-        React.createElement("tspan", { dangerouslySetInnerHTML: { __html: text } })));
+        }, "data-qa": qa }, contentRows.map((row, i) => (React.createElement("tspan", { key: i, x: chartWidth / 2, y: row.y, dominantBaseline: "hanging", dangerouslySetInnerHTML: { __html: row.text } })))));
 };

package/dist/cjs/components/Tooltip/ChartTooltipContent.d.ts

@@ -7,8 +7,9 @@ export interface ChartTooltipContentProps {
     rowRenderer?: ChartTooltip['rowRenderer'];
     valueFormat?: ChartTooltip['valueFormat'];
     headerFormat?: ChartTooltip['headerFormat'];
-    hoveredPlotLines?: ChartTooltipRendererArgs['hoveredPlotLines'];
     hoveredPlotBands?: ChartTooltipRendererArgs['hoveredPlotBands'];
+    hoveredPlotLines?: ChartTooltipRendererArgs['hoveredPlotLines'];
+    hoveredPlotShapes?: ChartTooltipRendererArgs['hoveredPlotShapes'];
     totals?: ChartTooltip['totals'];
     xAxis?: ChartXAxis | null;
     yAxis?: ChartYAxis;

package/dist/cjs/components/Tooltip/ChartTooltipContent.js

@@ -2,15 +2,16 @@ import React from 'react';
 import isNil from 'lodash/isNil';
 import { DefaultTooltipContent } from './DefaultTooltipContent';
 export const ChartTooltipContent = React.memo((props) => {
-    const { hovered, hoveredPlotLines, hoveredPlotBands, xAxis, yAxis, renderer, rowRenderer, valueFormat, headerFormat, totals, pinned, qa, } = props;
+    const { hovered, hoveredPlotBands, hoveredPlotLines, hoveredPlotShapes, xAxis, yAxis, renderer, rowRenderer, valueFormat, headerFormat, totals, pinned, qa, } = props;
     if (!hovered) {
         return null;
     }
     const customTooltip = renderer === null || renderer === void 0 ? void 0 : renderer({
         headerFormat,
         hovered,
-        hoveredPlotLines,
         hoveredPlotBands,
+        hoveredPlotLines,
+        hoveredPlotShapes,
         xAxis,
         yAxis,
     });

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

@@ -7,7 +7,7 @@ import './styles.css';
 const b = block('tooltip');
 export const Tooltip = (props) => {
     const { tooltip, xAxis, yAxis, svgContainer, dispatcher, tooltipPinned, onOutsideClick } = props;
-    const { hovered, hoveredPlotLines, hoveredPlotBands, pointerPosition } = useTooltip({
+    const { hovered, hoveredPlotBands, hoveredPlotLines, hoveredPlotShapes, pointerPosition } = useTooltip({
         dispatcher,
         tooltip,
         xAxis,
@@ -28,5 +28,5 @@ export const Tooltip = (props) => {
     }, [left, top]);
     return (hovered === null || hovered === void 0 ? void 0 : hovered.length) ? (React.createElement(Popup, { anchorElement: anchor, className: b({ pinned: tooltipPinned }), disableTransition: true, floatingStyles: tooltipPinned ? undefined : { pointerEvents: 'none' }, offset: { mainAxis: 20 }, onOpenChange: tooltipPinned ? handleOnOpenChange : undefined, open: true, placement: ['right', 'left', 'top', 'bottom'] },
         React.createElement("div", { className: b('popup-content') },
-            React.createElement(ChartTooltipContent, { hovered: hovered, hoveredPlotLines: hoveredPlotLines, hoveredPlotBands: hoveredPlotBands, pinned: tooltipPinned, renderer: tooltip.renderer, rowRenderer: tooltip.rowRenderer, totals: tooltip.totals, valueFormat: tooltip.valueFormat, headerFormat: tooltip.headerFormat, xAxis: xAxis, yAxis: yAxis, qa: tooltip.qa })))) : null;
+            React.createElement(ChartTooltipContent, { hovered: hovered, hoveredPlotBands: hoveredPlotBands, hoveredPlotLines: hoveredPlotLines, hoveredPlotShapes: hoveredPlotShapes, pinned: tooltipPinned, renderer: tooltip.renderer, rowRenderer: tooltip.rowRenderer, totals: tooltip.totals, valueFormat: tooltip.valueFormat, headerFormat: tooltip.headerFormat, xAxis: xAxis, yAxis: yAxis, qa: tooltip.qa })))) : null;
 };

package/dist/cjs/components/utils/axis-title.js

@@ -31,7 +31,7 @@ export async function getMultilineTitleContentRows({ axis, titleMaxWidth, }) {
         titleContent.push({
             text: textRowContent,
             x: 0,
-            y: textRow.y,
+            y: textRow.y + textRowSize.hangingOffset,
             size: textRowSize,
         });
     }

package/dist/cjs/core/axes/types.d.ts

@@ -1,4 +1,4 @@
-import type { AxisCrosshair, AxisPlotBand, BaseTextStyle, ChartAxis, ChartAxisLabels, ChartAxisRangeSlider, ChartAxisTitleAlignment, ChartAxisTitleRotation, ChartAxisType, DeepRequired, MeaningfulAny, PlotLayerPlacement } from '../../types';
+import type { AxisCrosshair, AxisPlotBand, AxisPlotShape, BaseTextStyle, ChartAxis, ChartAxisLabels, ChartAxisRangeSlider, ChartAxisTitleAlignment, ChartAxisTitleRotation, ChartAxisType, DeepRequired, MeaningfulAny, PlotLayerPlacement } from '../../types';
 import type { DashStyle } from '../constants';
 type PreparedAxisLabels = Omit<ChartAxisLabels, 'enabled' | 'padding' | 'style' | 'autoRotation'> & Required<Pick<ChartAxisLabels, 'enabled' | 'padding' | 'margin' | 'rotation' | 'html'>> & {
     style: BaseTextStyle;
@@ -19,19 +19,35 @@ export type PreparedAxisPlotBand = Required<AxisPlotBand> & {
 };
 type PreparedAxisCrosshair = Required<AxisCrosshair>;
 export type PreparedAxisPlotLine = {
-    value: number;
     color: string;
-    width: number;
-    dashStyle: DashStyle;
-    opacity: number;
-    layerPlacement: PlotLayerPlacement;
     custom?: MeaningfulAny;
+    dashStyle: DashStyle;
+    hoverThreshold: number;
     label: {
-        text: string;
-        style: BaseTextStyle;
         padding: number;
         qa?: string;
+        style: BaseTextStyle;
+        text: string;
     };
+    layerPlacement: PlotLayerPlacement;
+    opacity: number;
+    value: number;
+    width: number;
+};
+export type PreparedAxisPlotShape = {
+    custom?: MeaningfulAny;
+    hitbox: {
+        height: number;
+        width: number;
+        x: number;
+        y: number;
+    };
+    layerPlacement: PlotLayerPlacement;
+    opacity: number;
+    renderer: AxisPlotShape['renderer'];
+    value: number | string;
+    x: number;
+    y: number;
 };
 export type PreparedRangeSlider = DeepRequired<Omit<ChartAxisRangeSlider, 'defaultRange'>> & {
     defaultRange?: ChartAxisRangeSlider['defaultRange'];
@@ -40,7 +56,7 @@ export type PreparedAxisTickMarks = {
     enabled: boolean;
     length: number;
 };
-type PreparedBaseAxis = Omit<ChartAxis, 'type' | 'labels' | 'plotLines' | 'plotBands'> & {
+type PreparedBaseAxis = Omit<ChartAxis, 'type' | 'labels' | 'plotLines' | 'plotBands' | 'plotShapes'> & {
     type: ChartAxisType;
     labels: PreparedAxisLabels;
     title: {
@@ -67,6 +83,7 @@ type PreparedBaseAxis = Omit<ChartAxis, 'type' | 'labels' | 'plotLines' | 'plotB
     plotIndex: number;
     plotLines: PreparedAxisPlotLine[];
     plotBands: PreparedAxisPlotBand[];
+    plotShapes: PreparedAxisPlotShape[];
     crosshair: PreparedAxisCrosshair;
 };
 export type PreparedXAxis = PreparedBaseAxis & {