@gravity-ui/charts 1.42.3 → 1.43.0

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, getHorizontalSvgTextHeight, getLabelsSize, getMinSpaceBetween, getTextSizeFn, isAxisRelatedSeries, wrapText, } from '../utils';
-import { DASH_STYLE, DEFAULT_AXIS_LABEL_FONT_SIZE, SERIES_TYPE, axisCrosshairDefaults, axisLabelsDefaults, axisTickMarksDefaults, xAxisTitleDefaults, } from '../constants';
+import { TIME_UNITS, calculateCos, calculateNumericProperty, calculateSin, formatAxisTickLabel, getDefaultDateFormat, getHorizontalHtmlTextHeight, getLabelsSize, getMinSpaceBetween, getTextSizeFn, isAxisRelatedSeries, wrapText, } from '../utils';
+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';
@@ -90,7 +90,7 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, boundsWidth,
     if (isLabelsEnabled) {
         labelsLineHeight = labelsHtml
             ? getHorizontalHtmlTextHeight({ text: 'Tmp', style: labelsStyle })
-            : getHorizontalSvgTextHeight({ text: 'Tmp', style: labelsStyle });
+            : (await getTextSizeFn({ style: labelsStyle })('Tmp')).height;
     }
     const shouldHideGrid = isAxisVisible === false || seriesData.some((s) => s.type === SERIES_TYPE.Heatmap);
     const preparedRangeSlider = getPreparedRangeSlider({ xAxis });
