Any way for native tooltip to overflow chart container?

[rwhitten577]

Hi there, thanks for this library. Works great for me so far, but I'm having trouble getting the tooltips at the end of the x or y axis to overflow and they are getting cut off. Is there any way to do this with the native Tooltip component? Thanks!

[xanderdeseyn]

Hi, unfortunately SVG does not allow overflow outside of the parent container. I'll have to think about some clever way to move the tooltip component out of the chart svg. I'll look into it this week!

[xanderdeseyn]

I've fixed it so it works as long as you don't define a custom viewBox (scrolling chart actually takes advantage of this non overflow property, so tooltips will still be cut off there). Check out v5.3.0 👍

Don't forget to set a padding on the component, so the tooltip can overflow into the padding!

[rwhitten577]

Awesome, thanks for your help!

[davidruisinger]

@N1ghtly any chance the scatter could overflow as well? I have a round scatter for selection only which is currently cut of with the chart:

[xanderdeseyn]

@flavordaaave ah yes, good catch, I will fix that tomorrow.

[xanderdeseyn]

@flavordaaave Fixed in v5.3.2

[D-Navadiya]

Having the same issue, it's still not working for me on android. Am I missing something?

[xanderdeseyn]

You have to supply enough padding for the tooltip to overflow "into" (on component)

[D-Navadiya]

@N1ghtly , thanks for the reply.

Okay, so if there is a long tooltip text then I will have to give it a lot of padding, right?

and if I do give it a big padding, it will result in smaller chart, no?

I am sorry if I am not getting it right.

[xanderdeseyn]

That's correct.

[D-Navadiya]

Okay, understood,

do you think that it is possible to implement some positioning logic (using dx,dy & position prop)?

if you think it's worth, let me know, I will try and have a PR ready.

Thanks :)

[xanderdeseyn]

Definitely possible, the supplied Tooltip component is quite simple & "dumb" at the moment haha :)

[D-Navadiya]

Haha, nice one, I'll see what I can do,

Thank you so much :)

[faizantariq1]

HI @rwhitten577 how did you apply dates on the scrollable chart?

[rwhitten577]

@faizantariq1 convert your data values to a Unix timestamp, then use the label formatter function to convert it back to a date string in the format you want, e.g. formatter: (v: number) => moment(v).format("MMM DD")

https://react-native-responsive-linechart.surge.sh/docs/horizontalaxis#horizontalaxis-default-theme

[faizantariq1]

@rwhitten577 thankx, i'm doing the same. but want to use the infinite scroll so using the view port with width(which is not adjusting correctly), so when i removed the viewport it's working fine. giving a very short value in viewport