@gravity-ui/charts 1.45.0 → 1.46.0

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

@@ -256,7 +256,7 @@ export const ChartInner = (props) => {
                 React.createElement("rect", { x: 0, y: 0, width: boundsWidth, height: boundsHeight })),
             React.createElement("clipPath", { id: getClipPathIdByBounds({ clipPathId, bounds: 'horizontal' }) },
                 React.createElement("rect", { x: 0, y: -boundsHeight, width: boundsWidth, height: boundsHeight * 3 }))),
-        preparedTitle && React.createElement(Title, Object.assign({}, preparedTitle)),
+        preparedTitle && React.createElement(Title, Object.assign({}, preparedTitle, { htmlLayout: htmlLayout })),
         React.createElement("g", { transform: `translate(0, ${boundsOffsetTop})` }, preparedSplit === null || preparedSplit === void 0 ? void 0 : preparedSplit.plots.map((plot, index) => {
             return React.createElement(PlotTitle, { key: `plot-${index}`, title: plot.title });
         })),
@@ -285,7 +285,7 @@ export const ChartInner = (props) => {
             // when starting to select an area, the tooltip remains in the position where the selection began
             onPointerMove: throttledHandlePointerMove, onPointerLeave: handlePointerLeave, onTouchStart: throttledHandleTouchMove, onTouchMove: throttledHandleTouchMove, onClick: handleChartClick }, initialized ? chartContent : null),
         React.createElement("div", { className: b('html-layer'), ref: setHtmlLayout, style: {
-                '--g-html-layout-transform': `translate(${boundsOffsetLeft}px, ${boundsOffsetTop}px)`,
+                '--g-html-layout-plot-transform': `translate(${boundsOffsetLeft}px, ${boundsOffsetTop}px)`,
             } }),
         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;

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

@@ -10,6 +10,6 @@
 .gcharts-chart__html-layer {
   display: contents;
 }