@@ -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, getHorizontalSvgTextHeight, 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) {
@@ -68,7 +68,7 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
         const labelsHtml = get(axisItem, 'labels.html', false);
         const labelsLineHeight = labelsHtml
             ? getHorizontalHtmlTextHeight({ text: 'Tmp', style: labelsStyle })
-            : getHorizontalSvgTextHeight({ text: 'Tmp', style: labelsStyle });
+            : (await getTextSizeFn({ style: labelsStyle })('Tmp')).height;
         const titleText = isAxisVisible ? get(axisItem, 'title.text', '') : '';
         const titleStyle = Object.assign(Object.assign({}, yAxisTitleDefaults.style), get(axisItem, 'title.style'));
         const titleMaxRowsCount = get(axisItem, 'title.maxRowCount', yAxisTitleDefaults.maxRowCount);
@@ -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/layout/split.d.ts

@@ -10,8 +10,8 @@ export declare function getPlotHeight(args: {
     boundsHeight: number;
     gap: number;
 }): number;
-export declare function getSplit(args: UseSplitArgs): {
+export declare function getSplit(args: UseSplitArgs): Promise<{
     plots: PreparedPlot[];
     gap: number;
-};
+}>;
 export {};

package/dist/cjs/core/layout/split.js

@@ -1,9 +1,9 @@
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
-import { calculateNumericProperty, getHorizontalSvgTextHeight } from '../utils';
+import { calculateNumericProperty, getTextSizeFn } from '../utils';
 const DEFAULT_TITLE_FONT_SIZE = '15px';
 const TITLE_TOP_BOTTOM_PADDING = 8;
-function preparePlotTitle(args) {
+async function preparePlotTitle(args) {
     const { title, plotIndex, plotHeight, chartWidth, gap } = args;
     const titleText = (title === null || title === void 0 ? void 0 : title.text) || '';
     const titleStyle = {
@@ -11,7 +11,7 @@ function preparePlotTitle(args) {
         fontWeight: get(title, 'style.fontWeight'),
     };
     const titleHeight = titleText
-        ? getHorizontalSvgTextHeight({ text: titleText, style: titleStyle }) +
+        ? (await getTextSizeFn({ style: titleStyle })(titleText)).height +
             TITLE_TOP_BOTTOM_PADDING * 2
         : 0;
     const top = plotIndex * (plotHeight + gap);
@@ -31,7 +31,7 @@ export function getPlotHeight(args) {
     }
     return boundsHeight;
 }
-export function getSplit(args) {
+export async function getSplit(args) {
     var _a, _b;
     const { split, boundsHeight, chartWidth } = args;
     const splitGap = (_a = calculateNumericProperty({ value: split === null || split === void 0 ? void 0 : split.gap, base: boundsHeight })) !== null && _a !== void 0 ? _a : 0;
@@ -40,22 +40,25 @@ export function getSplit(args) {
     if (isEmpty(plots)) {
         plots.push({});
     }
+    const items = [];
+    for (let index = 0; index < plots.length; index++) {
+        const p = plots[index];
+        const title = await preparePlotTitle({
+            title: p.title,
+            plotIndex: index,
+            gap: splitGap,
+            plotHeight,
+            chartWidth,
+        });
+        const top = index * (plotHeight + splitGap);
+        items.push({
+            top: top + title.height,
+            height: plotHeight - title.height,
+            title,
+        });
+    }
     return {
-        plots: plots.map((p, index) => {
-            const title = preparePlotTitle({
-                title: p.title,
-                plotIndex: index,
-                gap: splitGap,
-                plotHeight,
-                chartWidth,
-            });
-            const top = index * (plotHeight + splitGap);
-            return {
-                top: top + title.height,
-                height: plotHeight - title.height,
-                title,
-            };
-        }),
+        plots: items,
         gap: splitGap,
     };
 }

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/series/prepare-legend.js

@@ -12,23 +12,21 @@ export async function getPreparedLegend(args) {
     const defaultItemStyle = clone(legendDefaults.itemStyle);
     const itemStyle = get(legend, 'itemStyle');
     const computedItemStyle = merge(defaultItemStyle, itemStyle);
-    const { maxHeight: lineHeight, maxWidth: lineWidth } = await getLabelsSize({
-        labels: ['Tmp'],
-        style: computedItemStyle,
-    });
+    const { width: lineWidth, height: lineHeight, hangingOffset: itemHangingOffset, } = await getTextSizeFn({ style: computedItemStyle })('Tmp');
     const legendType = get(legend, 'type', 'discrete');
     const isTitleEnabled = Boolean((_a = legend === null || legend === void 0 ? void 0 : legend.title) === null || _a === void 0 ? void 0 : _a.text);
     const titleMargin = isTitleEnabled ? get(legend, 'title.margin', 4) : 0;
     const titleStyle = Object.assign({ fontSize: '12px', fontWeight: 'bold' }, get(legend, 'title.style'));
     const titleText = isTitleEnabled ? get(legend, 'title.text', '') : '';
-    const titleSize = await getLabelsSize({ labels: [titleText], style: titleStyle });
-    const titleHeight = isTitleEnabled ? titleSize.maxHeight : 0;
+    const titleTextSize = await getTextSizeFn({ style: titleStyle })(titleText);
+    const titleHeight = isTitleEnabled ? titleTextSize.height : 0;
+    const titleHangingOffset = titleTextSize.hangingOffset;
     const tickStyle = {
         fontSize: '12px',
     };
     const ticks = {
         labelsMargin: 4,
-        labelsLineHeight: (await getLabelsSize({ labels: ['Tmp'], style: tickStyle })).maxHeight,
+        labelsLineHeight: (await getTextSizeFn({ style: tickStyle })('Tmp')).height,
         style: tickStyle,
     };
     const colorScale = {
@@ -60,6 +58,7 @@ export async function getPreparedLegend(args) {
         verticalAlign: get(legend, 'verticalAlign', legendDefaults.verticalAlign),
         justifyContent: get(legend, 'justifyContent', legendDefaults.justifyContent),
         enabled,
+        hangingOffset: itemHangingOffset,
         height,
         itemDistance: get(legend, 'itemDistance', legendDefaults.itemDistance),
         itemStyle: computedItemStyle,
@@ -68,6 +67,7 @@ export async function getPreparedLegend(args) {
         type: legendType,
         title: {
             enable: isTitleEnabled,
+            hangingOffset: titleHangingOffset,
             text: titleText,
             margin: titleMargin,
             style: titleStyle,

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

@@ -15,10 +15,12 @@ export type PreparedLegendSymbol = (RectLegendSymbol | PathLegendSymbol | Symbol
     bboxWidth: number;
 };
 export type PreparedLegend = Required<Omit<ChartLegend, 'title' | 'colorScale'>> & {
+    hangingOffset: number;
     height: number;
     lineHeight: number;
     title: {
         enable: boolean;
+        hangingOffset: number;
         text: string;
         margin: number;
         style: BaseTextStyle;

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/axis-generators/bottom.js

@@ -2,7 +2,7 @@ import { path } from 'd3-path';
 import { select } from 'd3-selection';
 import { getAxisItems, getXAxisOffset, getXTickPosition } from '../axis/common';
 import { calculateCos, calculateSin } from '../math';
-import { getLabelsSize, setEllipsisForOverflowText } from '../text';
+import { getTextSizeFn, setEllipsisForOverflowText } from '../text';
 const AXIS_BOTTOM_HTML_LABELS_DATA_ATTR = 'data-axis-bottom-html-labels';
 function addDomain(selection, options) {
     const { size, color } = options;
@@ -32,7 +32,7 @@ function appendSvgLabels(args) {
         return 'middle';
     })
         .style('transform', transform)
-        .style('dominant-baseline', 'text-after-edge');
+        .attr('dominant-baseline', 'hanging');
     const labels = ticksSelection.selectAll('.tick text');
     // FIXME: handle rotated overlapping labels (with a smarter approach)
     if (ticks.rotation) {
@@ -153,10 +153,8 @@ export async function axisBottom(args) {
     const offset = getXAxisOffset();
     const position = getXTickPosition({ scale, offset });
     const values = getAxisItems({ scale, count: ticksCount, maxCount: maxTickCount });
-    const labelHeight = (await getLabelsSize({
-        labels: values.map(labelFormat),
-        style: labelsStyle,
-    })).maxHeight;
+    const getTextSize = getTextSizeFn({ style: labelsStyle });
+    const labelSize = await getTextSize('Tmp');
     return function (selection) {
         var _a, _b, _c;
         selection.selectAll('.tick, .domain').remove();
@@ -165,16 +163,8 @@ export async function axisBottom(args) {
         const x = (rect === null || rect === void 0 ? void 0 : rect.x) || 0;
         const right = x + domain.size;
         const top = -((_c = (_b = tickItems === null || tickItems === void 0 ? void 0 : tickItems[0]) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : 0);
-        const translateY = labelHeight + labelsMargin - top;
-        let transform = `translate(0, ${translateY}px)`;
-        if (rotation) {
-            const labelsOffsetTop = labelHeight * calculateCos(rotation) + labelsMargin - top;
-            let labelsOffsetLeft = calculateSin(rotation) * labelHeight;
-            if (Math.abs(rotation) % 360 === 90) {
-                labelsOffsetLeft += ((rotation > 0 ? -1 : 1) * labelHeight) / 2;
-            }
-            transform = `translate(${-labelsOffsetLeft}px, ${labelsOffsetTop}px) rotate(${rotation}deg)`;
-        }
+        const translateY = labelsMargin - top + labelSize.hangingOffset;
+        const transform = `translate(0, ${translateY}px)`;
         const tickPath = path();
         tickItems === null || tickItems === void 0 ? void 0 : tickItems.forEach(([start, end]) => {
             tickPath.moveTo(0, start);

package/dist/cjs/core/utils/common.d.ts

@@ -16,10 +16,6 @@ export declare const getHorizontalHtmlTextHeight: (args: {
     text: string;
     style?: Partial<BaseTextStyle>;
 }) => number;
-export declare const getHorizontalSvgTextHeight: (args: {
-    text: string;
-    style?: Partial<BaseTextStyle>;
-}) => number;
 export declare const getDataCategoryValue: (args: {
     axisDirection: AxisDirection;
     categories: string[];

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': {
@@ -155,19 +155,6 @@ export const getHorizontalHtmlTextHeight = (args) => {
     container.remove();
     return height;
 };
-export const getHorizontalSvgTextHeight = (args) => {
-    var _a;
-    const { text, style } = args;
-    const container = select(document.body).append('svg');
-    const textSelection = container.append('text').text(text);
-    const fontSize = get(style, 'fontSize', DEFAULT_AXIS_LABEL_FONT_SIZE);
-    if (fontSize) {
-        textSelection.style('font-size', fontSize).style('dominant-baseline', 'text-after-edge');
-    }
-    const height = ((_a = textSelection.node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) || 0;
-    container.remove();
-    return height;
-};
 const extractCategoryValue = (args) => {
     const { axisDirection, categories, data } = args;
     const dataCategory = get(data, axisDirection);

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[];
 };

package/dist/cjs/core/utils/get-hovered-plots.js

@@ -1,5 +1,4 @@
 import { getBandsPosition, isBandScale } from './axis/common';
-const PLOT_LINE_HIT_THRESHOLD_PX = 4;
 function getHoveredAxisPlotBands(args) {
     const { pointerPx, plotBands, scale, axis } = args;
     const axisScale = scale;
@@ -22,16 +21,31 @@ function getHoveredAxisPlotLines(args) {
     }
     for (const line of plotLines) {
         const linePx = Number(scale(line.value));
-        if (Math.abs(pointerPx - linePx) <= PLOT_LINE_HIT_THRESHOLD_PX + line.width / 2) {
+        if (Math.abs(pointerPx - linePx) <= line.hoverThreshold + line.width / 2) {
             result.push(line);
         }
     }
     return result;
 }
+function getHoveredAxisPlotShapes(args) {
+    const { pointerX, pointerY, plotShapes } = args;
+    const result = [];
+    for (const shape of plotShapes) {
+        const left = shape.x + shape.hitbox.x;
+        const top = shape.y + shape.hitbox.y;
+        const inX = pointerX >= left && pointerX <= left + shape.hitbox.width;
+        const inY = pointerY >= top && pointerY <= top + shape.hitbox.height;
+        if (inX && inY) {
+            result.push(shape);
+        }
+    }
+    return result;
+}
 export function getHoveredPlots(args) {
     const { pointerX, pointerY, xAxis, yAxis, xScale, yScale } = args;
-    const plotLines = [];
     const plotBands = [];
+    const plotLines = [];
+    const plotShapes = [];
     if (xAxis && xScale) {
         plotBands.push(...getHoveredAxisPlotBands({
             pointerPx: pointerX,
@@ -44,6 +58,11 @@ export function getHoveredPlots(args) {
             plotLines: xAxis.plotLines,
             scale: xScale,
         }));
+        plotShapes.push(...getHoveredAxisPlotShapes({
+            pointerX,
+            pointerY,
+            plotShapes: xAxis.plotShapes,
+        }));
     }
     for (let i = 0; i < yAxis.length; i++) {
         const yAxisItem = yAxis[i];
@@ -62,6 +81,11 @@ export function getHoveredPlots(args) {
             plotLines: yAxisItem.plotLines,
             scale: yScaleItem,
         }));
+        plotShapes.push(...getHoveredAxisPlotShapes({
+            pointerX,
+            pointerY,
+            plotShapes: yAxisItem.plotShapes,
+        }));
     }
-    return { plotLines, plotBands };
+    return { plotBands, plotLines, plotShapes };
 }

package/dist/cjs/core/utils/labels.d.ts

@@ -11,6 +11,7 @@ export declare function getSvgLabelConstraintedPosition(args: {
     width: number;
     x: number;
     y: number;
+    hangingOffset: number;
 }): {
     x: number;
     y: number;