@gravity-ui/charts 1.42.4 → 1.43.1

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

@@ -1,20 +1,83 @@
 import get from 'lodash/get';
-import { getTextSizeFn } from '../../../core/utils';
+import { getTextSizeFn, getTextWithElipsis, wrapText } from '../../../core/utils';
 const DEFAULT_TITLE_FONT_SIZE = '15px';
-const TITLE_PADDINGS = 8 * 2;
-export const getPreparedTitle = async ({ title, }) => {
-    var _a, _b, _c, _d, _e, _f;
+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 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: (_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)',
+        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 getTitleTextSize = getTextSizeFn({ style: titleStyle });
+    const maxRowCount = (_k = title === null || title === void 0 ? void 0 : title.maxRowCount) !== null && _k !== void 0 ? _k : 1;
+    const contentRows = [];
+    const usableWidth = chartWidth - chartMarginLeft - chartMarginRight;
+    const xCenter = chartMarginLeft + usableWidth / 2;
+    if (maxRowCount > 1) {
+        let titleTextRows = await wrapText({
+            text: titleText,
+            style: titleStyle,
+            width: usableWidth,
+            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: usableWidth,
+                    getTextWidth: async (s) => (await getTitleTextSize(s)).width,
+                });
+            }
+            const textRowSize = await getTitleTextSize(textRowContent);
+            contentRows.push({
+                text: textRowContent,
+                x: xCenter,
+                y: textRow.y + textRowSize.hangingOffset + chartMarginTop,
+                size: textRowSize,
+            });
+        }
+    }
+    else {
+        const truncatedText = await getTextWithElipsis({
+            text: titleText,
+            maxWidth: usableWidth,
+            getTextWidth: async (s) => (await getTitleTextSize(s)).width,
+        });
+        const textSize = await getTitleTextSize(truncatedText);
+        contentRows.push({
+            text: truncatedText,
+            x: xCenter,
+            y: textSize.hangingOffset + chartMarginTop,
+            size: textSize,
+        });
+    }
+    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,
+        qa: title === null || title === void 0 ? void 0 : title.qa,
+        contentRows,
     };
-    const titleHeight = titleText
-        ? (await getTextSizeFn({ style: titleStyle })(titleText)).height + 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;
 };

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

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

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 { 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: row.x, 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/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 & {

package/dist/cjs/core/axes/x-axis.js

@@ -1,6 +1,6 @@
 import get from 'lodash/get';
 import { TIME_UNITS, calculateCos, calculateNumericProperty, calculateSin, formatAxisTickLabel, getDefaultDateFormat, getHorizontalHtmlTextHeight, getLabelsSize, getMinSpaceBetween, getTextSizeFn, isAxisRelatedSeries, wrapText, } from '../utils';
-import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, SERIES_TYPE, axisCrosshairDefaults, axisLabelsDefaults, axisTickMarksDefaults, xAxisTitleDefaults, } from '../constants';
+import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, PLOT_LINE_HOVER_THRESHOLD, SERIES_TYPE, axisCrosshairDefaults, axisLabelsDefaults, axisTickMarksDefaults, xAxisTitleDefaults, } from '../constants';
 import { createXScale } from '../scales/x-scale';
 import { getXAxisTickValues } from '../utils/axis/x-axis';
 import { getPreparedRangeSlider } from './range-slider';
@@ -155,6 +155,7 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, boundsWidth,
             color: get(d, 'color', 'var(--g-color-base-brand)'),
             width: get(d, 'width', 1),
             dashStyle: get(d, 'dashStyle', DASH_STYLE.Solid),
+            hoverThreshold: get(d, 'hoverThreshold', PLOT_LINE_HOVER_THRESHOLD),
             opacity: get(d, 'opacity', 1),
             layerPlacement: get(d, 'layerPlacement', 'before'),
             custom: d.custom,
@@ -169,6 +170,18 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, boundsWidth,
             custom: d.custom,
             label: prepareAxisPlotLabel(d),
         })),