-.gcharts-chart__html-layer-item {
-  transform: var(--g-html-layout-transform);
+.gcharts-chart__html-layer-item_plot {
+  transform: var(--g-html-layout-plot-transform);
 }

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

@@ -53,6 +53,7 @@ export function useChartInnerProps(props) {
             const preparedTitle = await getPreparedTitle({
                 title: data.title,
                 chartWidth: width,
+                chartHeight: height,
                 chartMargin: (_a = data.chart) === null || _a === void 0 ? void 0 : _a.margin,
             });
             const preparedChart = getPreparedChart({
@@ -203,7 +204,6 @@ export function useChartInnerProps(props) {
                 getYAxisWidth,
                 legendConfig,
             });
-            //end
             const newStateValue = {
                 allPreparedSeries,
                 boundsHeight,

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

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

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

@@ -1,26 +1,64 @@
-import get from 'lodash/get';
-import { getTextSizeFn, getTextWithElipsis, wrapText } from '../../../core/utils';
+import { calculateNumericProperty, getLabelsSize, getTextSizeFn, getTextWithElipsis, wrapText, } from '../../../core/utils';
 const DEFAULT_TITLE_FONT_SIZE = '15px';
 const DEFAULT_TITLE_MARGIN = 10;
-export const getPreparedTitle = async ({ title, chartWidth, chartMargin, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+const DEFAULT_TITLE_MAX_HEIGHT = '50%';
+export const getPreparedTitle = async ({ title, chartWidth, chartHeight, chartMargin, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    const titleText = title === null || title === void 0 ? void 0 : title.text;
+    if (!titleText) {
+        return undefined;
+    }
     const chartMarginTop = (_a = chartMargin === null || chartMargin === void 0 ? void 0 : chartMargin.top) !== null && _a !== void 0 ? _a : 0;
     const chartMarginLeft = (_b = chartMargin === null || chartMargin === void 0 ? void 0 : chartMargin.left) !== null && _b !== void 0 ? _b : 0;
     const chartMarginRight = (_c = chartMargin === null || chartMargin === void 0 ? void 0 : chartMargin.right) !== null && _c !== void 0 ? _c : 0;
-    const titleText = get(title, 'text');
     const titleStyle = {
         fontSize: (_e = (_d = title === null || title === void 0 ? void 0 : title.style) === null || _d === void 0 ? void 0 : _d.fontSize) !== null && _e !== void 0 ? _e : DEFAULT_TITLE_FONT_SIZE,
         fontWeight: (_g = (_f = title === null || title === void 0 ? void 0 : title.style) === null || _f === void 0 ? void 0 : _f.fontWeight) !== null && _g !== void 0 ? _g : 'var(--g-text-subheader-font-weight)',
         fontColor: (_j = (_h = title === null || title === void 0 ? void 0 : title.style) === null || _h === void 0 ? void 0 : _h.fontColor) !== null && _j !== void 0 ? _j : 'var(--g-color-text-primary)',
     };
-    if (!titleText) {
-        return undefined;
+    const usableWidth = chartWidth - chartMarginLeft - chartMarginRight;
+    const titleMargin = (_k = title === null || title === void 0 ? void 0 : title.margin) !== null && _k !== void 0 ? _k : DEFAULT_TITLE_MARGIN;
+    if (title === null || title === void 0 ? void 0 : title.html) {
+        const titleSize = await getLabelsSize({
+            labels: [titleText],
+            style: Object.assign(Object.assign({}, titleStyle), { maxWidth: `${usableWidth}px` }),
+            html: true,
+        });
+        const resolvedMaxHeight = calculateNumericProperty({
+            value: (_l = title.maxHeight) !== null && _l !== void 0 ? _l : DEFAULT_TITLE_MAX_HEIGHT,
+            base: chartHeight,
+        });
+        const titleHeight = resolvedMaxHeight === undefined
+            ? titleSize.maxHeight
+            : Math.min(titleSize.maxHeight, resolvedMaxHeight);
+        const qa = title === null || title === void 0 ? void 0 : title.qa;
+        const qaAttr = qa ? ` data-qa="${qa}"` : '';
+        const maxHeightStyle = resolvedMaxHeight === undefined ? '' : ` max-height: ${resolvedMaxHeight}px;`;
+        const htmlContent = `<div${qaAttr} style="max-width: ${usableWidth}px; overflow: hidden;${maxHeightStyle}">${titleText}</div>`;
+        const titleWidth = Math.min(titleSize.maxWidth, usableWidth);
+        return {
+            text: titleText,
+            style: titleStyle,
+            height: titleHeight,
+            margin: titleMargin,
+            qa,
+            html: true,
+            htmlElements: [
+                {
+                    x: chartMarginLeft + (usableWidth - titleWidth) / 2,
+                    y: chartMarginTop,
+                    content: htmlContent,
+                    size: { width: titleWidth, height: titleHeight },
+                    style: titleStyle,
+                    scope: 'chart',
+                },
+            ],
+        };
     }
+    const xCenter = chartMarginLeft + usableWidth / 2;
     const getTitleTextSize = getTextSizeFn({ style: titleStyle });
-    const maxRowCount = (_k = title === null || title === void 0 ? void 0 : title.maxRowCount) !== null && _k !== void 0 ? _k : 1;
+    const maxRowCount = (_m = title === null || title === void 0 ? void 0 : title.maxRowCount) !== null && _m !== void 0 ? _m : 1;
     const contentRows = [];
-    const usableWidth = chartWidth - chartMarginLeft - chartMarginRight;
-    const xCenter = chartMarginLeft + usableWidth / 2;
     if (maxRowCount > 1) {
         let titleTextRows = await wrapText({
             text: titleText,
@@ -33,7 +71,7 @@ export const getPreparedTitle = async ({ title, chartWidth, chartMargin, }) => {
                 acc.push(row);
             }
             else {
-                acc[maxRowCount - 1].text += row.text;
+                acc[maxRowCount - 1] = Object.assign(Object.assign({}, acc[maxRowCount - 1]), { text: acc[maxRowCount - 1].text + row.text });
             }
             return acc;
         }, []);
@@ -71,12 +109,11 @@ export const getPreparedTitle = async ({ title, chartWidth, chartMargin, }) => {
         });
     }
     const totalTextHeight = contentRows.reduce((acc, row) => acc + row.size.height, 0);
-    const titleHeight = totalTextHeight;
     return {
         text: titleText,
         style: titleStyle,
-        height: titleHeight,
-        margin: (_l = title === null || title === void 0 ? void 0 : title.margin) !== null && _l !== void 0 ? _l : DEFAULT_TITLE_MARGIN,
+        height: totalTextHeight,
+        margin: titleMargin,
         qa: title === null || title === void 0 ? void 0 : title.qa,
         contentRows,
     };

package/dist/cjs/components/Title/index.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
 import type { PreparedTitle } from '../../hooks';
-type Props = PreparedTitle;
-export declare const Title: (props: Props) => React.JSX.Element;
+type Props = PreparedTitle & {
+    htmlLayout?: HTMLElement | null;
+};
+export declare const Title: (props: Props) => React.JSX.Element | null;
 export {};

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

@@ -1,9 +1,16 @@
 import React from 'react';
+import { HtmlLayer } from '../../hooks/useShapes/HtmlLayer';
 export const Title = (props) => {
-    const { style, qa, contentRows } = props;
+    const { style, qa, contentRows, html, htmlElements, htmlLayout } = props;
+    if (html) {
+        if (!htmlLayout || !htmlElements) {
+            return null;
+        }
+        return React.createElement(HtmlLayer, { htmlLayout: htmlLayout, preparedData: { htmlElements } });
+    }
     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,
-        }, "data-qa": qa }, contentRows.map((row, i) => (React.createElement("tspan", { key: i, x: row.x, y: row.y, dominantBaseline: "hanging", dangerouslySetInnerHTML: { __html: row.text } })))));
+        }, "data-qa": qa }, contentRows === null || contentRows === void 0 ? void 0 : contentRows.map((row, i) => (React.createElement("tspan", { key: i, x: row.x, y: row.y, dominantBaseline: "hanging", dangerouslySetInnerHTML: { __html: row.text } })))));
 };

