@gravity-ui/charts 1.42.3 → 1.43.0

package/dist/esm/hooks/useShapes/bar-x/prepare-data.js

@@ -1,4 +1,4 @@
-import { ascending, descending, max, reverse, sort } from 'd3-array';
+import { ascending, descending, max, min, reverse, sort } from 'd3-array';
 import get from 'lodash/get';
 import { getDataCategoryValue, getLabelsSize } from '../../../core/utils';
 import { getFormattedValue } from '../../../core/utils/format';
@@ -35,7 +35,7 @@ async function getLabelData(d, xMax) {
     };
 }
 export const prepareBarXData = async (args) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     const { series, seriesOptions, xAxis, xScale, yAxis, yScale, boundsHeight: plotHeight, split, isRangeSlider, } = args;
     const stackGap = seriesOptions['bar-x'].stackGap;
     const categories = (_a = xAxis === null || xAxis === void 0 ? void 0 : xAxis.categories) !== null && _a !== void 0 ? _a : [];
@@ -145,7 +145,15 @@ export const prepareBarXData = async (args) => {
                     const x = xCenter - currentGroupWidth / 2 + (rectWidth + rectGap) * groupItemIndex;
                     const yDataValue = ((_d = yValue.data.y) !== null && _d !== void 0 ? _d : 0);
                     const y = seriesYScale(yDataValue);
-                    const base = seriesYScale(0);
+                    let base = 0;
+                    if (seriesYAxis.type === 'logarithmic') {
+                        const domainData = seriesYScale.domain();
+                        const yMinValue = (_e = min(domainData)) !== null && _e !== void 0 ? _e : 0;
+                        base = seriesYScale(yMinValue);
+                    }
+                    else {
+                        base = seriesYScale(0);
+                    }
                     const isLastStackItem = yValueIndex === sortedData.length - 1;
                     const height = Math.abs(base - y);
                     let shapeHeight = height - (stackItems.length ? stackGap : 0);
@@ -198,7 +206,7 @@ export const prepareBarXData = async (args) => {
             barData.x >= xMax ||
             barData.y + barData.height <= 0 ||
             barData.y >= plotHeight;
-        const isZeroValue = ((_e = barData.data.y) !== null && _e !== void 0 ? _e : 0) === 0;
+        const isZeroValue = ((_f = barData.data.y) !== null && _f !== void 0 ? _f : 0) === 0;
         if (barData.series.dataLabels.enabled &&
             !isRangeSlider &&
             (!isBarOutsideBounds || isZeroValue)) {

package/dist/esm/hooks/useShapes/bar-y/prepare-data.js

@@ -171,7 +171,7 @@ export async function prepareBarYData(args) {
                     map.set(dataLabels.style, getTextSizeFn({ style: dataLabels.style }));
                 }
                 const getTextSize = map.get(dataLabels.style);
-                const { width, height } = await getTextSize(content);
+                const { width, height, hangingOffset } = await getTextSize(content);
                 const x = dataLabels.inside
                     ? prepared.x + prepared.width / 2 - width / 2
                     : prepared.x + prepared.width + dataLabels.padding;
@@ -181,7 +181,8 @@ export async function prepareBarYData(args) {
                     height,
                     width,
                     x,
-                    y: y + height / 2,
+                    y,
+                    hangingOffset,
                 });
                 labels.push({
                     size: { width, height },

package/dist/esm/hooks/useShapes/funnel/prepare-data.js

@@ -62,7 +62,10 @@ export async function prepareFunnelData(args) {
             }
             svgLabels.push({
                 x,
-                y: getSegmentY(index) + itemHeight / 2 - labelSize.height / 2,
+                y: getSegmentY(index) +
+                    itemHeight / 2 -
+                    labelSize.height / 2 +
+                    labelSize.hangingOffset,
                 text: labelContent,
                 style: s.dataLabels.style,
                 size: labelSize,

package/dist/esm/hooks/useShapes/heatmap/prepare-data.js

@@ -82,7 +82,7 @@ export async function prepareHeatmapData({ series, xAxis, xScale, yAxis, yScale,
                     if (text) {
                         svgDataLabels.push({
                             x: item.x + item.width / 2 - size.width / 2,
-                            y: item.y + item.height / 2 - size.height / 2,
+                            y: item.y + item.height / 2 - size.height / 2 + size.hangingOffset,
                             text,
                             style: series.dataLabels.style,
                         });

package/dist/esm/hooks/useShapes/line/prepare-data.js

@@ -68,7 +68,10 @@ export const prepareLineData = async (args) => {
                         const text = getFormattedValue(Object.assign({ value: labelValue }, s.dataLabels));
                         const labelSize = await getTextSize(text);
                         const style = s.dataLabels.style;
-                        const y = Math.max(yAxisTop, point.y - s.dataLabels.padding - labelSize.height);
+                        const y = Math.max(yAxisTop, point.y -
+                            s.dataLabels.padding -
+                            labelSize.height +
+                            labelSize.hangingOffset);
                         const x = Math.min(xMax - labelSize.width, Math.max(0, point.x - labelSize.width / 2));
                         const labelData = {
                             text,

package/dist/esm/hooks/useShapes/pie/prepare-data.js

@@ -95,6 +95,7 @@ export function preparePieData(args) {
             const text = getFormattedValue(Object.assign({ value: (_a = d.data.label) !== null && _a !== void 0 ? _a : d.data.value }, d.dataLabels));
             let labelWidth = 0;
             let labelHeight = 0;
+            let labelHangingOffset = 0;
             if (dataLabels.html) {
                 const size = await getLabelsSize({
                     labels: [text],
@@ -108,10 +109,11 @@ export function preparePieData(args) {
                 const size = await getTextSize(text);
                 labelWidth = size.width;
                 labelHeight = size.height;
+                labelHangingOffset = size.hangingOffset;
             }
             const label = {
                 text,
-                size: { width: labelWidth, height: labelHeight },
+                size: { width: labelWidth, height: labelHeight, hangingOffset: labelHangingOffset },
             };
             acc[d.id] = label;
         }
@@ -165,11 +167,16 @@ export function preparePieData(args) {
              * @returns {[number, number]} A tuple [x, y] relative to the pie center.
              */
             const getLabelPosition = (angle) => {
+                var _a;
                 let [x, y] = labelArcGenerator.centroid(Object.assign(Object.assign({}, relatedSegment), { startAngle: angle, endAngle: angle }));
                 if (shouldUseHtml) {
                     x = x < 0 ? x - labelWidth : x;
+                    y = y < 0 ? y - labelHeight : y;
+                }
+                else {
+                    const hangingOffset = (_a = labelSize === null || labelSize === void 0 ? void 0 : labelSize.hangingOffset) !== null && _a !== void 0 ? _a : 0;
+                    y = y < 0 ? y - labelHeight + hangingOffset : y + hangingOffset;
                 }
-                y = y < 0 ? y - labelHeight : y;
                 return [x, y];
             };
             const getConnectorPoints = (angle) => {

package/dist/esm/hooks/useShapes/radar/prepare-data.js

@@ -1,7 +1,7 @@
 import { range } from 'd3-array';
 import { scaleLinear } from 'd3-scale';
 import { curveLinearClosed, line } from 'd3-shape';
-import { getLabelsSize } from '../../../core/utils';
+import { getLabelsSize, getTextSizeFn } from '../../../core/utils';
 import { getFormattedValue } from '../../../core/utils/format';
 export async function prepareRadarData(args) {
     const { series: preparedSeries, boundsWidth, boundsHeight } = args;
@@ -116,18 +116,28 @@ export async function prepareRadarData(args) {
             const shouldUseHtml = dataLabels.html;
             data.labels = await Promise.all(categories.map(async (category, index) => {
                 const text = getFormattedValue(Object.assign({ value: category.key }, dataLabels));
-                const labelSize = await getLabelsSize({ labels: [text], style });
                 const angle = index * angleStep - Math.PI / 2;
                 // Position label slightly outside the point
                 const labelRadius = data.radius + 10;
                 let x = center[0] + Math.cos(angle) * labelRadius;
                 let y = center[1] + Math.sin(angle) * labelRadius;
+                let labelWidth = 0;
+                let labelHeight = 0;
                 if (shouldUseHtml) {
-                    x = x < center[0] ? x - labelSize.maxWidth : x;
-                    y = y - labelSize.maxHeight;
+                    const labelSize = await getLabelsSize({ labels: [text], style });
+                    labelWidth = labelSize.maxWidth;
+                    labelHeight = labelSize.maxHeight;
+                    x = x < center[0] ? x - labelWidth : x;
+                    y = y - labelHeight;
                 }
                 else {
-                    y = y < center[1] ? y - labelSize.maxHeight : y;
+                    const labelSize = await getTextSizeFn({ style })(text);
+                    labelWidth = labelSize.width;
+                    labelHeight = labelSize.height;
+                    y =
+                        y < center[1]
+                            ? y - labelHeight + labelSize.hangingOffset
+                            : y + labelSize.hangingOffset;
                 }
                 x = Math.max(-boundsWidth / 2, x);
                 return {
@@ -135,8 +145,8 @@ export async function prepareRadarData(args) {
                     x,
                     y,
                     style,
-                    size: { width: labelSize.maxWidth, height: labelSize.maxHeight },
-                    maxWidth: labelSize.maxWidth,
+                    size: { width: labelWidth, height: labelHeight },
+                    maxWidth: labelWidth,
                     textAnchor: angle > Math.PI / 2 && angle < (3 * Math.PI) / 2 ? 'end' : 'start',
                     series: { id: series.id },
                 };

package/dist/esm/hooks/useShapes/sankey/prepare-data.js

@@ -1,5 +1,5 @@
-import { sankey, sankeyLinkHorizontal } from 'd3-sankey';
 import { getFormattedValue } from '../../../core/utils/format';
+import { sankey, sankeyLinkHorizontal } from './sankey-layout';
 export function prepareSankeyData(args) {
     const { series, width, height } = args;
     const htmlElements = [];

package/dist/esm/hooks/useShapes/sankey/sankey-layout.d.ts

@@ -0,0 +1,49 @@
+type SankeyLayoutNodeProps = {
+    index: number;
+    depth: number;
+    height: number;
+    layer: number;
+    value: number;
+    fixedValue?: number;
+    x0: number;
+    x1: number;
+    y0: number;
+    y1: number;
+};
+type SankeyLayoutLinkProps = {
+    index: number;
+    value: number;
+    width: number;
+    y0: number;
+    y1: number;
+};
+export type SankeyComputedNode<N, L> = N & SankeyLayoutNodeProps & {
+    sourceLinks: SankeyComputedLink<N, L>[];
+    targetLinks: SankeyComputedLink<N, L>[];
+};
+export type SankeyComputedLink<N, L> = L & SankeyLayoutLinkProps & {
+    source: SankeyComputedNode<N, L>;
+    target: SankeyComputedNode<N, L>;
+};
+export type SankeyGraph<N, L> = {
+    nodes: SankeyComputedNode<N, L>[];
+    links: SankeyComputedLink<N, L>[];
+};
+type AlignFn<N, L> = (node: SankeyComputedNode<N, L>, n: number) => number;
+type SortFn<T> = (a: T, b: T) => number;
+export declare function sankey<N, L>(): {
+    (input: {
+        nodes: N[];
+        links: L[];
+    }): SankeyGraph<N, L>;
+    nodeId(fn: (d: N, i: number) => string | number): /*elided*/ any;
+    nodeAlign(fn: AlignFn<N, L>): /*elided*/ any;
+    nodeSort(fn: SortFn<SankeyComputedNode<N, L>> | undefined): /*elided*/ any;
+    nodeWidth(value: number): /*elided*/ any;
+    nodePadding(value: number): /*elided*/ any;
+    linkSort(fn: SortFn<SankeyComputedLink<N, L>> | undefined): /*elided*/ any;
+    extent([[left, top], [right, bottom]]: [[number, number], [number, number]]): /*elided*/ any;
+    iterations(value: number): /*elided*/ any;
+};
+export declare function sankeyLinkHorizontal<N, L>(): import("d3-shape").Link<any, SankeyComputedLink<N, L>, [number, number]>;
+export {};

package/dist/esm/hooks/useShapes/sankey/sankey-layout.js

@@ -0,0 +1,362 @@
+// Derived from d3-sankey v0.12.3 (https://github.com/d3/d3-sankey)
+// Copyright 2015-2021 Mike Bostock — ISC License
+//
+// Changes:
+// - Ported to TypeScript with explicit generic types (SankeyComputedNode, SankeyComputedLink)
+// - sankeyLinkHorizontal() implemented via linkHorizontal() from d3-shape
+// - Removed unused alignment helpers (left, right, center); only justify is kept
+// - No d3-sankey dependency; uses d3-array and d3-shape (already project dependencies)
+import { max, min, sum } from 'd3-array';
+import { linkHorizontal } from 'd3-shape';
+function justify(node, n) {
+    return node.sourceLinks.length ? node.depth : n - 1;
+}
+function ascendingBreadth(a, b) {
+    return a.y0 - b.y0;
+}
+function ascendingSourceBreadth(a, b) {
+    return ascendingBreadth(a.source, b.source) || a.index - b.index;
+}
+function ascendingTargetBreadth(a, b) {
+    return ascendingBreadth(a.target, b.target) || a.index - b.index;
+}
+function nodeValue(d) {
+    return d.value;
+}
+function linkValue(d) {
+    return d.value;
+}
+export function sankey() {
+    let x0 = 0, y0 = 0, x1 = 1, y1 = 1;
+    let dx = 24; // nodeWidth
+    let dy = 8, py; // nodePadding
+    let getId = (_d, i) => i;
+    let align = justify;
+    let sort;
+    let linkSort;
+    let iterations = 6;
+    function generator(input) {
+        // Mutate input in-place (same as original d3-sankey): layout props are added
+        // directly to node/link objects so that source/target references stay consistent.
+        const graph = {
+            nodes: input.nodes,
+            links: input.links,
+        };
+        computeNodeLinks(graph);
+        computeNodeValues(graph);
+        computeNodeDepths(graph);
+        computeNodeHeights(graph);
+        computeNodeBreadths(graph);
+        computeLinkBreadths(graph);
+        return graph;
+    }
+    generator.nodeId = function (fn) {
+        getId = fn;
+        return generator;
+    };
+    generator.nodeAlign = function (fn) {
+        align = fn;
+        return generator;
+    };
+    generator.nodeSort = function (fn) {
+        sort = fn;
+        return generator;
+    };
+    generator.nodeWidth = function (value) {
+        dx = value;
+        return generator;
+    };
+    generator.nodePadding = function (value) {
+        dy = py = value;
+        return generator;
+    };
+    generator.linkSort = function (fn) {
+        linkSort = fn;
+        return generator;
+    };
+    generator.extent = function ([[left, top], [right, bottom]]) {
+        x0 = left;
+        y0 = top;
+        x1 = right;
+        y1 = bottom;
+        return generator;
+    };
+    generator.iterations = function (value) {
+        iterations = value;
+        return generator;
+    };
+    function computeNodeLinks(graph) {
+        for (const [i, node] of graph.nodes.entries()) {
+            node.index = i;
+            node.sourceLinks = [];
+            node.targetLinks = [];
+        }
+        const nodeById = new Map(graph.nodes.map((d, i) => [getId(d, i), d]));
+        for (const [i, link] of graph.links.entries()) {
+            link.index = i;
+            const unresolved = link;
+            if (typeof unresolved.source !== 'object') {
+                unresolved.source = findNode(nodeById, unresolved.source);
+            }
+            if (typeof unresolved.target !== 'object') {
+                unresolved.target = findNode(nodeById, unresolved.target);
+            }
+            link.source.sourceLinks.push(link);
+            link.target.targetLinks.push(link);
+        }
+        if (linkSort !== null && linkSort !== undefined) {
+            for (const { sourceLinks, targetLinks } of graph.nodes) {
+                sourceLinks.sort(linkSort);
+                targetLinks.sort(linkSort);
+            }
+        }
+    }
+    function computeNodeValues(graph) {
+        for (const node of graph.nodes) {
+            node.value =
+                node.fixedValue === undefined
+                    ? Math.max(sum(node.sourceLinks, linkValue), sum(node.targetLinks, linkValue))
+                    : node.fixedValue;
+        }
+    }
+    function computeNodeDepths(graph) {
+        const n = graph.nodes.length;
+        let current = new Set(graph.nodes);
+        let next = new Set();
+        let x = 0;
+        while (current.size) {
+            for (const node of current) {
+                node.depth = x;
+                for (const { target } of node.sourceLinks) {
+                    next.add(target);
+                }
+            }
+            if (++x > n)
+                throw new Error('circular link');
+            current = next;
+            next = new Set();
+        }
+    }
+    function computeNodeHeights(graph) {
+        const n = graph.nodes.length;
+        let current = new Set(graph.nodes);
+        let next = new Set();
+        let x = 0;
+        while (current.size) {
+            for (const node of current) {
+                node.height = x;
+                for (const { source } of node.targetLinks) {
+                    next.add(source);
+                }
+            }
+            if (++x > n)
+                throw new Error('circular link');
+            current = next;
+            next = new Set();
+        }
+    }
+    function computeNodeLayers(graph) {
+        var _a;
+        const x = ((_a = max(graph.nodes, (d) => d.depth)) !== null && _a !== void 0 ? _a : 0) + 1;
+        const kx = (x1 - x0 - dx) / (x - 1);
+        const columns = new Array(x);
+        for (const node of graph.nodes) {
+            const i = Math.max(0, Math.min(x - 1, Math.floor(align(node, x))));
+            node.layer = i;
+            node.x0 = x0 + i * kx;
+            node.x1 = node.x0 + dx;
+            if (columns[i])
+                columns[i].push(node);
+            else
+                columns[i] = [node];
+        }
+        if (sort) {
+            for (const column of columns) {
+                column.sort(sort);
+            }
+        }
+        return columns;
+    }
+    function initializeNodeBreadths(columns) {
+        var _a;
+        const ky = (_a = min(columns, (c) => (y1 - y0 - (c.length - 1) * py) / sum(c, nodeValue))) !== null && _a !== void 0 ? _a : 0;
+        for (const nodes of columns) {
+            let y = y0;
+            for (const node of nodes) {
+                node.y0 = y;
+                node.y1 = y + node.value * ky;
+                y = node.y1 + py;
+                for (const link of node.sourceLinks) {
+                    link.width = link.value * ky;
+                }
+            }
+            y = (y1 - y + py) / (nodes.length + 1);
+            for (let i = 0; i < nodes.length; ++i) {
+                const node = nodes[i];
+                node.y0 += y * (i + 1);
+                node.y1 += y * (i + 1);
+            }
+            reorderLinks(nodes);
+        }
+    }
+    function computeNodeBreadths(graph) {
+        var _a;
+        const columns = computeNodeLayers(graph);
+        py = Math.min(dy, (y1 - y0) / (((_a = max(columns, (c) => c.length)) !== null && _a !== void 0 ? _a : 1) - 1));
+        initializeNodeBreadths(columns);
+        for (let i = 0; i < iterations; ++i) {
+            const alpha = Math.pow(0.99, i);
+            const beta = Math.max(1 - alpha, (i + 1) / iterations);
+            relaxRightToLeft(columns, alpha, beta);
+            relaxLeftToRight(columns, alpha, beta);
+        }
+    }
+    function computeLinkBreadths(graph) {
+        for (const node of graph.nodes) {
+            let ly0 = node.y0;
+            let ly1 = ly0;
+            for (const link of node.sourceLinks) {
+                link.y0 = ly0 + link.width / 2;
+                ly0 += link.width;
+            }
+            for (const link of node.targetLinks) {
+                link.y1 = ly1 + link.width / 2;
+                ly1 += link.width;
+            }
+        }
+    }
+    function relaxLeftToRight(columns, alpha, beta) {
+        for (let i = 1, n = columns.length; i < n; ++i) {
+            const column = columns[i];
+            for (const target of column) {
+                let y = 0;
+                let w = 0;
+                for (const { source, value } of target.targetLinks) {
+                    const v = value * (target.layer - source.layer);
+                    y += targetTop(source, target) * v;
+                    w += v;
+                }
+                if (!(w > 0))
+                    continue;
+                const d = (y / w - target.y0) * alpha;
+                target.y0 += d;
+                target.y1 += d;
+                reorderNodeLinks(target);
+            }
+            if (sort === undefined)
+                column.sort(ascendingBreadth);
+            resolveCollisions(column, beta);
+        }
+    }
+    function relaxRightToLeft(columns, alpha, beta) {
+        for (let n = columns.length, i = n - 2; i >= 0; --i) {
+            const column = columns[i];
+            for (const source of column) {
+                let y = 0;
+                let w = 0;
+                for (const { target, value } of source.sourceLinks) {
+                    const v = value * (target.layer - source.layer);
+                    y += sourceTop(source, target) * v;
+                    w += v;
+                }
+                if (!(w > 0))
+                    continue;
+                const d = (y / w - source.y0) * alpha;
+                source.y0 += d;
+                source.y1 += d;
+                reorderNodeLinks(source);
+            }
+            if (sort === undefined)
+                column.sort(ascendingBreadth);
+            resolveCollisions(column, beta);
+        }
+    }
+    function resolveCollisions(nodes, alpha) {
+        const i = Math.floor(nodes.length / 2);
+        const subject = nodes[i];
+        resolveCollisionsBottomToTop(nodes, subject.y0 - py, i - 1, alpha);
+        resolveCollisionsTopToBottom(nodes, subject.y1 + py, i + 1, alpha);
+        resolveCollisionsBottomToTop(nodes, y1, nodes.length - 1, alpha);
+        resolveCollisionsTopToBottom(nodes, y0, 0, alpha);
+    }
+    function resolveCollisionsTopToBottom(nodes, y, i, alpha) {
+        for (; i < nodes.length; ++i) {
+            const node = nodes[i];
+            const d = (y - node.y0) * alpha;
+            if (d > 1e-6) {
+                node.y0 += d;
+                node.y1 += d;
+            }
+            y = node.y1 + py;
+        }
+    }
+    function resolveCollisionsBottomToTop(nodes, y, i, alpha) {
+        for (; i >= 0; --i) {
+            const node = nodes[i];
+            const d = (node.y1 - y) * alpha;
+            if (d > 1e-6) {
+                node.y0 -= d;
+                node.y1 -= d;
+            }
+            y = node.y0 - py;
+        }
+    }
+    function reorderNodeLinks(node) {
+        if (linkSort === undefined) {
+            for (const { source: { sourceLinks }, } of node.targetLinks) {
+                sourceLinks.sort(ascendingTargetBreadth);
+            }
+            for (const { target: { targetLinks }, } of node.sourceLinks) {
+                targetLinks.sort(ascendingSourceBreadth);
+            }
+        }
+    }
+    function reorderLinks(nodes) {
+        if (linkSort === undefined) {
+            for (const { sourceLinks, targetLinks } of nodes) {
+                sourceLinks.sort(ascendingTargetBreadth);
+                targetLinks.sort(ascendingSourceBreadth);
+            }
+        }
+    }
+    function targetTop(source, target) {
+        let y = source.y0 - ((source.sourceLinks.length - 1) * py) / 2;
+        for (const { target: node, width } of source.sourceLinks) {
+            if (node === target)
+                break;
+            y += width + py;
+        }
+        for (const { source: node, width } of target.targetLinks) {
+            if (node === source)
+                break;
+            y -= width;
+        }
+        return y;
+    }
+    function sourceTop(source, target) {
+        let y = target.y0 - ((target.targetLinks.length - 1) * py) / 2;
+        for (const { source: node, width } of target.targetLinks) {
+            if (node === source)
+                break;
+            y += width + py;
+        }
+        for (const { target: node, width } of source.sourceLinks) {
+            if (node === target)
+                break;
+            y -= width;
+        }
+        return y;
+    }
+    return generator;
+}
+export function sankeyLinkHorizontal() {
+    return linkHorizontal()
+        .source((d) => [d.source.x1, d.y0])
+        .target((d) => [d.target.x0, d.y1]);
+}
+function findNode(nodeById, id) {
+    const node = nodeById.get(id);
+    if (!node)
+        throw new Error('missing: ' + id);
+    return node;
+}

package/dist/esm/hooks/useShapes/styles.css

@@ -3,7 +3,7 @@
 .gcharts-radar__label,
 .gcharts-heatmap__label,
 .gcharts-funnel__label {
-  dominant-baseline: text-before-edge;
+  dominant-baseline: hanging;
 }
 
 .gcharts-scatter__point {
@@ -17,7 +17,7 @@
   font-size: 11px;
   font-weight: bold;
   fill: var(--g-color-text-complementary);
-  dominant-baseline: text-before-edge;
+  dominant-baseline: hanging;
 }
 
 .gcharts-bar-x__label {
@@ -28,14 +28,14 @@
 .gcharts-bar-y__label {
   user-select: none;
   fill: var(--g-color-text-complementary);
-  dominant-baseline: text-after-edge;
+  dominant-baseline: hanging;
 }
 
 .gcharts-treemap__label {
   user-select: none;
   pointer-events: none;
   fill: var(--g-color-text-complementary);
-  dominant-baseline: text-before-edge;
+  dominant-baseline: hanging;
 }
 
 .gcharts-waterfall__connector {

package/dist/esm/hooks/useShapes/treemap/prepare-data.js

@@ -22,6 +22,7 @@ async function getLabels(args) {
             const label = getFormattedValue(Object.assign({ value: text }, args.options));
             let labelMaxHeight = 0;
             let labelMaxWidth = 0;
+            let hangingOffset = 0;
             if (html) {
                 const size = (_a = (await getLabelsSize({
                     labels: [label],
@@ -35,9 +36,10 @@ async function getLabels(args) {
                 const size = await getTextSize(label);
                 labelMaxHeight = size.height;
                 labelMaxWidth = size.width;
+                hangingOffset = size.hangingOffset;
             }
             let x = left;
-            const y = prevLabelsHeight + d.y0 + padding;
+            const y = prevLabelsHeight + d.y0 + padding + hangingOffset;
             const labelWidth = Math.min(labelMaxWidth, spaceWidth);
             const labelHeight = Math.min(labelMaxHeight, availableSpaceHeight);
             if (!labelWidth || y > d.y1) {

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

@@ -1,5 +1,5 @@
 import type { Dispatch } from 'd3-dispatch';
-import type { AxisPlotBand, AxisPlotLine, PointPosition, TooltipDataChunk } from '../../types';
+import type { AxisPlotBand, AxisPlotLine, AxisPlotShape, PointPosition, TooltipDataChunk } from '../../types';
 import type { PreparedTooltip } from '../types';
 import type { PreparedXAxis, PreparedYAxis } from '../useAxis/types';
 type Args = {
@@ -10,8 +10,9 @@ type Args = {
 };
 export declare const useTooltip: ({ dispatcher, tooltip, xAxis, yAxis }: Args) => {
     hovered: TooltipDataChunk[] | undefined;
-    hoveredPlotLines: AxisPlotLine[] | undefined;
     hoveredPlotBands: AxisPlotBand[] | undefined;
+    hoveredPlotLines: AxisPlotLine[] | undefined;
+    hoveredPlotShapes: AxisPlotShape[] | undefined;
     pointerPosition: PointPosition | undefined;
 };
 export {};