+        // x, y and hitbox are populated later in prepare-axis-data
+        // after pixel coordinates and element dimensions are computed
+        plotShapes: get(xAxis, 'plotShapes', []).map((d) => ({
+            custom: d.custom,
+            hitbox: { x: 0, y: 0, width: 0, height: 0 },
+            layerPlacement: get(d, 'layerPlacement', 'before'),
+            opacity: get(d, 'opacity', 1),
+            renderer: d.renderer,
+            value: d.value,
+            x: 0,
+            y: 0,
+        })),
         crosshair: {
             enabled: get(xAxis, 'crosshair.enabled', axisCrosshairDefaults.enabled),
             color: get(xAxis, 'crosshair.color', axisCrosshairDefaults.color),

package/dist/cjs/core/axes/y-axis.js

@@ -1,7 +1,7 @@
 import get from 'lodash/get';
-import { calculateNumericProperty, formatAxisTickLabel, getDefaultDateFormat, getDefaultMinYAxisValue, getHorizontalHtmlTextHeight, getLabelsSize, getMinSpaceBetween, getTextSizeFn, isAxisRelatedSeries, shouldSyncAxisWithPrimary, wrapText, } from '../utils';
+import { calculateNumericProperty, formatAxisTickLabel, getDefaultDateFormat, getHorizontalHtmlTextHeight, getLabelsSize, getMinSpaceBetween, getTextSizeFn, isAxisRelatedSeries, shouldSyncAxisWithPrimary, wrapText, } from '../utils';
 import { getTickValues } from '../../components/AxisY/utils';
-import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_TYPE, SERIES_TYPE, axisCrosshairDefaults, axisLabelsDefaults, axisTickMarksDefaults, yAxisTitleDefaults, } from '../constants';
+import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, DEFAULT_AXIS_TYPE, PLOT_LINE_HOVER_THRESHOLD, SERIES_TYPE, axisCrosshairDefaults, axisLabelsDefaults, axisTickMarksDefaults, yAxisTitleDefaults, } from '../constants';
 import { createYScale } from '../scales/y-scale';
 import { prepareAxisPlotLabel } from './utils';
 export const getYAxisLabelMaxWidth = async (args) => {
@@ -50,7 +50,7 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
         return Promise.resolve([]);
     }
     return Promise.all(axisItems.map(async (axisItem, axisIndex) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
         const plotIndex = get(axisItem, 'plotIndex', 0);
         const firstPlotAxis = !axisByPlot[plotIndex];
         if (firstPlotAxis) {
@@ -142,7 +142,7 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
                 maxWidth: titleMaxWidth !== null && titleMaxWidth !== void 0 ? titleMaxWidth : Infinity,
                 rotation: titleRotation,
             },
-            min: (_o = get(axisItem, 'min')) !== null && _o !== void 0 ? _o : getDefaultMinYAxisValue(axisSeriesData),
+            min: get(axisItem, 'min'),
             max: get(axisItem, 'max'),
             startOnTick: get(axisItem, 'startOnTick'),
             endOnTick: get(axisItem, 'endOnTick'),
@@ -151,12 +151,12 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
                 enabled: gridEnabled,
             },
             ticks: {
-                pixelInterval: ((_p = axisItem.ticks) === null || _p === void 0 ? void 0 : _p.interval)
+                pixelInterval: ((_o = axisItem.ticks) === null || _o === void 0 ? void 0 : _o.interval)
                     ? calculateNumericProperty({
                         base: height,
-                        value: (_q = axisItem.ticks) === null || _q === void 0 ? void 0 : _q.interval,
+                        value: (_p = axisItem.ticks) === null || _p === void 0 ? void 0 : _p.interval,
                     })
-                    : (_r = axisItem.ticks) === null || _r === void 0 ? void 0 : _r.pixelInterval,
+                    : (_q = axisItem.ticks) === null || _q === void 0 ? void 0 : _q.pixelInterval,
             },
             tickMarks: {
                 enabled: isAxisVisible &&
@@ -170,6 +170,7 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
                 color: get(d, 'color', 'var(--g-color-base-brand)'),
                 width: get(d, 'width', 1),
                 dashStyle: get(d, 'dashStyle', DASH_STYLE.Solid),
+                hoverThreshold: get(d, 'hoverThreshold', PLOT_LINE_HOVER_THRESHOLD),
                 opacity: get(d, 'opacity', 1),
                 layerPlacement: get(d, 'layerPlacement', 'before'),
                 custom: d.custom,
@@ -184,6 +185,18 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
                 custom: d.custom,
                 label: prepareAxisPlotLabel(d),
             })),