package/dist/cjs/core/types/chart/title.d.ts

@@ -5,6 +5,7 @@ export interface ChartTitle {
     /**
      * Maximum number of text rows. If the text exceeds this limit, it is truncated with an ellipsis.
      * Default: 1
+     * Not applicable when `html: true` — HTML content manages its own layout.
      */
     maxRowCount?: number;
     /**
@@ -17,4 +18,21 @@ export interface ChartTitle {
      * It is assigned as a data-qa attribute to an element.
      */
     qa?: string;
+    /**
+     * Enables HTML rendering for the chart title.
+     * When true, the title is rendered as an HTML element on top of the SVG
+     * instead of an SVG text node. This allows using arbitrary HTML tags
+     * (e.g. links, styled spans) that cannot be embedded in SVG.
+     * The element will be displayed outside the box of the SVG element.
+     */
+    html?: boolean;
+    /**
+     * Maximum height of the title area. Accepts a pixel value (`number` or `"100px"`)
+     * or a percentage string (`"50%"`) relative to the full chart height.
+     * When the title content exceeds this height, it is clipped.
+     * Only applicable when `html: true`.
+     *
+     * Default: 50%
+     */
+    maxHeight?: string | number;
 }

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

@@ -1,5 +1,6 @@
 import type { TextRowData } from '../components/types';
-import type { ChartBrush, ChartData, ChartMargin, ChartTitle, ChartZoom, DeepRequired } from '../types';
+import type { BaseTextStyle, ChartBrush, ChartData, ChartMargin, ChartTitle, ChartZoom, DeepRequired } from '../types';
+import type { HtmlItem } from '../types/chart-ui';
 export type PreparedZoom = DeepRequired<Omit<ChartZoom, 'enabled' | 'brush'>> & DeepRequired<{
     brush: ChartBrush;
 }>;
@@ -7,10 +8,12 @@ export type PreparedChart = {
     margin: ChartMargin;
     zoom: PreparedZoom | null;
 };
