diff --git a/packages/victory-tooltip/src/victory-tooltip.test.tsx b/packages/victory-tooltip/src/victory-tooltip.test.tsx index ab21213e9..a891853aa 100644 --- a/packages/victory-tooltip/src/victory-tooltip.test.tsx +++ b/packages/victory-tooltip/src/victory-tooltip.test.tsx @@ -54,6 +54,35 @@ describe("components/victory-tooltip", () => { expect(flyout).toBeInTheDocument(); }); + it("passes lineHeight from the style to the label component", () => { + const style = { lineHeight: 2, fontSize: 12 }; + render( + + } + />, + { + wrapper: VictoryContainer as React.JSXElementConstructor<{ + children: React.ReactNode; + }>, + }, + ); + const label = screen.getByTestId(labelId); + expect(label).toBeInTheDocument(); + // The second line's tspan dy should reflect the lineHeight multiplier, + // not fall back to the default of 1. + const tspans = label.querySelectorAll("tspan"); + const secondLineDy = tspans[1].getAttribute("dy"); + expect(secondLineDy).not.toBeNull(); + expect(parseInt(secondLineDy!, 10)).toBeGreaterThan(0); + }); + describe("event handling", () => { it("attaches an to the flyout object", () => { const clickHandler = jest.fn(); diff --git a/packages/victory-tooltip/src/victory-tooltip.tsx b/packages/victory-tooltip/src/victory-tooltip.tsx index 3479d9137..97d4ae77e 100644 --- a/packages/victory-tooltip/src/victory-tooltip.tsx +++ b/packages/victory-tooltip/src/victory-tooltip.tsx @@ -500,6 +500,14 @@ export class VictoryTooltip extends React.Component { (Array.isArray(style) && style.length ? style[0].textAnchor : style.textAnchor) || "middle"; + // VictoryLabel reads `lineHeight` from props, not from `style`. When the + // theme supplies `tooltip.style.lineHeight`, it is only applied to the + // flyout height — not to the text positioning — unless we lift it out of + // the style object and pass it through explicitly. + const lineHeight = + Array.isArray(style) && style.length + ? style.map((s) => s.lineHeight) + : style.lineHeight; const getLabelX = () => { if (!textAnchor || textAnchor === "middle") { return flyoutCenter.x; @@ -515,6 +523,7 @@ export class VictoryTooltip extends React.Component { textAnchor, dy, dx, + lineHeight, style, x: getLabelX() + (flyoutPadding.left - flyoutPadding.right) / 2, y: flyoutCenter.y + (flyoutPadding.top - flyoutPadding.bottom) / 2,