+            // x, y and hitbox are populated later in prepare-axis-data
+            // after pixel coordinates and element dimensions are computed
+            plotShapes: get(axisItem, 'plotShapes', []).map((d) => ({
+                custom: d.custom,
+                hitbox: { x: 0, y: 0, width: 0, height: 0 },
+                layerPlacement: get(d, 'layerPlacement', 'before'),
+                opacity: get(d, 'opacity', 1),
+                renderer: d.renderer,
+                value: d.value,
+                x: 0,
+                y: 0,
+            })),
             crosshair: {
                 enabled: get(axisItem, 'crosshair.enabled', axisCrosshairDefaults.enabled),
                 color: get(axisItem, 'crosshair.color', axisCrosshairDefaults.color),

package/dist/cjs/core/constants/defaults/axis.d.ts

@@ -17,4 +17,5 @@ export declare const axisTickMarksDefaults: {
     length: number;
 };
 export declare const DEFAULT_AXIS_TYPE: ChartAxisType;
+export declare const PLOT_LINE_HOVER_THRESHOLD = 4;
 export {};

package/dist/cjs/core/constants/defaults/axis.js

@@ -30,3 +30,4 @@ export const axisTickMarksDefaults = {
     length: 6,
 };
 export const DEFAULT_AXIS_TYPE = 'linear';
+export const PLOT_LINE_HOVER_THRESHOLD = 4;

package/dist/cjs/core/constants/index.d.ts

@@ -4,7 +4,6 @@ export * from './datetime';
 export * from './defaults';
 export * from './layout-algorithms';
 export * from './line-styles';
-export * from './misc';
 export * from './palette';
 export * from './symbol-types';
 export * from './tooltip';

package/dist/cjs/core/constants/index.js

@@ -4,7 +4,6 @@ export * from './datetime';
 export * from './defaults';
 export * from './layout-algorithms';
 export * from './line-styles';
-export * from './misc';
 export * from './palette';
 export * from './symbol-types';
 export * from './tooltip';

package/dist/cjs/core/scales/y-scale.js

@@ -1,7 +1,7 @@
 import { extent, tickStep, ticks } from 'd3-array';
 import { scaleBand, scaleLinear, scaleLog, scaleUtc } from 'd3-scale';
 import get from 'lodash/get';
-import { CHART_SERIES_WITH_VOLUME_ON_Y_AXIS, getDomainDataYBySeries, shouldSyncAxisWithPrimary, } from '../utils';
+import { CHART_SERIES_WITH_VOLUME_ON_Y_AXIS, getDefaultMinYAxisValue, getDomainDataYBySeries, shouldSyncAxisWithPrimary, } from '../utils';
 import { getTickValues } from '../../components/AxisY/utils';
 import { getBandSize } from '../../hooks/utils/get-band-size';
 import { SERIES_TYPE } from '../constants';
@@ -83,14 +83,21 @@ function getDomainMinAlignedToStartTick(args) {
     const isStartOnTick = tickValues[0].y === range[0];
     let dNewMin = dMin;
     if (!isStartOnTick) {
-        let step;
-        if (typeof ((_a = tickValues[0]) === null || _a === void 0 ? void 0 : _a.value) === 'number' && typeof ((_b = tickValues[1]) === null || _b === void 0 ? void 0 : _b.value) === 'number') {
-            step = tickValues[1].value - tickValues[0].value;
+        if (axis.type === 'logarithmic') {
+            const [nicedMin, _nicedMax] = scale.copy().nice().domain();
+            dNewMin = nicedMin;
         }
         else {
-            step = tickStep(dMin, dMax, 1);
+            let step;
+            if (typeof ((_a = tickValues[0]) === null || _a === void 0 ? void 0 : _a.value) === 'number' &&
+                typeof ((_b = tickValues[1]) === null || _b === void 0 ? void 0 : _b.value) === 'number') {
+                step = tickValues[1].value - tickValues[0].value;
+            }
+            else {
+                step = tickStep(dMin, dMax, 1);
+            }
+            dNewMin = tickValues[0].value - step;
         }
-        dNewMin = tickValues[0].value - step;
     }
     return dNewMin;
 }
@@ -104,17 +111,24 @@ function getDomainMaxAlignedToEndTick(args) {
         labelLineHeight: axis.labels.lineHeight,
         series,
     });
-    const isEndOnTick = tickValues[tickValues.length - 1].y === range[1];
     let dNewMax = dMax;
+    const isEndOnTick = tickValues[tickValues.length - 1].y === range[1];
     if (!isEndOnTick) {
-        let step;
-        if (typeof ((_a = tickValues[0]) === null || _a === void 0 ? void 0 : _a.value) === 'number' && typeof ((_b = tickValues[1]) === null || _b === void 0 ? void 0 : _b.value) === 'number') {
-            step = tickValues[1].value - tickValues[0].value;
+        if (axis.type === 'logarithmic') {
+            const [_nicedMin, nicedMax] = scale.copy().nice().domain();
+            dNewMax = nicedMax;
         }
         else {
-            step = tickStep(dMin, dMax, 1);
+            let step;
+            if (typeof ((_a = tickValues[0]) === null || _a === void 0 ? void 0 : _a.value) === 'number' &&
+                typeof ((_b = tickValues[1]) === null || _b === void 0 ? void 0 : _b.value) === 'number') {
+                step = tickValues[1].value - tickValues[0].value;
+            }
+            else {
+                step = tickStep(dMin, dMax, 1);
+            }
+            dNewMax = tickValues[tickValues.length - 1].value + step;
         }
-        dNewMax = tickValues[tickValues.length - 1].value + step;
     }
     return dNewMax;
 }
@@ -141,7 +155,17 @@ export function createYScale(args) {
             }
             if (hasNumberAndNullValues) {
                 const [yMinDomain, yMaxDomain] = extent(domain);
-                const yMin = typeof yMinPropsOrState === 'number' ? yMinPropsOrState : yMinDomain;
+                let yMin;
+                if (typeof yMinPropsOrState === 'number') {
+                    yMin = yMinPropsOrState;
+                }
+                else if (axis.type === 'logarithmic') {
+                    yMin = yMinDomain;
+                }
+                else {
+                    const yMinDefault = getDefaultMinYAxisValue(series);
+                    yMin = typeof yMinDefault === 'number' ? yMinDefault : yMinDomain;
+                }
                 let yMax;
                 if (typeof yMaxPropsOrState === 'number') {
                     yMax = yMaxPropsOrState;

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

@@ -187,6 +187,8 @@ export interface ChartAxis {
     plotLines?: AxisPlotLine[];
     /** An array of colored bands stretching across the plot area marking an interval on the axis. */
     plotBands?: AxisPlotBand[];
+    /** An array of custom SVG elements placed at specific axis values. */
+    plotShapes?: AxisPlotShape[];
     /**
      * Small perpendicular marks on the axis line at each tick position.
      *
@@ -275,6 +277,46 @@ export interface AxisPlotLine extends AxisPlot {
     width?: number;
     /** Option for line stroke style. */
     dashStyle?: DashStyle;
+    /**
+     * Extra pixels added to each side of the line for hover detection.
+     * The total hoverable area equals `line.width + hoverThreshold * 2`.
+     * @default 4
+     */
+    hoverThreshold?: number;
+}
+export interface AxisPlotShape extends AxisPlot {
+    /**
+     * The position of the shape in axis units.
+     *
+     * Can be a number or a string (e.g., a category).
+     * When representing a date, the value **must be a timestamp** (number of milliseconds since Unix epoch).
+     */
+    value: number | string;
+    /**
+     * Custom SVG content renderer.
+     *
+     * Called with the pixel coordinates of the shape and the plot area dimensions.
+     * Must return a string of valid SVG markup that will be inserted inside a `<g>` container
+     * positioned at the shape's axis value.
+     *
+     * @example
+     * ```
+     * renderer: ({plotHeight}) =>
+     *   `<circle cx="0" cy="${plotHeight}" r="4" fill="red"/>
+     *    <line x1="0" y1="0" x2="0" y2="${plotHeight}" stroke="red" stroke-width="1"/>
+     *    <text x="4" y="12" font-size="11" fill="currentColor">Label</text>`
+     * ```
+     */
+    renderer: (args: {
+        /** Pixel X coordinate in the plot area coordinate system */
+        x: number;
+        /** Pixel Y coordinate in the plot area coordinate system */
+        y: number;
+        /** Width of the plot area in pixels */
+        plotWidth: number;
+        /** Height of the plot area in pixels */
+        plotHeight: number;
+    }) => string;
 }
 export interface AxisPlotBand extends AxisPlot {
     /**
@@ -296,7 +338,7 @@ export interface AxisPlotBand extends AxisPlot {
      */
     to: number | string | null;
 }
-export interface AxisCrosshair extends Omit<AxisPlotLine, 'value' | 'label' | 'custom'> {
+export interface AxisCrosshair extends Pick<AxisPlotLine, 'color' | 'dashStyle' | 'opacity' | 'layerPlacement' | 'width'> {
     /**
      * Whether the crosshair should snap to the point or follow the pointer independent of points.
      * @default true

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

@@ -2,6 +2,16 @@ import type { BaseTextStyle } from './base';
 export interface ChartTitle {
     text: string;
     style?: Partial<BaseTextStyle>;
+    /**
+     * Maximum number of text rows. If the text exceeds this limit, it is truncated with an ellipsis.
+     * Default: 1
+     */
+    maxRowCount?: number;
+    /**
+     * Space between the title and the chart area (in pixels).
+     * Default: 10
+     */
+    margin?: number;
     /**
      * Can be used for the UI automated test.
      * It is assigned as a data-qa attribute to an element.

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

@@ -2,7 +2,7 @@ import type { TOOLTIP_TOTALS_BUILT_IN_AGGREGATION } from '../../constants';
 import type { DateTimeLabelFormats } from '../../utils/time';
 import type { MeaningfulAny } from '../misc';
 import type { AreaSeries, AreaSeriesData } from './area';
-import type { AxisPlotBand, AxisPlotLine, ChartXAxis, ChartYAxis } from './axis';
+import type { AxisPlotBand, AxisPlotLine, AxisPlotShape, ChartXAxis, ChartYAxis } from './axis';
 import type { BarXSeries, BarXSeriesData } from './bar-x';
 import type { BarYSeries, BarYSeriesData } from './bar-y';
 import type { CustomFormat, ValueFormat } from './base';
@@ -96,6 +96,8 @@ export interface ChartTooltipRendererArgs<T = MeaningfulAny> {
     hoveredPlotLines?: AxisPlotLine[];
     /** Plot bands that contain the current pointer position. */
     hoveredPlotBands?: AxisPlotBand[];
+    /** Plot shapes that contain the current pointer position. */
+    hoveredPlotShapes?: AxisPlotShape[];
     xAxis?: ChartXAxis | null;
     yAxis?: ChartYAxis;
     /** Formatting settings for tooltip header row (includes computed default). */

package/dist/cjs/core/utils/common.js

@@ -88,7 +88,7 @@ export const getDomainDataYBySeries = (series) => {
         switch (type) {
             case 'area':
             case 'bar-x': {
-                acc.push(0, ...getDomainDataForStackedSeries(seriesList));
+                acc.push(...getDomainDataForStackedSeries(seriesList));
                 break;
             }
             case 'waterfall': {

package/dist/cjs/core/utils/get-hovered-plots.d.ts

@@ -1,4 +1,4 @@
-import type { AxisPlotBand, AxisPlotLine } from '../../types';
+import type { AxisPlotBand, AxisPlotLine, AxisPlotShape } from '../../types';
 import type { PreparedXAxis, PreparedYAxis } from '../axes/types';
 import type { ChartScale } from '../scales/types';
 export declare function getHoveredPlots(args: {
@@ -9,6 +9,7 @@ export declare function getHoveredPlots(args: {
     xScale?: ChartScale;
     yScale?: (ChartScale | undefined)[];
 }): {
-    plotLines: AxisPlotLine[];
     plotBands: AxisPlotBand[];
+    plotLines: AxisPlotLine[];
+    plotShapes: AxisPlotShape[];
 };