-export type PreparedTitle = Omit<ChartTitle, 'margin'> & {
+export type PreparedTitle = Omit<ChartTitle, 'margin' | 'style'> & {
     height: number;
     margin: number;
-    contentRows: TextRowData[];
+    style: BaseTextStyle;
+    contentRows?: TextRowData[];
+    htmlElements?: HtmlItem[];
 };
 export type PreparedTooltip = ChartData['tooltip'] & {
     enabled: boolean;

package/dist/cjs/hooks/useShapes/HtmlLayer.js

@@ -19,8 +19,9 @@ export const HtmlLayer = (props) => {
         return null;
     }
     return (React.createElement(Portal, { container: htmlLayout }, items.map((item, index) => {
-        var _a, _b, _c;
-        const style = Object.assign(Object.assign({}, item.style), { color: (_b = (_a = item.style) === null || _a === void 0 ? void 0 : _a.color) !== null && _b !== void 0 ? _b : (_c = item.style) === null || _c === void 0 ? void 0 : _c.fontColor, position: 'absolute', left: item.x, top: item.y });
-        return (React.createElement("div", { className: b('html-layer-item'), key: index, dangerouslySetInnerHTML: { __html: item.content }, style: style }));
+        var _a, _b, _c, _d;
+        const scope = (_a = item.scope) !== null && _a !== void 0 ? _a : 'plot';
+        const style = Object.assign(Object.assign({}, item.style), { color: (_c = (_b = item.style) === null || _b === void 0 ? void 0 : _b.color) !== null && _c !== void 0 ? _c : (_d = item.style) === null || _d === void 0 ? void 0 : _d.fontColor, position: 'absolute', left: item.x, top: item.y });
+        return (React.createElement("div", { className: b('html-layer-item', { plot: scope === 'plot' }), key: index, dangerouslySetInnerHTML: { __html: item.content }, style: style }));
     })));
 };

package/dist/cjs/hooks/useShapes/line/index.js

@@ -81,8 +81,8 @@ export const LineSeriesShapes = (args) => {
         function handleShapeHover(data) {
             hoveredDataRef.current = data;
             const selected = (data === null || data === void 0 ? void 0 : data.filter((d) => d.series.type === 'line')) || [];
+            const selectedDataItems = selected.map((d) => d.data);
             const selectedSeriesIds = selected.map((d) => { var _a; return (_a = d.series) === null || _a === void 0 ? void 0 : _a.id; });
-            const closestChunk = selected.find((d) => d.closest);
             lineSelection.datum((d, index, list) => {
                 const elementSelection = select(list[index]);
                 const hovered = Boolean(hoverEnabled && selectedSeriesIds.includes(d.id));
@@ -118,7 +118,7 @@ export const LineSeriesShapes = (args) => {
             });
             markerSelection.datum((d, index, list) => {
                 const elementSelection = select(list[index]);
-                const hovered = Boolean(hoverEnabled && d.point.data === (closestChunk === null || closestChunk === void 0 ? void 0 : closestChunk.data));
+                const hovered = Boolean(hoverEnabled && selectedDataItems.includes(d.point.data));
                 if (d.hovered !== hovered) {
                     d.hovered = hovered;
                     elementSelection.attr('visibility', getMarkerVisibility(d));
@@ -141,7 +141,7 @@ export const LineSeriesShapes = (args) => {
             hoverMarkersSvgElement.selectAll('*').remove();
             if (hoverEnabled && selected.length > 0) {
                 const hoverOnlyMarkers = [];
-                for (const chunk of selected.filter((c) => c.closest)) {
+                for (const chunk of selected) {
                     const seriesData = preparedData.find((pd) => pd.id === chunk.series.id);
                     if (!seriesData) {
                         continue;

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

@@ -24,6 +24,8 @@ export interface HtmlItem {
         height: number;
     };
     style?: BaseTextStyle & React.CSSProperties;
+    /** Coordinate space for positioning: 'plot' uses the plot area origin, 'chart' uses the full chart origin. Defaults to 'plot'. */
+    scope?: 'plot' | 'chart';
 }
 export interface ShapeDataWithLabels {
     svgLabels: LabelData[];

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

@@ -256,7 +256,7 @@ export const ChartInner = (props) => {
                 React.createElement("rect", { x: 0, y: 0, width: boundsWidth, height: boundsHeight })),
             React.createElement("clipPath", { id: getClipPathIdByBounds({ clipPathId, bounds: 'horizontal' }) },
                 React.createElement("rect", { x: 0, y: -boundsHeight, width: boundsWidth, height: boundsHeight * 3 }))),
-        preparedTitle && React.createElement(Title, Object.assign({}, preparedTitle)),
+        preparedTitle && React.createElement(Title, Object.assign({}, preparedTitle, { htmlLayout: htmlLayout })),
         React.createElement("g", { transform: `translate(0, ${boundsOffsetTop})` }, preparedSplit === null || preparedSplit === void 0 ? void 0 : preparedSplit.plots.map((plot, index) => {
             return React.createElement(PlotTitle, { key: `plot-${index}`, title: plot.title });
         })),
@@ -285,7 +285,7 @@ export const ChartInner = (props) => {
             // when starting to select an area, the tooltip remains in the position where the selection began
             onPointerMove: throttledHandlePointerMove, onPointerLeave: handlePointerLeave, onTouchStart: throttledHandleTouchMove, onTouchMove: throttledHandleTouchMove, onClick: handleChartClick }, initialized ? chartContent : null),
         React.createElement("div", { className: b('html-layer'), ref: setHtmlLayout, style: {
-                '--g-html-layout-transform': `translate(${boundsOffsetLeft}px, ${boundsOffsetTop}px)`,
+                '--g-html-layout-plot-transform': `translate(${boundsOffsetLeft}px, ${boundsOffsetTop}px)`,
             } }),
         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;

package/dist/esm/components/ChartInner/styles.css

@@ -10,6 +10,6 @@
 .gcharts-chart__html-layer {
   display: contents;
 }
-.gcharts-chart__html-layer-item {
-  transform: var(--g-html-layout-transform);
+.gcharts-chart__html-layer-item_plot {
+  transform: var(--g-html-layout-plot-transform);
 }

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

@@ -53,6 +53,7 @@ export function useChartInnerProps(props) {
             const preparedTitle = await getPreparedTitle({
                 title: data.title,
                 chartWidth: width,
+                chartHeight: height,
                 chartMargin: (_a = data.chart) === null || _a === void 0 ? void 0 : _a.margin,
             });
             const preparedChart = getPreparedChart({
@@ -203,7 +204,6 @@ export function useChartInnerProps(props) {
                 getYAxisWidth,
                 legendConfig,
             });
-            //end
             const newStateValue = {
                 allPreparedSeries,
                 boundsHeight,

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

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

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

@@ -1,26 +1,64 @@
-import get from 'lodash/get';
-import { getTextSizeFn, getTextWithElipsis, wrapText } from '../../../core/utils';
+import { calculateNumericProperty, getLabelsSize, getTextSizeFn, getTextWithElipsis, wrapText, } from '../../../core/utils';
 const DEFAULT_TITLE_FONT_SIZE = '15px';
 const DEFAULT_TITLE_MARGIN = 10;
-export const getPreparedTitle = async ({ title, chartWidth, chartMargin, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+const DEFAULT_TITLE_MAX_HEIGHT = '50%';
+export const getPreparedTitle = async ({ title, chartWidth, chartHeight, chartMargin, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    const titleText = title === null || title === void 0 ? void 0 : title.text;
+    if (!titleText) {
+        return undefined;
+    }
     const chartMarginTop = (_a = chartMargin === null || chartMargin === void 0 ? void 0 : chartMargin.top) !== null && _a !== void 0 ? _a : 0;
     const chartMarginLeft = (_b = chartMargin === null || chartMargin === void 0 ? void 0 : chartMargin.left) !== null && _b !== void 0 ? _b : 0;
     const chartMarginRight = (_c = chartMargin === null || chartMargin === void 0 ? void 0 : chartMargin.right) !== null && _c !== void 0 ? _c : 0;
-    const titleText = get(title, 'text');
     const titleStyle = {
         fontSize: (_e = (_d = title === null || title === void 0 ? void 0 : title.style) === null || _d === void 0 ? void 0 : _d.fontSize) !== null && _e !== void 0 ? _e : DEFAULT_TITLE_FONT_SIZE,
         fontWeight: (_g = (_f = title === null || title === void 0 ? void 0 : title.style) === null || _f === void 0 ? void 0 : _f.fontWeight) !== null && _g !== void 0 ? _g : 'var(--g-text-subheader-font-weight)',
         fontColor: (_j = (_h = title === null || title === void 0 ? void 0 : title.style) === null || _h === void 0 ? void 0 : _h.fontColor) !== null && _j !== void 0 ? _j : 'var(--g-color-text-primary)',
     };
-    if (!titleText) {
-        return undefined;
+    const usableWidth = chartWidth - chartMarginLeft - chartMarginRight;
+    const titleMargin = (_k = title === null || title === void 0 ? void 0 : title.margin) !== null && _k !== void 0 ? _k : DEFAULT_TITLE_MARGIN;
+    if (title === null || title === void 0 ? void 0 : title.html) {
+        const titleSize = await getLabelsSize({
+            labels: [titleText],
+            style: Object.assign(Object.assign({}, titleStyle), { maxWidth: `${usableWidth}px` }),
+            html: true,
+        });
+        const resolvedMaxHeight = calculateNumericProperty({
+            value: (_l = title.maxHeight) !== null && _l !== void 0 ? _l : DEFAULT_TITLE_MAX_HEIGHT,
+            base: chartHeight,
+        });
+        const titleHeight = resolvedMaxHeight === undefined
+            ? titleSize.maxHeight
+            : Math.min(titleSize.maxHeight, resolvedMaxHeight);
+        const qa = title === null || title === void 0 ? void 0 : title.qa;
+        const qaAttr = qa ? ` data-qa="${qa}"` : '';
+        const maxHeightStyle = resolvedMaxHeight === undefined ? '' : ` max-height: ${resolvedMaxHeight}px;`;
+        const htmlContent = `<div${qaAttr} style="max-width: ${usableWidth}px; overflow: hidden;${maxHeightStyle}">${titleText}</div>`;
+        const titleWidth = Math.min(titleSize.maxWidth, usableWidth);
+        return {
+            text: titleText,
+            style: titleStyle,
+            height: titleHeight,
+            margin: titleMargin,
+            qa,
+            html: true,
+            htmlElements: [
+                {
+                    x: chartMarginLeft + (usableWidth - titleWidth) / 2,
+                    y: chartMarginTop,
+                    content: htmlContent,
+                    size: { width: titleWidth, height: titleHeight },
+                    style: titleStyle,
+                    scope: 'chart',
+                },
+            ],
+        };
     }
+    const xCenter = chartMarginLeft + usableWidth / 2;
     const getTitleTextSize = getTextSizeFn({ style: titleStyle });
-    const maxRowCount = (_k = title === null || title === void 0 ? void 0 : title.maxRowCount) !== null && _k !== void 0 ? _k : 1;
+    const maxRowCount = (_m = title === null || title === void 0 ? void 0 : title.maxRowCount) !== null && _m !== void 0 ? _m : 1;
     const contentRows = [];
-    const usableWidth = chartWidth - chartMarginLeft - chartMarginRight;
-    const xCenter = chartMarginLeft + usableWidth / 2;
     if (maxRowCount > 1) {
         let titleTextRows = await wrapText({
             text: titleText,
@@ -33,7 +71,7 @@ export const getPreparedTitle = async ({ title, chartWidth, chartMargin, }) => {
                 acc.push(row);
             }
             else {
-                acc[maxRowCount - 1].text += row.text;
+                acc[maxRowCount - 1] = Object.assign(Object.assign({}, acc[maxRowCount - 1]), { text: acc[maxRowCount - 1].text + row.text });
             }
             return acc;
         }, []);
@@ -71,12 +109,11 @@ export const getPreparedTitle = async ({ title, chartWidth, chartMargin, }) => {
         });
     }
     const totalTextHeight = contentRows.reduce((acc, row) => acc + row.size.height, 0);
-    const titleHeight = totalTextHeight;
     return {
         text: titleText,
         style: titleStyle,
-        height: titleHeight,
-        margin: (_l = title === null || title === void 0 ? void 0 : title.margin) !== null && _l !== void 0 ? _l : DEFAULT_TITLE_MARGIN,
+        height: totalTextHeight,
+        margin: titleMargin,
         qa: title === null || title === void 0 ? void 0 : title.qa,
         contentRows,
     };

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

@@ -1,5 +1,7 @@
 import React from 'react';
 import type { PreparedTitle } from '../../hooks';
-type Props = PreparedTitle;
-export declare const Title: (props: Props) => React.JSX.Element;
+type Props = PreparedTitle & {
+    htmlLayout?: HTMLElement | null;
+};
+export declare const Title: (props: Props) => React.JSX.Element | null;
 export {};

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

@@ -1,9 +1,16 @@
 import React from 'react';
+import { HtmlLayer } from '../../hooks/useShapes/HtmlLayer';
 export const Title = (props) => {
-    const { style, qa, contentRows } = props;
+    const { style, qa, contentRows, html, htmlElements, htmlLayout } = props;
+    if (html) {
+        if (!htmlLayout || !htmlElements) {
+            return null;
+        }
+        return React.createElement(HtmlLayer, { htmlLayout: htmlLayout, preparedData: { htmlElements } });
+    }
     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,
-        }, "data-qa": qa }, contentRows.map((row, i) => (React.createElement("tspan", { key: i, x: row.x, y: row.y, dominantBaseline: "hanging", dangerouslySetInnerHTML: { __html: row.text } })))));
+        }, "data-qa": qa }, contentRows === null || contentRows === void 0 ? void 0 : contentRows.map((row, i) => (React.createElement("tspan", { key: i, x: row.x, y: row.y, dominantBaseline: "hanging", dangerouslySetInnerHTML: { __html: row.text } })))));
 };

package/dist/esm/core/types/chart/title.d.ts

@@ -5,6 +5,7 @@ export interface ChartTitle {
     /**
      * Maximum number of text rows. If the text exceeds this limit, it is truncated with an ellipsis.
      * Default: 1
+     * Not applicable when `html: true` — HTML content manages its own layout.
      */
     maxRowCount?: number;
     /**
@@ -17,4 +18,21 @@ export interface ChartTitle {
      * It is assigned as a data-qa attribute to an element.
      */
     qa?: string;
+    /**
+     * Enables HTML rendering for the chart title.
+     * When true, the title is rendered as an HTML element on top of the SVG
+     * instead of an SVG text node. This allows using arbitrary HTML tags
+     * (e.g. links, styled spans) that cannot be embedded in SVG.
+     * The element will be displayed outside the box of the SVG element.
+     */
+    html?: boolean;
+    /**
+     * Maximum height of the title area. Accepts a pixel value (`number` or `"100px"`)
+     * or a percentage string (`"50%"`) relative to the full chart height.
+     * When the title content exceeds this height, it is clipped.
+     * Only applicable when `html: true`.
+     *
+     * Default: 50%
+     */
+    maxHeight?: string | number;
 }

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

@@ -1,5 +1,6 @@
 import type { TextRowData } from '../components/types';
-import type { ChartBrush, ChartData, ChartMargin, ChartTitle, ChartZoom, DeepRequired } from '../types';
+import type { BaseTextStyle, ChartBrush, ChartData, ChartMargin, ChartTitle, ChartZoom, DeepRequired } from '../types';
+import type { HtmlItem } from '../types/chart-ui';
 export type PreparedZoom = DeepRequired<Omit<ChartZoom, 'enabled' | 'brush'>> & DeepRequired<{
     brush: ChartBrush;
 }>;
@@ -7,10 +8,12 @@ export type PreparedChart = {
     margin: ChartMargin;
     zoom: PreparedZoom | null;
 };
-export type PreparedTitle = Omit<ChartTitle, 'margin'> & {
+export type PreparedTitle = Omit<ChartTitle, 'margin' | 'style'> & {
     height: number;
     margin: number;
-    contentRows: TextRowData[];
+    style: BaseTextStyle;
+    contentRows?: TextRowData[];
+    htmlElements?: HtmlItem[];
 };
 export type PreparedTooltip = ChartData['tooltip'] & {
     enabled: boolean;

package/dist/esm/hooks/useShapes/HtmlLayer.js

@@ -19,8 +19,9 @@ export const HtmlLayer = (props) => {
         return null;
     }
     return (React.createElement(Portal, { container: htmlLayout }, items.map((item, index) => {
-        var _a, _b, _c;
-        const style = Object.assign(Object.assign({}, item.style), { color: (_b = (_a = item.style) === null || _a === void 0 ? void 0 : _a.color) !== null && _b !== void 0 ? _b : (_c = item.style) === null || _c === void 0 ? void 0 : _c.fontColor, position: 'absolute', left: item.x, top: item.y });
-        return (React.createElement("div", { className: b('html-layer-item'), key: index, dangerouslySetInnerHTML: { __html: item.content }, style: style }));
+        var _a, _b, _c, _d;
+        const scope = (_a = item.scope) !== null && _a !== void 0 ? _a : 'plot';
+        const style = Object.assign(Object.assign({}, item.style), { color: (_c = (_b = item.style) === null || _b === void 0 ? void 0 : _b.color) !== null && _c !== void 0 ? _c : (_d = item.style) === null || _d === void 0 ? void 0 : _d.fontColor, position: 'absolute', left: item.x, top: item.y });
+        return (React.createElement("div", { className: b('html-layer-item', { plot: scope === 'plot' }), key: index, dangerouslySetInnerHTML: { __html: item.content }, style: style }));
     })));
 };

package/dist/esm/hooks/useShapes/line/index.js

@@ -81,8 +81,8 @@ export const LineSeriesShapes = (args) => {
         function handleShapeHover(data) {
             hoveredDataRef.current = data;
             const selected = (data === null || data === void 0 ? void 0 : data.filter((d) => d.series.type === 'line')) || [];
+            const selectedDataItems = selected.map((d) => d.data);
             const selectedSeriesIds = selected.map((d) => { var _a; return (_a = d.series) === null || _a === void 0 ? void 0 : _a.id; });
-            const closestChunk = selected.find((d) => d.closest);
             lineSelection.datum((d, index, list) => {
                 const elementSelection = select(list[index]);
                 const hovered = Boolean(hoverEnabled && selectedSeriesIds.includes(d.id));
@@ -118,7 +118,7 @@ export const LineSeriesShapes = (args) => {
             });
             markerSelection.datum((d, index, list) => {
                 const elementSelection = select(list[index]);
-                const hovered = Boolean(hoverEnabled && d.point.data === (closestChunk === null || closestChunk === void 0 ? void 0 : closestChunk.data));
+                const hovered = Boolean(hoverEnabled && selectedDataItems.includes(d.point.data));
                 if (d.hovered !== hovered) {
                     d.hovered = hovered;
                     elementSelection.attr('visibility', getMarkerVisibility(d));
@@ -141,7 +141,7 @@ export const LineSeriesShapes = (args) => {
             hoverMarkersSvgElement.selectAll('*').remove();
             if (hoverEnabled && selected.length > 0) {
                 const hoverOnlyMarkers = [];
-                for (const chunk of selected.filter((c) => c.closest)) {
+                for (const chunk of selected) {
                     const seriesData = preparedData.find((pd) => pd.id === chunk.series.id);
                     if (!seriesData) {
                         continue;

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

@@ -24,6 +24,8 @@ export interface HtmlItem {
         height: number;
     };
     style?: BaseTextStyle & React.CSSProperties;
+    /** Coordinate space for positioning: 'plot' uses the plot area origin, 'chart' uses the full chart origin. Defaults to 'plot'. */
+    scope?: 'plot' | 'chart';
 }
 export interface ShapeDataWithLabels {
     svgLabels: LabelData[];

package/package.json

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