Help Needed: Custom Tooltip Positioning Based on Data Point in LineChart

[Lucc4sMartins]

I am seeking assistance with customizing the position of tooltips in a LineChart component. I want the tooltip to be positioned based on the actual data point, rather than following the mouse cursor. My goal is to have the tooltip statically appear right at the plotted point.

Current behavior (default behavior):

What I wanted it to be (static independent of mouse position):

Here's a Codesandbox with the chart I'm building. Currently, there's nothing going on with the Tooltip as I've forfeited all my attempts to accomplish the goal.

I feel like I'm really missing something very very silly, would appreciate it very much if someone could shed some light on this 🙏

[ckifer]

Hi

You can set the position of the tooltip to a static value if you'd like

 <Tooltip
     isAnimationActive={false}
    cursor={false}
    position={
      { y: 50 }
    }
/>

[ckifer]

This storybook example is also helpful
https://github.com/recharts/recharts/blob/master/storybook/stories/Examples/Tooltip.stories.tsx#L71

https://master--63da8268a0da9970db6992aa.chromatic.com/?path=/story/examples-tooltip--locked-by-click

[Lucc4sMartins]

Thank you for jumping in so quickly!

Sorry, I haven't done a good job describing what I've tried and why I failed...

I've tried position, but it seems to be tied to the CartesianGrid instead of the data points -- at least that's what I feel as the tooltip position is always set to the same height when setting, per se, { y: 50 }.

---

I wanted it to be relative to the data points, in a way they would always have the same distance from the data points. Something like this:

I'm now exploring if the example given in Locked by click is helpful in this case, thanks for pointing to that.

[off-topic] A quick feedback on the Storybook: I thought it wasn't working because it took too long to load from the homepage, it'd be amazing to have visual feedback it's loading all the components.

[ckifer]

Makes sense - yeah its tied to the grid with 0, 0 being the top left corner.

See this issue #488 - a lot of "workarounds" there, but currently this isn't implemented in an easy way in recharts. We don't have enough help to take a ton of changes on at a time so it hasn't been prioritized. If you'd like to help it would be an amazing way to contribute!

[off-topic] A quick feedback on the Storybook: I thought it wasn't working because it took too long to load from the homepage, it'd be amazing to have visual feedback it's loading all the components.

This is on storybook, I don't think we have any control over the loading state of things unfortunately - it should show a loading bar previous to loading the content.

[Lucc4sMartins]

#488 gave me some great great insights on how to do it and I found my way to accomplish it.

Thank you so much for your guidance and kindness!

[ckifer]

Glad you were able to! Feel free to at least share here or in that thread so others can benefit too!

[Lucc4sMartins]

It was a combination of some existing responses, not sure I can add much to it.

Once I'm finished, I'll make sure to double-check if there's room for contribution in that sense!