Victory: Text anchor property on a VictoryLabel as labelComponent of a VictoryTooltip places the text outside of a tooltip flyout

[jjoselv]

Bugs and Questions

Checklist

• [x] This is not a victory-native specific issue. (Issues that only appear in victory-native should be opened here)

• [x] I have read through the FAQ and Guides before asking a question

• [x] I am using the latest version of Victory

• [x] I've searched open issues to make sure I'm not opening a duplicate issue

The Problem

Text anchor property on a VictoryLabel as labelComponent of a VictoryTooltip places the text outside of a tooltip flyout.

Reproduction

https://codesandbox.io/s/smoosh-currying-j0six?file=/index.js

[jjoselv]

Maybe here the text alignments could/should be controlled with a new prob called textAlign or something, that doesn't relate to the anchor?

[boygirl]

@jjoselv oh, interesting! This should be fixed in the library. The tooltip already takes into account the width and height of its label text for positioning, but is currently calculating its center in a naive way by just plopping it in the center of the width and height without taking textAnchor into account at all. To fix this, there will need to be an adjustment to how the tooltip calculates its own center.

[boygirl]

As a temporary solution you can use the flyoutPadding if you know roughly how wide your label text is:

flyoutPadding={{ top: 12, bottom: 12, left: 50 + 12, right: -50 + 12}}

[jjoselv]

That's the problem, I was relying on native SVG VictoryLabels because I do not know the size of the tooltip beforehand.

[jjoselv]

@boygirl Maybe I can help, can you point me to where the code should be fixed and I can give it a try and raise a PR?

[boygirl]

@jjoselv After taking a closer look, it seems that the tooltip does take the textAnchor into account when it is defined on the style prop on VictoryTooltip:

https://github.com/FormidableLabs/victory/blob/main/packages/victory-tooltip/src/victory-tooltip.js#L430

The issue is that when you have a custom labelComponent, with textAnchor defined directly on the component, VictoryTooltip doesn't know about it. So the library level fix would be to make the textAnchor calculation linked above first check for that prop on labelComponent. I would welcome a PR for that.

But to fix your problem immediately you can add style={{ textAnchor: "end"}} to VictoryTooltip

[jjoselv]

@boygirl I did not have the time to open a PR in the end, even though I'd love to, thanks for the clarification though! From what I can see you take a lot of care of the library and that is amazing :) keep up the good work!
I'll close the issue